@ehfuse/overlay-scrollbar 1.5.9 → 1.5.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +2 -2
- package/dist/src/OverlayScrollbar.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useRef as S,useEffect as L,useState as x,useCallback as p,useMemo as j,forwardRef as Ke,useImperativeHandle as Ze,useLayoutEffect as je}from"react";var Je=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],ge=(E,O)=>{let N=E.tagName.toLowerCase(),C=["text","password","email","number","search","tel","url","checkbox","radio"];if(N==="input"){let H=E.type;return C.includes(H)}if(["textarea","select","button"].includes(N)||["svg","path","circle","rect","line","polygon","polyline"].includes(N)||E.getAttribute("contenteditable")==="true")return!0;if(O?.excludeSelectors){for(let H of O.excludeSelectors)if(E.matches(H))return!0}return Xe(E,O)},Xe=(E,O)=>{let N=[...Je,...O?.excludeClasses||[]],C=E,H=0,_=5;for(;C&&H<=_;){if(N.some(T=>C.classList.contains(T)))return!0;if(C.classList.contains("MuiDialogContent-root"))break;C=C.parentElement,H++}return!1};import{jsx as U,jsxs as He}from"react/jsx-runtime";var Ve={},Qe={},et={},tt={},ot={},rt=Ke(({className:E="",style:O={},containerStyle:N={},contentStyle:C={},children:H,onScroll:_,thumb:T=Ve,track:R=Qe,arrows:I=et,dragScroll:W=tt,autoHide:z=ot,showScrollbar:V=!0,detectInnerScroll:ke=!1},Le)=>{let Re=S({});L(()=>{Re.current={children:H,onScroll:_,showScrollbar:V,thumb:T,track:R,arrows:I,dragScroll:W,autoHide:z}});let le=S(null),r=S(null),$=S(null),Q=S(null),Ie=S(null),D=S(null),[ie,b]=x(!1),[P,be]=x(!1),[ve,ye]=x(!1),[ce,Ae]=x({y:0,scrollTop:0}),[B,Oe]=x(0),[Ne,xe]=x(0),[ae,Te]=x(!1),[Y,we]=x(!1),[ee,$e]=x({x:0,y:0,scrollTop:0,scrollLeft:0}),[nt,lt]=x(null),[te,oe]=x(null),[it,Pe]=x(!1),G=S(null),[Se,Me]=x(!1),J=S(null),X=S(null),F=S(null),v=j(()=>{let e=T.color??"#606060";return{width:T.width??8,minHeight:T.minHeight??50,radius:T.radius??(T.width??8)/2,color:e,opacity:T.opacity??.6,hoverColor:T.hoverColor??e,hoverOpacity:T.hoverOpacity??1}},[T]),c=j(()=>({width:R.width??16,color:R.color??"rgba(128, 128, 128, 0.1)",visible:R.visible??!0,alignment:R.alignment??"center",radius:R.radius??v.radius??4,margin:R.margin??4}),[R,v.radius]),M=j(()=>{let e=I.color??"#808080";return{visible:I.visible??!1,step:I.step??50,color:e,opacity:I.opacity??.6,hoverColor:I.hoverColor??e,hoverOpacity:I.hoverOpacity??1}},[I]),se=j(()=>({enabled:W.enabled??!0,excludeClasses:W.excludeClasses??[],excludeSelectors:W.excludeSelectors??[]}),[W]),i=j(()=>({enabled:z.enabled??!0,delay:z.delay??1500,delayOnWheel:z.delayOnWheel??700}),[z]),m=v.width,Fe=c.width,ue=v.minHeight,k=M.visible,re=M.step,A=p(()=>{if(!r.current)return;let e=document.activeElement;e&&r.current.contains(e)&&e!==r.current||r.current.focus()},[]);Ze(Le,()=>({getScrollContainer:()=>r.current,scrollTo:e=>{r.current&&r.current.scrollTo(e)},get scrollTop(){return r.current?.scrollTop||0},get scrollHeight(){return r.current?.scrollHeight||0},get clientHeight(){return r.current?.clientHeight||0}}),[]);let u=p(()=>{if(D.current){let t=D.current;if(document.contains(t)&&t.scrollHeight>t.clientHeight+2)return t;D.current=null}if(!r.current)return null;if($.current&&$.current.scrollHeight>r.current.clientHeight+2)return D.current=r.current,r.current;if(!ke)return null;let e=r.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==r.current&&o.classList.contains("overlay-scrollbar-container"))continue;let n=o.parentElement,l=!1;for(;n&&n!==r.current;){if(n.classList.contains("overlay-scrollbar-container")&&n!==r.current){l=!0;break}n=n.parentElement}if(!l&&o.scrollHeight>o.clientHeight+2)return D.current=o,o}return null},[]),q=p(()=>u()!==null,[u]),f=p(()=>{J.current&&(clearTimeout(J.current),J.current=null)},[]),_e=p(()=>{X.current&&(clearTimeout(X.current),X.current=null)},[]),qe=p(()=>{F.current&&(clearTimeout(F.current),F.current=null)},[]),h=p(e=>{i.enabled&&(f(),J.current=setTimeout(()=>{b(!1),J.current=null},e))},[f,i.enabled]),a=p(()=>{let e=u();if(!e){b(!1),Te(!1),f();return}if(Te(!0),!Q.current)return;i.enabled||(b(!0),f());let t=e.clientHeight,o=e.scrollHeight,n=e.scrollTop,l=0;if(le.current){let ne=window.getComputedStyle(le.current),Ee=parseFloat(ne.paddingTop)||0,Ce=parseFloat(ne.paddingBottom)||0;l=Ee+Ce}let s=k?m*2+c.margin*4:c.margin*2,y=t-s+l,g=t/o,d=Math.max(y*g,ue),Z=o-t,w=y-d,he=Z>0?n/Z*w:0;Oe(d),xe(he)},[u,f,k,m,ue,i.enabled]),Ue=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(be(!0),Ae({y:e.clientY,scrollTop:t.scrollTop}),f(),b(!0),A())},[u,f,A]),de=p(e=>{if(!P)return;let t=u();if(!t)return;let o=t.clientHeight,l=t.scrollHeight-o,s=e.clientY-ce.y,y=o-B,g=s/y*l,d=Math.max(0,Math.min(l,ce.scrollTop+g));t.scrollTop=d,a()},[P,ce,B,a,u]),pe=p(()=>{be(!1),q()&&h(i.delay)},[q,h,i.delay]),We=p(e=>{if(!Q.current)return;let o=Q.current.getBoundingClientRect(),n=e.clientY-o.top,l=u();if(!l)return;let s=l.clientHeight,y=l.scrollHeight,d=n/s*(y-s);l.scrollTop=Math.max(0,Math.min(y-s,d)),a(),b(!0),h(i.delay),A()},[a,h,i.delay,u,A]),ze=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current)return;let t=Math.max(0,r.current.scrollTop-re);r.current.scrollTop=t,a(),b(!0),h(i.delay),A()},[a,h,re,i.delay,A]),Be=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current||!$.current)return;let t=r.current,n=$.current.scrollHeight-t.clientHeight,l=Math.min(n,t.scrollTop+re);t.scrollTop=l,a(),b(!0),h(i.delay),A()},[a,h,re,i.delay,A]),Ye=p(e=>{if(!se.enabled)return;let t=e.target;if(ge(t,se)||e.button!==0)return;let o=u();o&&(o.scrollHeight<=o.clientHeight||(e.preventDefault(),we(!0),$e({x:e.clientX,y:e.clientY,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft||0}),f()))},[se,ge,u,f]),me=p(e=>{if(!Y)return;let t=u();if(!t)return;let o=ee.x-e.clientX,n=ee.y-e.clientY;if(Math.abs(n)<3&&Math.abs(o)<3)return;b(!0);let l=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,ee.scrollTop+n));t.scrollTop=l,a()},[Y,ee,u,a]),fe=p(()=>{we(!1),q()&&h(i.delay)},[q,h,i.delay]);L(()=>{let e=s=>{a(),f(),b(!0);let y=Se?i.delayOnWheel:i.delay;h(y),_&&_(s)},t=()=>{Me(!0),G.current&&clearTimeout(G.current),G.current=setTimeout(()=>{Me(!1)},300),f(),qe(),F.current=setTimeout(()=>{b(!0),F.current=null},50)},o=[],n=u();n&&o.push(n);let l=r.current;return l&&!n&&(o.push(l),l.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(y=>{let g=y;if(g!==l&&g.classList.contains("overlay-scrollbar-container"))return;let d=g.parentElement;for(;d&&d!==l;){if(d.classList.contains("overlay-scrollbar-container")&&d!==l)return;d=d.parentElement}o.push(g)})),o.forEach(s=>{s.addEventListener("scroll",e,{passive:!0}),s.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(s=>{s.removeEventListener("scroll",e),s.removeEventListener("wheel",t)}),G.current&&clearTimeout(G.current),F.current&&clearTimeout(F.current)}},[u,a,_,f,h,i,Se]),L(()=>{let e=o=>{let n=u();if(!n)return;let{key:l}=o,{scrollTop:s,scrollHeight:y,clientHeight:g}=n,d=y-g,Z=50,w=null;switch(l){case"ArrowUp":o.preventDefault(),w=Math.max(0,s-Z);break;case"ArrowDown":o.preventDefault(),w=Math.min(d,s+Z);break;case"PageUp":o.preventDefault(),w=Math.max(0,s-g);break;case"PageDown":o.preventDefault(),w=Math.min(d,s+g);break;case"Home":o.preventDefault(),w=0;break;case"End":o.preventDefault(),w=d;break;default:return}if(w!==null){let he=w/d,ne=k?m*2+c.margin*4:c.margin*2,Ge=(g-ne-B)*he;xe(Ge),n.scrollTop=w,f(),b(!0),h(i.delay)}},t=r.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[u,k,m,c.margin,B,f,h,i.delay]),L(()=>{if(Y)return document.addEventListener("mousemove",me),document.addEventListener("mouseup",fe),()=>{document.removeEventListener("mousemove",me),document.removeEventListener("mouseup",fe)}},[Y,me,fe]),L(()=>{if(P)return document.addEventListener("mousemove",de),document.addEventListener("mouseup",pe),()=>{document.removeEventListener("mousemove",de),document.removeEventListener("mouseup",pe)}},[P,de,pe]),L(()=>{a();let e=setTimeout(()=>{a()},100);return()=>clearTimeout(e)},[a]),je(()=>{Pe(!0),a(),!i.enabled&&q()&&b(!0)},[q,a,i.enabled]),L(()=>{let e=new ResizeObserver(()=>{a()}),t=[];return r.current&&t.push(r.current),$.current&&t.push($.current),D.current&&document.contains(D.current)&&t.push(D.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[a]),L(()=>{if(!r.current)return;let e=new MutationObserver(()=>{D.current=null,a()});return e.observe(r.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[a]);let K=Math.max(Fe,m);return L(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
1
|
+
import{useRef as S,useEffect as L,useState as x,useCallback as p,useMemo as j,forwardRef as Ke,useImperativeHandle as Ze,useLayoutEffect as je}from"react";var Je=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],ge=(E,A)=>{let N=E.tagName.toLowerCase(),C=["text","password","email","number","search","tel","url","checkbox","radio"];if(N==="input"){let H=E.type;return C.includes(H)}if(["textarea","select","button"].includes(N)||["svg","path","circle","rect","line","polygon","polyline"].includes(N)||E.getAttribute("contenteditable")==="true")return!0;if(A?.excludeSelectors){for(let H of A.excludeSelectors)if(E.matches(H))return!0}return Xe(E,A)},Xe=(E,A)=>{let N=[...Je,...A?.excludeClasses||[]],C=E,H=0,_=5;for(;C&&H<=_;){if(N.some(T=>C.classList.contains(T)))return!0;if(C.classList.contains("MuiDialogContent-root"))break;C=C.parentElement,H++}return!1};import{jsx as q,jsxs as De}from"react/jsx-runtime";var Ve={},Qe={},et={},tt={},ot={},rt=Ke(({className:E="",style:A={},containerStyle:N={},contentStyle:C={},children:H,onScroll:_,thumb:T=Ve,track:R=Qe,arrows:I=et,dragScroll:U=tt,autoHide:z=ot,showScrollbar:V=!0,detectInnerScroll:Le=!1},Re)=>{let Ie=S({});L(()=>{Ie.current={children:H,onScroll:_,showScrollbar:V,thumb:T,track:R,arrows:I,dragScroll:U,autoHide:z}});let le=S(null),r=S(null),$=S(null),Q=S(null),Oe=S(null),D=S(null),[ie,b]=x(!1),[P,be]=x(!1),[ve,ye]=x(!1),[ce,Ae]=x({y:0,scrollTop:0}),[B,Ne]=x(0),[$e,xe]=x(0),[ae,Te]=x(!1),[Y,we]=x(!1),[ee,Pe]=x({x:0,y:0,scrollTop:0,scrollLeft:0}),[nt,lt]=x(null),[te,oe]=x(null),[it,Fe]=x(!1),G=S(null),[Se,Me]=x(!1),J=S(null),X=S(null),F=S(null),v=j(()=>{let e=T.color??"#606060";return{width:T.width??8,minHeight:T.minHeight??50,radius:T.radius??(T.width??8)/2,color:e,opacity:T.opacity??.6,hoverColor:T.hoverColor??e,hoverOpacity:T.hoverOpacity??1}},[T]),c=j(()=>({width:R.width??16,color:R.color??"rgba(128, 128, 128, 0.1)",visible:R.visible??!0,alignment:R.alignment??"center",radius:R.radius??v.radius??4,margin:R.margin??4}),[R,v.radius]),M=j(()=>{let e=I.color??"#808080";return{visible:I.visible??!1,step:I.step??50,color:e,opacity:I.opacity??.6,hoverColor:I.hoverColor??e,hoverOpacity:I.hoverOpacity??1}},[I]),se=j(()=>({enabled:U.enabled??!0,excludeClasses:U.excludeClasses??[],excludeSelectors:U.excludeSelectors??[]}),[U]),i=j(()=>({enabled:z.enabled??!0,delay:z.delay??1500,delayOnWheel:z.delayOnWheel??700}),[z]),m=v.width,_e=c.width,ue=v.minHeight,k=M.visible,re=M.step,O=p(()=>{if(!r.current)return;let e=document.activeElement;e&&r.current.contains(e)&&e!==r.current||r.current.focus()},[]);Ze(Re,()=>({getScrollContainer:()=>r.current,scrollTo:e=>{r.current&&r.current.scrollTo(e)},get scrollTop(){return r.current?.scrollTop||0},get scrollHeight(){return r.current?.scrollHeight||0},get clientHeight(){return r.current?.clientHeight||0}}),[]);let u=p(()=>{if(D.current){let t=D.current;if(document.contains(t)&&t.scrollHeight>t.clientHeight+2)return t;D.current=null}if(!r.current)return null;if($.current&&$.current.scrollHeight>r.current.clientHeight+2)return D.current=r.current,r.current;if(!Le)return null;let e=r.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==r.current&&o.classList.contains("overlay-scrollbar-container"))continue;let n=o.parentElement,l=!1;for(;n&&n!==r.current;){if(n.classList.contains("overlay-scrollbar-container")&&n!==r.current){l=!0;break}n=n.parentElement}if(!l&&o.scrollHeight>o.clientHeight+2)return D.current=o,o}return null},[]),W=p(()=>u()!==null,[u]),h=p(()=>{J.current&&(clearTimeout(J.current),J.current=null)},[]),We=p(()=>{X.current&&(clearTimeout(X.current),X.current=null)},[]),Ee=p(()=>{F.current&&(clearTimeout(F.current),F.current=null)},[]),f=p(e=>{i.enabled&&(h(),J.current=setTimeout(()=>{b(!1),J.current=null},e))},[h,i.enabled]),a=p(()=>{let e=u();if(!e){b(!1),Te(!1),h();return}if(Te(!0),!Q.current)return;i.enabled||(b(!0),h());let t=e.clientHeight,o=e.scrollHeight,n=e.scrollTop,l=0;if(le.current){let ne=window.getComputedStyle(le.current),Ce=parseFloat(ne.paddingTop)||0,He=parseFloat(ne.paddingBottom)||0;l=Ce+He}let s=k?m*2+c.margin*4:c.margin*2,y=t-s+l,g=t/o,d=Math.max(y*g,ue),Z=o-t,w=y-d,he=Z>0?n/Z*w:0;Ne(d),xe(he)},[u,h,k,m,ue,i.enabled]),qe=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(be(!0),Ae({y:e.clientY,scrollTop:t.scrollTop}),h(),b(!0),O())},[u,h,O]),de=p(e=>{if(!P)return;let t=u();if(!t)return;let o=t.clientHeight,l=t.scrollHeight-o,s=e.clientY-ce.y,y=o-B,g=s/y*l,d=Math.max(0,Math.min(l,ce.scrollTop+g));t.scrollTop=d,a()},[P,ce,B,a,u]),pe=p(()=>{be(!1),W()&&f(i.delay)},[W,f,i.delay]),Ue=p(e=>{if(!Q.current)return;let o=Q.current.getBoundingClientRect(),n=e.clientY-o.top,l=u();if(!l)return;let s=l.clientHeight,y=l.scrollHeight,d=n/s*(y-s);l.scrollTop=Math.max(0,Math.min(y-s,d)),a(),b(!0),f(i.delay),O()},[a,f,i.delay,u,O]),ze=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current)return;let t=Math.max(0,r.current.scrollTop-re);r.current.scrollTop=t,a(),b(!0),f(i.delay),O()},[a,f,re,i.delay,O]),Be=p(e=>{if(e.preventDefault(),e.stopPropagation(),!r.current||!$.current)return;let t=r.current,n=$.current.scrollHeight-t.clientHeight,l=Math.min(n,t.scrollTop+re);t.scrollTop=l,a(),b(!0),f(i.delay),O()},[a,f,re,i.delay,O]),Ye=p(e=>{if(!se.enabled)return;let t=e.target;if(ge(t,se)||e.button!==0)return;let o=u();o&&(o.scrollHeight<=o.clientHeight||(e.preventDefault(),we(!0),Pe({x:e.clientX,y:e.clientY,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft||0}),h()))},[se,ge,u,h]),me=p(e=>{if(!Y)return;let t=u();if(!t)return;let o=ee.x-e.clientX,n=ee.y-e.clientY;if(Math.abs(n)<3&&Math.abs(o)<3)return;b(!0);let l=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,ee.scrollTop+n));t.scrollTop=l,a()},[Y,ee,u,a]),fe=p(()=>{we(!1),W()&&f(i.delay)},[W,f,i.delay]);L(()=>{let e=s=>{a(),h(),b(!0),Ee();let y=Se?i.delayOnWheel:i.delay;f(y),_&&_(s)},t=()=>{Me(!0),G.current&&clearTimeout(G.current),G.current=setTimeout(()=>{Me(!1)},300),Ee(),F.current=setTimeout(()=>{b(!0),F.current=null,f(i.delayOnWheel)},50)},o=[],n=u();n&&o.push(n);let l=r.current;return l&&!n&&(o.push(l),l.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(y=>{let g=y;if(g!==l&&g.classList.contains("overlay-scrollbar-container"))return;let d=g.parentElement;for(;d&&d!==l;){if(d.classList.contains("overlay-scrollbar-container")&&d!==l)return;d=d.parentElement}o.push(g)})),o.forEach(s=>{s.addEventListener("scroll",e,{passive:!0}),s.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(s=>{s.removeEventListener("scroll",e),s.removeEventListener("wheel",t)}),G.current&&clearTimeout(G.current),F.current&&clearTimeout(F.current)}},[u,a,_,h,f,i,Se]),L(()=>{let e=o=>{let n=u();if(!n)return;let{key:l}=o,{scrollTop:s,scrollHeight:y,clientHeight:g}=n,d=y-g,Z=50,w=null;switch(l){case"ArrowUp":o.preventDefault(),w=Math.max(0,s-Z);break;case"ArrowDown":o.preventDefault(),w=Math.min(d,s+Z);break;case"PageUp":o.preventDefault(),w=Math.max(0,s-g);break;case"PageDown":o.preventDefault(),w=Math.min(d,s+g);break;case"Home":o.preventDefault(),w=0;break;case"End":o.preventDefault(),w=d;break;default:return}if(w!==null){let he=w/d,ne=k?m*2+c.margin*4:c.margin*2,Ge=(g-ne-B)*he;xe(Ge),n.scrollTop=w,h(),b(!0),f(i.delay)}},t=r.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[u,k,m,c.margin,B,h,f,i.delay]),L(()=>{if(Y)return document.addEventListener("mousemove",me),document.addEventListener("mouseup",fe),()=>{document.removeEventListener("mousemove",me),document.removeEventListener("mouseup",fe)}},[Y,me,fe]),L(()=>{if(P)return document.addEventListener("mousemove",de),document.addEventListener("mouseup",pe),()=>{document.removeEventListener("mousemove",de),document.removeEventListener("mouseup",pe)}},[P,de,pe]),L(()=>{a();let e=setTimeout(()=>{a()},100);return()=>clearTimeout(e)},[a]),je(()=>{Fe(!0),a(),!i.enabled&&W()&&b(!0)},[W,a,i.enabled]),L(()=>{let e=new ResizeObserver(()=>{a()}),t=[];return r.current&&t.push(r.current),$.current&&t.push($.current),D.current&&document.contains(D.current)&&t.push(D.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[a]),L(()=>{if(!r.current)return;let e=new MutationObserver(()=>{D.current=null,a()});return e.observe(r.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[a]);let K=Math.max(_e,m);return L(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
2
2
|
.overlay-scrollbar-container::-webkit-scrollbar {
|
|
3
3
|
display: none !important;
|
|
4
4
|
width: 0 !important;
|
|
@@ -18,5 +18,5 @@ import{useRef as S,useEffect as L,useState as x,useCallback as p,useMemo as j,fo
|
|
|
18
18
|
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
19
19
|
outline-offset: -2px;
|
|
20
20
|
}
|
|
21
|
-
`,document.head.appendChild(o),()=>{let n=document.getElementById(e);n&&n.remove()}},[]),
|
|
21
|
+
`,document.head.appendChild(o),()=>{let n=document.getElementById(e);n&&n.remove()}},[]),De("div",{ref:le,className:`overlay-scrollbar-wrapper ${E}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...A},children:[q("div",{ref:r,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:Ye,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:Y?"none":"auto",...N},children:q("div",{ref:$,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...C},children:H})}),V&&ae&&De("div",{ref:Q,className:"overlay-scrollbar-track",onMouseEnter:()=>{h(),X.current=setTimeout(()=>{b(!0),X.current=null},100)},onMouseLeave:()=>{We(),P||f(i.delay)},style:{position:"absolute",top:0,right:0,width:`${K}px`,height:"100%",opacity:ie?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[c.visible&&q("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Ue(e)},style:{position:"absolute",top:k?`${v.width+c.margin*2}px`:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(K-v.width)/2}px`,width:`${v.width}px`,height:k?`calc(100% - ${v.width*2+c.margin*4}px)`:`calc(100% - ${c.margin*2}px)`,backgroundColor:c.color,borderRadius:`${c.radius}px`,cursor:"pointer"}}),q("div",{ref:Oe,className:"overlay-scrollbar-thumb",onMouseDown:qe,onMouseEnter:()=>ye(!0),onMouseLeave:()=>ye(!1),style:{position:"absolute",top:`${(k?m+c.margin*2:c.margin)+$e}px`,right:c.alignment==="right"?"0px":`${(K-m)/2}px`,width:`${m}px`,height:`${Math.max(B,ue)}px`,backgroundColor:ve||P?v.hoverColor:v.color,opacity:ve||P?v.hoverOpacity:v.opacity,borderRadius:`${v.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),V&&ae&&k&&q("div",{className:"overlay-scrollbar-up-arrow",onClick:ze,onMouseEnter:()=>oe("up"),onMouseLeave:()=>oe(null),style:{position:"absolute",top:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(K-m)/2}px`,width:`${m}px`,height:`${m}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(m*.75,8)}px`,color:te==="up"?M.hoverColor:M.color,userSelect:"none",zIndex:1001,opacity:ie?te==="up"?M.hoverOpacity:M.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),V&&ae&&k&&q("div",{className:"overlay-scrollbar-down-arrow",onClick:Be,onMouseEnter:()=>oe("down"),onMouseLeave:()=>oe(null),style:{position:"absolute",bottom:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(K-m)/2}px`,width:`${m}px`,height:`${m}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(m*.75,8)}px`,color:te==="down"?M.hoverColor:M.color,userSelect:"none",zIndex:1001,opacity:ie?te==="down"?M.hoverOpacity:M.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),ke=rt;export{ke as OverlayScrollbar,ke as default};
|
|
22
22
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/OverlayScrollbar.tsx", "../src/utils/dragScrollUtils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * OverlayScrollbar.tsx\n *\n * @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, {\n useRef,\n useEffect,\n useState,\n useCallback,\n useMemo,\n ReactNode,\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n} from \"react\";\nimport { isTextInputElement } from \"./utils/dragScrollUtils\";\n\n// thumb \uAD00\uB828 \uC124\uC815\nexport interface ThumbConfig {\n width?: number; // \uC378\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC00: 8px)\n minHeight?: number; // \uC378\uC758 \uCD5C\uC18C \uB192\uC774 (\uAE30\uBCF8\uAC00: 50px)\n radius?: number; // \uC378\uC758 border-radius (\uAE30\uBCF8\uAC00: width / 2)\n color?: string; // \uC378 \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#606060\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// track \uAD00\uB828 \uC124\uC815\nexport interface TrackConfig {\n width?: number; // \uD638\uBC84 \uC601\uC5ED\uC778 \uD2B8\uB799\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC12: 16px)\n color?: string; // \uD2B8\uB799 \uBC30\uACBD \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: \"rgba(128, 128, 128, 0.1)\")\n visible?: boolean; // \uD2B8\uB799 \uBC30\uACBD \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n alignment?: \"center\" | \"right\"; // \uD2B8\uB799 \uB0B4\uBD80 \uC815\uB82C (\uAE30\uBCF8\uAC00: \"center\")\n radius?: number; // \uD2B8\uB799 \uBC30\uACBD\uC758 border-radius (\uAE30\uBCF8\uAC12: thumb.radius \uB610\uB294 4px)\n margin?: number; // \uD2B8\uB799 \uC0C1\uD558 \uB9C8\uC9C4 (\uAE30\uBCF8\uAC12: 4px)\n}\n\n// arrows \uAD00\uB828 \uC124\uC815\nexport interface ArrowsConfig {\n visible?: boolean; // \uD654\uC0B4\uD45C \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC00: false)\n step?: number; // \uD654\uC0B4\uD45C \uD074\uB9AD\uC2DC \uC2A4\uD06C\uB864 \uC774\uB3D9 \uAC70\uB9AC (\uAE30\uBCF8\uAC00: 50px)\n color?: string; // \uD654\uC0B4\uD45C \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#808080\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\nexport interface DragScrollConfig {\n enabled?: boolean; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n excludeClasses?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778, \uCD5C\uB300 5\uB2E8\uACC4)\n excludeSelectors?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 CSS \uC140\uB809\uD130\uB4E4 (element.matches() \uC0AC\uC6A9)\n}\n\n// \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\nexport interface AutoHideConfig {\n enabled?: boolean; // \uC790\uB3D9 \uC228\uAE40 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n delay?: number; // \uAE30\uBCF8 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC12: 1500ms)\n delayOnWheel?: number; // \uD720 \uC2A4\uD06C\uB864 \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC00: 700ms)\n}\n\nexport interface OverlayScrollbarProps {\n className?: string;\n style?: React.CSSProperties; // wrapper div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n containerStyle?: React.CSSProperties; // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n contentStyle?: React.CSSProperties; // \uB0B4\uBD80 content div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n children: ReactNode;\n onScroll?: (event: Event) => void;\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb?: ThumbConfig; // \uC378 \uAD00\uB828 \uC124\uC815\n track?: TrackConfig; // \uD2B8\uB799 \uAD00\uB828 \uC124\uC815\n arrows?: ArrowsConfig; // \uD654\uC0B4\uD45C\uB4E4 \uAD00\uB828 \uC124\uC815\n dragScroll?: DragScrollConfig; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\n autoHide?: AutoHideConfig; // \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar?: boolean; // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n detectInnerScroll?: boolean; // children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uAC10\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: false, \uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1\uC5D0 \uC0AC\uC6A9)\n}\n\n// OverlayScrollbar\uAC00 \uB178\uCD9C\uD560 \uBA54\uC11C\uB4DC\uB4E4\nexport interface OverlayScrollbarRef {\n getScrollContainer: () => HTMLDivElement | null;\n scrollTo: (options: ScrollToOptions) => void;\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// \uAE30\uBCF8 \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC744 \uCEF4\uD3EC\uB10C\uD2B8 \uC678\uBD80\uC5D0 \uC0C1\uC218\uB85C \uC120\uC5B8 (\uC7AC\uB80C\uB354\uB9C1 \uC2DC \uB3D9\uC77C\uD55C \uCC38\uC870 \uC720\uC9C0)\nconst DEFAULT_THUMB_CONFIG: ThumbConfig = {};\nconst DEFAULT_TRACK_CONFIG: TrackConfig = {};\nconst DEFAULT_ARROWS_CONFIG: ArrowsConfig = {};\nconst DEFAULT_DRAG_SCROLL_CONFIG: DragScrollConfig = {};\nconst DEFAULT_AUTO_HIDE_CONFIG: AutoHideConfig = {};\n\nconst OverlayScrollbar = forwardRef<OverlayScrollbarRef, OverlayScrollbarProps>(\n (\n {\n className = \"\",\n style = {},\n containerStyle = {},\n contentStyle = {},\n children,\n onScroll,\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb = DEFAULT_THUMB_CONFIG,\n track = DEFAULT_TRACK_CONFIG,\n arrows = DEFAULT_ARROWS_CONFIG,\n dragScroll = DEFAULT_DRAG_SCROLL_CONFIG,\n autoHide = DEFAULT_AUTO_HIDE_CONFIG,\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar = true,\n detectInnerScroll = false,\n },\n ref\n ) => {\n // props \uBCC0\uACBD \uCD94\uC801\uC6A9 ref\n const prevPropsRef = useRef<{\n children?: ReactNode;\n onScroll?: (event: Event) => void;\n showScrollbar?: boolean;\n thumb?: ThumbConfig;\n track?: TrackConfig;\n arrows?: ArrowsConfig;\n dragScroll?: DragScrollConfig;\n autoHide?: AutoHideConfig;\n }>({});\n\n // \uB80C\uB354\uB9C1 \uC2DC \uC5B4\uB5A4 prop\uC774 \uBCC0\uACBD\uB418\uC5C8\uB294\uC9C0 \uCCB4\uD06C\n useEffect(() => {\n // \uD604\uC7AC props \uC800\uC7A5\n prevPropsRef.current = {\n children,\n onScroll,\n showScrollbar,\n thumb,\n track,\n arrows,\n dragScroll,\n autoHide,\n };\n });\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLDivElement>(null);\n\n // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uCE90\uC2F1\uC6A9 ref (\uC131\uB2A5 \uCD5C\uC801\uD654)\n const cachedScrollContainerRef = useRef<HTMLElement | null>(null);\n\n // \uAE30\uBCF8 \uC0C1\uD0DC\uB4E4\n const [scrollbarVisible, setScrollbarVisible] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isThumbHovered, setIsThumbHovered] = useState(false);\n const [dragStart, setDragStart] = useState({ y: 0, scrollTop: 0 });\n const [thumbHeight, setThumbHeight] = useState(0);\n const [thumbTop, setThumbTop] = useState(0);\n const [hasScrollableContent, setHasScrollableContent] = useState(false);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC0C1\uD0DC\n const [isDragScrolling, setIsDragScrolling] = useState(false);\n const [dragScrollStart, setDragScrollStart] = useState({\n x: 0,\n y: 0,\n scrollTop: 0,\n scrollLeft: 0,\n });\n const [activeArrow, setActiveArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n const [hoveredArrow, setHoveredArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n\n // \uCD08\uAE30 \uB9C8\uC6B4\uD2B8 \uC2DC hover \uBC29\uC9C0\uC6A9\n const [isInitialized, setIsInitialized] = useState(false);\n\n // \uD720 \uC2A4\uD06C\uB864 \uAC10\uC9C0\uC6A9\n const wheelTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const [isWheelScrolling, setIsWheelScrolling] = useState(false);\n\n // \uC228\uAE40 \uD0C0\uC774\uBA38\n const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const hoverEnterTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uD45C\uC2DC \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const wheelShowTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC5D0 \uAE30\uBCF8\uAC12 \uC124\uC815\n const finalThumbConfig = useMemo(() => {\n const baseColor = thumb.color ?? \"#606060\";\n return {\n width: thumb.width ?? 8,\n minHeight: thumb.minHeight ?? 50,\n radius: thumb.radius ?? (thumb.width ?? 8) / 2,\n color: baseColor,\n opacity: thumb.opacity ?? 0.6,\n hoverColor: thumb.hoverColor ?? baseColor,\n hoverOpacity: thumb.hoverOpacity ?? 1.0,\n };\n }, [thumb]);\n\n const finalTrackConfig = useMemo(\n () => ({\n width: track.width ?? 16,\n color: track.color ?? \"rgba(128, 128, 128, 0.1)\",\n visible: track.visible ?? true,\n alignment: track.alignment ?? \"center\",\n radius: track.radius ?? finalThumbConfig.radius ?? 4,\n margin: track.margin ?? 4,\n }),\n [track, finalThumbConfig.radius]\n );\n\n const finalArrowsConfig = useMemo(() => {\n const baseColor = arrows.color ?? \"#808080\";\n return {\n visible: arrows.visible ?? false,\n step: arrows.step ?? 50,\n color: baseColor,\n opacity: arrows.opacity ?? 0.6,\n hoverColor: arrows.hoverColor ?? baseColor,\n hoverOpacity: arrows.hoverOpacity ?? 1.0,\n };\n }, [arrows]);\n\n const finalDragScrollConfig = useMemo(\n () => ({\n enabled: dragScroll.enabled ?? true,\n excludeClasses: dragScroll.excludeClasses ?? [],\n excludeSelectors: dragScroll.excludeSelectors ?? [],\n }),\n [dragScroll]\n );\n\n const finalAutoHideConfig = useMemo(\n () => ({\n enabled: autoHide.enabled ?? true,\n delay: autoHide.delay ?? 1500,\n delayOnWheel: autoHide.delayOnWheel ?? 700,\n }),\n [autoHide]\n );\n\n // \uD638\uD658\uC131\uC744 \uC704\uD55C \uBCC0\uC218\uB4E4 (\uC790\uC8FC \uC0AC\uC6A9\uB418\uB294 \uBCC0\uC218\uB4E4\uB9CC \uC720\uC9C0)\n const finalThumbWidth = finalThumbConfig.width;\n const finalTrackWidth = finalTrackConfig.width;\n const thumbMinHeight = finalThumbConfig.minHeight;\n const showArrows = finalArrowsConfig.visible;\n const arrowStep = finalArrowsConfig.step;\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 \uD568\uC218 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n const maintainFocus = useCallback(() => {\n if (!containerRef.current) return;\n\n // \uD604\uC7AC \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C \uD655\uC778\n const activeElement = document.activeElement;\n\n // \uC624\uBC84\uB808\uC774 \uC2A4\uD06C\uB864\uBC14 \uB0B4\uBD80\uC5D0 \uC774\uBBF8 \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC788\uC73C\uBA74 \uC2A4\uD0B5\n if (\n activeElement &&\n containerRef.current.contains(activeElement) &&\n activeElement !== containerRef.current\n ) {\n return;\n }\n\n // \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC5C6\uAC70\uB098 \uC678\uBD80\uC5D0 \uC788\uC73C\uBA74 \uCEE8\uD14C\uC774\uB108\uC5D0 \uD3EC\uCEE4\uC2A4\n containerRef.current.focus();\n }, []);\n\n // ref\uB97C \uD1B5\uD574 \uC678\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uB3C4\uB85D \uD568\n useImperativeHandle(\n ref,\n () => ({\n getScrollContainer: () => containerRef.current,\n scrollTo: (options: ScrollToOptions) => {\n if (containerRef.current) {\n containerRef.current.scrollTo(options);\n }\n },\n get scrollTop() {\n return containerRef.current?.scrollTop || 0;\n },\n get scrollHeight() {\n return containerRef.current?.scrollHeight || 0;\n },\n get clientHeight() {\n return containerRef.current?.clientHeight || 0;\n },\n }),\n []\n );\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30 (\uCE90\uC2F1 \uCD5C\uC801\uD654)\n const findScrollableElement = useCallback((): HTMLElement | null => {\n // \uCE90\uC2DC\uB41C \uC694\uC18C\uAC00 \uC5EC\uC804\uD788 \uC720\uD6A8\uD55C\uC9C0 \uD655\uC778\n if (cachedScrollContainerRef.current) {\n const cached = cachedScrollContainerRef.current;\n // DOM\uC5D0 \uC5F0\uACB0\uB418\uC5B4 \uC788\uACE0 \uC5EC\uC804\uD788 \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C\uC9C0 \uD655\uC778\n if (\n document.contains(cached) &&\n cached.scrollHeight > cached.clientHeight + 2\n ) {\n return cached;\n }\n // \uCE90\uC2DC \uBB34\uD6A8\uD654\n cachedScrollContainerRef.current = null;\n }\n\n if (!containerRef.current) {\n return null;\n }\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC758 \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uD655\uC778\n if (\n contentRef.current &&\n contentRef.current.scrollHeight >\n containerRef.current.clientHeight + 2\n ) {\n cachedScrollContainerRef.current = containerRef.current;\n return containerRef.current;\n }\n\n // detectInnerScroll \uC635\uC158\uC774 \uD65C\uC131\uD654\uB41C \uACBD\uC6B0\uC5D0\uB9CC children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uCC3E\uAE30\n // (\uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1 \uB0B4\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864\uC744 \uCC98\uB9AC\uD558\uB294 \uACBD\uC6B0\uC5D0 \uC0AC\uC6A9)\n if (!detectInnerScroll) {\n return null;\n }\n\n // children \uC694\uC18C\uC5D0\uC11C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 \uC601\uC5ED\uC740 \uC81C\uC678 (\uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC2A4\uD0B5)\n const childScrollableElements =\n containerRef.current.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n\n for (const child of childScrollableElements) {\n const element = child as HTMLElement;\n\n // \uC774 \uC694\uC18C\uAC00 \uB2E4\uB978 OverlayScrollbar\uC758 container\uC778\uC9C0 \uD655\uC778\n // (\uC790\uC2E0\uC758 containerRef\uB294 \uC544\uB2C8\uC5B4\uC57C \uD558\uACE0, overlay-scrollbar-container \uD074\uB798\uC2A4\uB97C \uAC00\uC9C4 \uACBD\uC6B0)\n if (\n element !== containerRef.current &&\n element.classList.contains(\"overlay-scrollbar-container\")\n ) {\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 container\uC774\uBBC0\uB85C \uC2A4\uD0B5\n continue;\n }\n\n // \uC774 \uC694\uC18C\uC758 \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uB294\uC9C0 \uD655\uC778\n let parent: HTMLElement | null = element.parentElement;\n let isNestedInAnotherScrollbar = false;\n\n while (parent && parent !== containerRef.current) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== containerRef.current\n ) {\n // \uB2E4\uB978 OverlayScrollbar \uB0B4\uBD80\uC758 \uC694\uC18C\uC774\uBBC0\uB85C \uC2A4\uD0B5\n isNestedInAnotherScrollbar = true;\n break;\n }\n parent = parent.parentElement;\n }\n\n if (isNestedInAnotherScrollbar) {\n continue;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C\uC778\uC9C0 \uD655\uC778\n if (element.scrollHeight > element.clientHeight + 2) {\n cachedScrollContainerRef.current = element;\n return element;\n }\n }\n\n return null;\n }, []);\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uCCB4\uD06C\n const isScrollable = useCallback(() => {\n return findScrollableElement() !== null;\n }, [findScrollableElement]);\n\n // \uD0C0\uC774\uBA38 \uC815\uB9AC\n const clearHideTimer = useCallback(() => {\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const clearHoverEnterTimer = useCallback(() => {\n if (hoverEnterTimeoutRef.current) {\n clearTimeout(hoverEnterTimeoutRef.current);\n hoverEnterTimeoutRef.current = null;\n }\n }, []);\n\n const clearWheelShowTimer = useCallback(() => {\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n wheelShowTimeoutRef.current = null;\n }\n }, []);\n\n // \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 \uD0C0\uC774\uBA38\n const setHideTimer = useCallback(\n (delay: number) => {\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uD0C0\uC774\uBA38\uB97C \uC124\uC815\uD558\uC9C0 \uC54A\uC74C\n if (!finalAutoHideConfig.enabled) {\n return;\n }\n clearHideTimer();\n hideTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(false);\n hideTimeoutRef.current = null;\n }, delay);\n },\n [clearHideTimer, finalAutoHideConfig.enabled]\n );\n\n // \uC2A4\uD06C\uB864\uBC14 \uC704\uCE58 \uBC0F \uD06C\uAE30 \uC5C5\uB370\uC774\uD2B8\n const updateScrollbar = useCallback(() => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) {\n // \uC2A4\uD06C\uB864 \uBD88\uAC00\uB2A5\uD558\uBA74 \uC228\uAE40\n setScrollbarVisible(false);\n setHasScrollableContent(false);\n clearHideTimer();\n return;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20\uAC00 \uC788\uC74C\uC744 \uD45C\uC2DC\n setHasScrollableContent(true);\n\n if (!scrollbarRef.current) return;\n\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled) {\n setScrollbarVisible(true);\n clearHideTimer();\n }\n\n const containerHeight = scrollableElement.clientHeight;\n const contentHeight = scrollableElement.scrollHeight;\n const scrollTop = scrollableElement.scrollTop;\n\n // wrapper\uC758 \uD328\uB529 \uACC4\uC0B0 (\uC0C1\uD558 \uD328\uB529\uB9CC \uD544\uC694)\n let wrapperPaddingTopBottom = 0;\n if (wrapperRef.current) {\n const computedStyle = window.getComputedStyle(\n wrapperRef.current\n );\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom =\n parseFloat(computedStyle.paddingBottom) || 0;\n wrapperPaddingTopBottom = paddingTop + paddingBottom;\n }\n\n // \uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uACC4\uC0B0 (\uD654\uC0B4\uD45C + \uC704\uC544\uB798 \uB9C8\uC9C4, \uD654\uC0B4\uD45C \uC5C6\uC5B4\uB3C4 \uC704\uC544\uB798 \uB9C8\uC9C4)\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n\n // \uC378 \uB192\uC774 \uACC4\uC0B0 (\uC0AC\uC6A9\uC790 \uC124\uC815 \uCD5C\uC18C \uB192\uC774 \uC0AC\uC6A9, \uD654\uC0B4\uD45C \uACF5\uAC04 \uC81C\uC678, wrapper \uD328\uB529 \uCD94\uAC00)\n const availableHeight =\n containerHeight - arrowSpace + wrapperPaddingTopBottom;\n const scrollRatio = containerHeight / contentHeight;\n const calculatedThumbHeight = Math.max(\n availableHeight * scrollRatio,\n thumbMinHeight\n );\n\n // \uC378 \uC704\uCE58 \uACC4\uC0B0 (\uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uC81C\uC678)\n const scrollableHeight = contentHeight - containerHeight;\n const thumbScrollableHeight =\n availableHeight - calculatedThumbHeight;\n const calculatedThumbTop =\n scrollableHeight > 0\n ? (scrollTop / scrollableHeight) * thumbScrollableHeight\n : 0;\n\n setThumbHeight(calculatedThumbHeight);\n setThumbTop(calculatedThumbTop);\n }, [\n findScrollableElement,\n clearHideTimer,\n showArrows,\n finalThumbWidth,\n thumbMinHeight,\n finalAutoHideConfig.enabled,\n ]);\n\n // \uC378 \uB4DC\uB798\uADF8 \uC2DC\uC791\n const handleThumbMouseDown = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n setIsDragging(true);\n setDragStart({\n y: event.clientY,\n scrollTop: actualScrollContainer.scrollTop,\n });\n\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [findScrollableElement, clearHideTimer, maintainFocus]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC911\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragging) return;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n const scrollableHeight = contentHeight - containerHeight;\n\n const deltaY = event.clientY - dragStart.y;\n const thumbScrollableHeight = containerHeight - thumbHeight;\n const scrollDelta =\n (deltaY / thumbScrollableHeight) * scrollableHeight;\n\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableHeight,\n dragStart.scrollTop + scrollDelta\n )\n );\n\n actualScrollContainer.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragging,\n dragStart,\n thumbHeight,\n updateScrollbar,\n findScrollableElement,\n ]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC885\uB8CC\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay); // \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uD2B8\uB799 \uD074\uB9AD\uC73C\uB85C \uC2A4\uD06C\uB864 \uC810\uD504\n const handleTrackClick = useCallback(\n (event: React.MouseEvent) => {\n if (!scrollbarRef.current) {\n return;\n }\n\n const scrollbar = scrollbarRef.current;\n const rect = scrollbar.getBoundingClientRect();\n const clickY = event.clientY - rect.top;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n\n const scrollRatio = clickY / containerHeight;\n const newScrollTop =\n scrollRatio * (contentHeight - containerHeight);\n\n actualScrollContainer.scrollTop = Math.max(\n 0,\n Math.min(contentHeight - containerHeight, newScrollTop)\n );\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n finalAutoHideConfig.delay,\n findScrollableElement,\n maintainFocus,\n ]\n );\n\n // \uC704\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleUpArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current) return;\n\n const newScrollTop = Math.max(\n 0,\n containerRef.current.scrollTop - arrowStep\n );\n\n containerRef.current.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleDownArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current || !contentRef.current) return;\n\n const container = containerRef.current;\n const content = contentRef.current;\n const maxScrollTop =\n content.scrollHeight - container.clientHeight;\n const newScrollTop = Math.min(\n maxScrollTop,\n container.scrollTop + arrowStep\n );\n\n container.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC2DC\uC791\n const handleDragScrollStart = useCallback(\n (event: React.MouseEvent) => {\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uBE44\uD65C\uC131\uD654\uB41C \uACBD\uC6B0\n if (!finalDragScrollConfig.enabled) return;\n\n // \uD14D\uC2A4\uD2B8 \uC785\uB825 \uC694\uC18C\uB098 \uC81C\uC678 \uB300\uC0C1\uC774\uBA74 \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD558\uC9C0 \uC54A\uC74C\n const target = event.target as Element;\n if (isTextInputElement(target, finalDragScrollConfig)) {\n return;\n }\n\n // \uC624\uB978\uCABD \uD074\uB9AD\uC774\uB098 \uD720 \uD074\uB9AD\uC740 \uC81C\uC678\n if (event.button !== 0) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC601\uC5ED\uC774 \uC544\uB2C8\uBA74 \uC81C\uC678\n if (\n scrollableElement.scrollHeight <=\n scrollableElement.clientHeight\n )\n return;\n\n event.preventDefault();\n setIsDragScrolling(true);\n setDragScrollStart({\n x: event.clientX,\n y: event.clientY,\n scrollTop: scrollableElement.scrollTop,\n scrollLeft: scrollableElement.scrollLeft || 0,\n });\n\n // \uC2A4\uD06C\uB864\uBC14\uB294 \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD560 \uB54C \uD45C\uC2DC (handleDragScrollMove\uC5D0\uC11C \uCC98\uB9AC)\n clearHideTimer();\n },\n [\n finalDragScrollConfig,\n isTextInputElement,\n findScrollableElement,\n clearHideTimer,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC911\n const handleDragScrollMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragScrolling) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const deltaX = dragScrollStart.x - event.clientX;\n const deltaY = dragScrollStart.y - event.clientY;\n\n // \uBBF8\uC138\uD55C \uC6C0\uC9C1\uC784 \uBB34\uC2DC (3px \uC774\uD558)\n if (Math.abs(deltaY) < 3 && Math.abs(deltaX) < 3) {\n return;\n }\n\n // \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD588\uC73C\uBBC0\uB85C \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n setScrollbarVisible(true);\n\n // \uC138\uB85C \uC2A4\uD06C\uB864\uB9CC \uCC98\uB9AC (\uAC00\uB85C \uC2A4\uD06C\uB864\uC740 \uD544\uC694\uC2DC \uB098\uC911\uC5D0 \uCD94\uAC00)\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableElement.scrollHeight -\n scrollableElement.clientHeight,\n dragScrollStart.scrollTop + deltaY\n )\n );\n\n scrollableElement.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragScrolling,\n dragScrollStart,\n findScrollableElement,\n updateScrollbar,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC885\uB8CC\n const handleDragScrollEnd = useCallback(() => {\n setIsDragScrolling(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uC2A4\uD06C\uB864 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 (externalScrollContainer \uC6B0\uC120 \uC0AC\uC6A9)\n useEffect(() => {\n const handleScroll = (event: Event) => {\n updateScrollbar();\n\n // \uC2A4\uD06C\uB864 \uC911\uC5D0\uB294 \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD720 \uC2A4\uD06C\uB864 \uC911\uC774\uBA74 \uBE60\uB978 \uC228\uAE40, \uC544\uB2C8\uBA74 \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n const delay = isWheelScrolling\n ? finalAutoHideConfig.delayOnWheel\n : finalAutoHideConfig.delay;\n setHideTimer(delay);\n\n if (onScroll) {\n onScroll(event);\n }\n };\n\n const handleWheel = () => {\n // \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD45C\uC2DC\n setIsWheelScrolling(true);\n\n // \uAE30\uC874 \uD720 \uD0C0\uC774\uBA38 \uC81C\uAC70\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n\n // 300ms \uD6C4 \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD574\uC81C (\uD720 \uC2A4\uD06C\uB864\uC774 \uB05D\uB0AC\uB2E4\uACE0 \uAC04\uC8FC)\n wheelTimeoutRef.current = setTimeout(() => {\n setIsWheelScrolling(false);\n }, 300);\n\n clearHideTimer();\n\n // \uD720 \uC774\uBCA4\uD2B8 \uC2DC 50ms \uB514\uBC14\uC6B4\uC2A4 \uC801\uC6A9 (\uBBF8\uC138\uD55C \uD720 \uC6C0\uC9C1\uC784 \uBB34\uC2DC)\n clearWheelShowTimer();\n wheelShowTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n wheelShowTimeoutRef.current = null;\n }, 50);\n };\n\n const elementsToWatch: HTMLElement[] = [];\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n const scrollableElement = findScrollableElement();\n if (scrollableElement) {\n elementsToWatch.push(scrollableElement);\n }\n\n // fallback: \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC640 children \uC694\uC18C\uB3C4 \uAC10\uC9C0\n const container = containerRef.current;\n if (container && !scrollableElement) {\n elementsToWatch.push(container);\n\n // children \uC694\uC18C\uB4E4\uC758 \uC2A4\uD06C\uB864\uB3C4 \uAC10\uC9C0 (\uC911\uCCA9\uB41C OverlayScrollbar \uC81C\uC678)\n const childScrollableElements = container.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n childScrollableElements.forEach((child) => {\n const element = child as HTMLElement;\n\n // \uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC81C\uC678\n if (\n element !== container &&\n element.classList.contains(\n \"overlay-scrollbar-container\"\n )\n ) {\n return;\n }\n\n // \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uC73C\uBA74 \uC81C\uC678\n let parent: HTMLElement | null = element.parentElement;\n while (parent && parent !== container) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== container\n ) {\n return; // \uC911\uCCA9\uB41C OverlayScrollbar \uB0B4\uBD80\uC774\uBBC0\uB85C \uC81C\uC678\n }\n parent = parent.parentElement;\n }\n\n elementsToWatch.push(element);\n });\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uC5D0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uB4F1\uB85D\n elementsToWatch.forEach((element) => {\n element.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n });\n element.addEventListener(\"wheel\", handleWheel, {\n passive: true,\n });\n });\n\n return () => {\n // \uBAA8\uB4E0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uC81C\uAC70\n elementsToWatch.forEach((element) => {\n element.removeEventListener(\"scroll\", handleScroll);\n element.removeEventListener(\"wheel\", handleWheel);\n });\n\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n }\n };\n }, [\n findScrollableElement,\n updateScrollbar,\n onScroll,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig,\n isWheelScrolling,\n ]);\n\n // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uD578\uB4E4\uB7EC (\uBC29\uD5A5\uD0A4, PageUp/PageDown/Home/End)\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const { key } = event;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollableElement;\n const maxScrollTop = scrollHeight - clientHeight;\n\n // \uD55C \uC904 \uC2A4\uD06C\uB864 \uB2E8\uC704 (rowHeight \uB610\uB294 \uAE30\uBCF8\uAC12)\n const lineScrollStep = 50;\n\n let newScrollTop: number | null = null;\n\n switch (key) {\n case \"ArrowUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - lineScrollStep);\n break;\n case \"ArrowDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + lineScrollStep\n );\n break;\n case \"PageUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - clientHeight);\n break;\n case \"PageDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + clientHeight\n );\n break;\n case \"Home\":\n event.preventDefault();\n newScrollTop = 0;\n break;\n case \"End\":\n event.preventDefault();\n newScrollTop = maxScrollTop;\n break;\n default:\n return;\n }\n\n if (newScrollTop !== null) {\n // \uC378 \uC704\uCE58\uB97C \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\n const scrollRatio = newScrollTop / maxScrollTop;\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n const availableHeight = clientHeight - arrowSpace;\n const scrollableThumbHeight = availableHeight - thumbHeight;\n const newThumbTop = scrollableThumbHeight * scrollRatio;\n\n setThumbTop(newThumbTop);\n\n // \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uC989\uC2DC \uBCC0\uACBD (\uC560\uB2C8\uBA54\uC774\uC158 \uC5C6\uC74C)\n scrollableElement.scrollTop = newScrollTop;\n\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n }\n };\n\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n container.removeEventListener(\"keydown\", handleKeyDown);\n };\n }\n }, [\n findScrollableElement,\n showArrows,\n finalThumbWidth,\n finalTrackConfig.margin,\n thumbHeight,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig.delay,\n ]);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragScrolling) {\n document.addEventListener(\"mousemove\", handleDragScrollMove);\n document.addEventListener(\"mouseup\", handleDragScrollEnd);\n return () => {\n document.removeEventListener(\n \"mousemove\",\n handleDragScrollMove\n );\n document.removeEventListener(\n \"mouseup\",\n handleDragScrollEnd\n );\n };\n }\n }, [isDragScrolling, handleDragScrollMove, handleDragScrollEnd]);\n\n // \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n }, [isDragging, handleMouseMove, handleMouseUp]);\n\n // \uCD08\uAE30 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8\n useEffect(() => {\n // \uC989\uC2DC \uC5C5\uB370\uC774\uD2B8\n updateScrollbar();\n // \uC57D\uAC04\uC758 \uC9C0\uC5F0 \uD6C4\uC5D0\uB3C4 \uC5C5\uB370\uC774\uD2B8 (DOM\uC774 \uC644\uC804\uD788 \uB80C\uB354\uB9C1\uB41C \uD6C4)\n const timer = setTimeout(() => {\n updateScrollbar();\n }, 100);\n return () => clearTimeout(timer);\n }, [updateScrollbar]);\n\n // \uCEF4\uD3EC\uB10C\uD2B8 \uCD08\uAE30\uD654 \uC644\uB8CC \uD45C\uC2DC (hover \uC774\uBCA4\uD2B8 \uD65C\uC131\uD654\uC6A9)\n useLayoutEffect(() => {\n setIsInitialized(true);\n // \uCD08\uAE30\uD654 \uC9C1\uD6C4 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8 (\uC378 \uB192\uC774 \uC815\uD655\uD558\uAC8C \uACC4\uC0B0)\n updateScrollbar();\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled && isScrollable()) {\n setScrollbarVisible(true);\n }\n }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);\n\n // Resize observer\uB85C \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n updateScrollbar();\n });\n\n const elementsToObserve: HTMLElement[] = [];\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uB4E4 \uAD00\uCC30\n if (containerRef.current) {\n elementsToObserve.push(containerRef.current);\n }\n if (contentRef.current) {\n elementsToObserve.push(contentRef.current);\n }\n\n // \uCE90\uC2DC\uB41C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uB3C4 \uAD00\uCC30\n if (\n cachedScrollContainerRef.current &&\n document.contains(cachedScrollContainerRef.current)\n ) {\n elementsToObserve.push(cachedScrollContainerRef.current);\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uB4E4 \uAD00\uCC30 \uC2DC\uC791\n elementsToObserve.forEach((element) => {\n resizeObserver.observe(element);\n });\n\n return () => resizeObserver.disconnect();\n }, [updateScrollbar]);\n\n // MutationObserver\uB85C DOM \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n // \uCE90\uC2DC \uCD08\uAE30\uD654\uD558\uC5EC \uC0C8\uB85C\uC6B4 \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uAC10\uC9C0\n cachedScrollContainerRef.current = null;\n updateScrollbar();\n });\n\n observer.observe(containerRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"style\"],\n });\n\n return () => observer.disconnect();\n }, [updateScrollbar]);\n\n // trackWidth\uAC00 thumbWidth\uBCF4\uB2E4 \uC791\uC73C\uBA74 thumbWidth\uC640 \uAC19\uAC8C \uC124\uC815\n const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);\n\n // \uC6F9\uD0B7 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30\uC6A9 CSS \uB3D9\uC801 \uC8FC\uC785\n useEffect(() => {\n const styleId = \"overlay-scrollbar-webkit-hide\";\n\n // \uC774\uBBF8 \uC2A4\uD0C0\uC77C\uC774 \uC788\uC73C\uBA74 \uC81C\uAC70\n const existingStyle = document.getElementById(styleId);\n if (existingStyle) {\n existingStyle.remove();\n }\n\n const style = document.createElement(\"style\");\n style.id = styleId;\n style.textContent = `\n .overlay-scrollbar-container::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-track {\n display: none !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-thumb {\n display: none !important;\n }\n .overlay-scrollbar-container:focus {\n outline: 2px solid rgba(0, 123, 255, 0.3);\n outline-offset: -2px;\n }\n .overlay-scrollbar-container:focus-visible {\n outline: 2px solid rgba(0, 123, 255, 0.5);\n outline-offset: -2px;\n }\n `;\n document.head.appendChild(style);\n\n return () => {\n const styleToRemove = document.getElementById(styleId);\n if (styleToRemove) {\n styleToRemove.remove();\n }\n };\n }, []);\n\n return (\n <div\n ref={wrapperRef}\n className={`overlay-scrollbar-wrapper ${className}`}\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n minHeight: 0, // shrink \uAC00\uB2A5\uD558\uB3C4\uB85D\n height: \"100%\", // \uBD80\uBAA8\uC758 \uC804\uCCB4 \uB192\uC774 \uC0AC\uC6A9\n flex: \"1 1 0%\", // \uAE30\uBCF8\uC801\uC73C\uB85C flex item\uC73C\uB85C \uB3D9\uC791\n ...style, // \uC0AC\uC6A9\uC790\uAC00 flex\uB97C override \uD560 \uC218 \uC788\uB3C4\uB85D style\uC744 \uB4A4\uC5D0 \uBC30\uCE58\n }}\n >\n {/* \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 */}\n <div\n ref={containerRef}\n className=\"overlay-scrollbar-container\"\n tabIndex={-1} // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD558\uAC8C \uD568\n onMouseDown={handleDragScrollStart}\n style={{\n display: \"flex\",\n width: \"100%\", // \uBA85\uC2DC\uC801 \uB108\uBE44 \uC124\uC815\n flex: \"1 1 auto\", // flex item\uC73C\uB85C \uC124\uC815\uD558\uC5EC \uB192\uC774\uB97C \uC790\uB3D9\uC73C\uB85C \uACC4\uC0B0\n minHeight: 0, // \uCD5C\uC18C \uB192\uC774 \uBCF4\uC7A5\n overflow: \"auto\", // \uB124\uC774\uD2F0\uBE0C \uC2A4\uD06C\uB864 \uAE30\uB2A5 \uC720\uC9C0\n // \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8 \uC2A4\uD06C\uB864\uBC14\uB9CC \uC228\uAE30\uAE30\n scrollbarWidth: \"none\", // Firefox\n msOverflowStyle: \"none\", // IE/Edge\n // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uC2A4\uD0C0\uC77C (\uC811\uADFC\uC131)\n outline: \"none\", // \uAE30\uBCF8 \uC544\uC6C3\uB77C\uC778 \uC81C\uAC70\n userSelect: isDragScrolling ? \"none\" : \"auto\", // \uB4DC\uB798\uADF8 \uC911 \uD14D\uC2A4\uD2B8 \uC120\uD0DD \uBC29\uC9C0\n ...containerStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n <div\n ref={contentRef}\n className=\"overlay-scrollbar-content\"\n style={{\n flex: \"1 1 0%\", // grow\uD558\uC5EC \uACF5\uAC04 \uCC44\uC6B0\uAE30\n minHeight: 0, // flex shrink \uD5C8\uC6A9\n display: \"flex\", // flex \uCEE8\uD14C\uC774\uB108\uB85C \uC124\uC815\n flexDirection: \"column\", // \uC138\uB85C \uBC29\uD5A5 \uC815\uB82C\n ...contentStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n {children}\n </div>\n </div>\n\n {/* \uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14 */}\n {showScrollbar && hasScrollableContent && (\n <div\n ref={scrollbarRef}\n className=\"overlay-scrollbar-track\"\n onMouseEnter={() => {\n // \uC228\uAE40 \uD0C0\uC774\uBA38\uB294 \uC989\uC2DC \uCDE8\uC18C\n clearHideTimer();\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uC124\uC815 (100ms \uD6C4 \uD45C\uC2DC)\n hoverEnterTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n hoverEnterTimeoutRef.current = null;\n }, 100);\n }}\n onMouseLeave={() => {\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC9C0\uB098\uAC00\uAE30\uB9CC \uD55C \uACBD\uC6B0)\n clearHoverEnterTimer();\n\n if (!isDragging) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }}\n style={{\n position: \"absolute\",\n top: 0,\n right: 0,\n width: `${adjustedTrackWidth}px`,\n height: \"100%\",\n opacity: scrollbarVisible ? 1 : 0,\n transition: \"opacity 0.2s ease-in-out\",\n cursor: \"pointer\",\n zIndex: 1000,\n pointerEvents: \"auto\",\n }}\n >\n {/* \uC2A4\uD06C\uB864\uBC14 \uD2B8\uB799 \uBC30\uACBD */}\n {finalTrackConfig.visible && (\n <div\n className=\"overlay-scrollbar-track-background\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleTrackClick(e);\n }}\n style={{\n position: \"absolute\",\n top: showArrows\n ? `${\n finalThumbConfig.width +\n finalTrackConfig.margin * 2\n }px`\n : `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbConfig.width) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbConfig.width}px`,\n height: showArrows\n ? `calc(100% - ${\n finalThumbConfig.width * 2 +\n finalTrackConfig.margin * 4\n }px)`\n : `calc(100% - ${\n finalTrackConfig.margin * 2\n }px)`,\n backgroundColor: finalTrackConfig.color,\n borderRadius: `${finalTrackConfig.radius}px`,\n cursor: \"pointer\",\n }}\n />\n )}\n\n {/* \uC2A4\uD06C\uB864\uBC14 \uC378 */}\n <div\n ref={thumbRef}\n className=\"overlay-scrollbar-thumb\"\n onMouseDown={handleThumbMouseDown}\n onMouseEnter={() => setIsThumbHovered(true)}\n onMouseLeave={() => setIsThumbHovered(false)}\n style={{\n position: \"absolute\",\n top: `${\n (showArrows\n ? finalThumbWidth +\n finalTrackConfig.margin * 2\n : finalTrackConfig.margin) + thumbTop\n }px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${Math.max(\n thumbHeight,\n thumbMinHeight\n )}px`,\n backgroundColor:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverColor\n : finalThumbConfig.color,\n opacity:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverOpacity\n : finalThumbConfig.opacity,\n borderRadius: `${finalThumbConfig.radius}px`,\n cursor: \"pointer\",\n transition:\n \"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out\",\n }}\n />\n </div>\n )}\n\n {/* \uC704\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-up-arrow\"\n onClick={handleUpArrowClick}\n onMouseEnter={() => setHoveredArrow(\"up\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n top: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25B2\n </div>\n )}\n\n {/* \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-down-arrow\"\n onClick={handleDownArrowClick}\n onMouseEnter={() => setHoveredArrow(\"down\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n bottom: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25BC\n </div>\n )}\n </div>\n );\n }\n);\n\nexport default OverlayScrollbar;\nexport { OverlayScrollbar };\n", "/**\n * MIT License\n *\n * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { DragScrollConfig } from \"../types\";\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uC5D0\uC11C \uD655\uC778)\nconst DEFAULT_EXCLUDE_CLASSES = [\n // \uAE30\uBCF8 \uC785\uB825 \uC694\uC18C\uB4E4\n \"editor\",\n \"textarea\",\n \"input\",\n \"select\",\n \"textfield\",\n \"form-control\",\n \"contenteditable\",\n\n // Material-UI \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"MuiInputBase-input\",\n \"MuiSelect-select\",\n \"MuiOutlinedInput-input\",\n \"MuiFilledInput-input\",\n \"MuiInput-input\",\n \"MuiFormControl-root\",\n \"MuiTextField-root\",\n \"MuiSelect-root\",\n \"MuiOutlinedInput-root\",\n \"MuiFilledInput-root\",\n \"MuiInput-root\",\n \"MuiAutocomplete-input\",\n \"MuiDatePicker-input\",\n \"MuiSlider-thumb\",\n \"MuiSlider-rail\",\n \"MuiSlider-track\",\n \"MuiSlider-mark\",\n \"MuiSlider-markLabel\",\n \"MuiSlider-root\",\n \"MuiSlider-colorPrimary\",\n \"MuiSlider-sizeMedium\",\n \"MuiIconButton-root\",\n \"MuiButton-root\",\n \"MuiButtonBase-root\",\n \"MuiTouchRipple-root\",\n \"MuiCheckbox-root\",\n \"MuiRadio-root\",\n \"MuiSwitch-root\",\n \"PrivateSwitchBase-root\",\n\n // Ant Design \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ant-input\",\n \"ant-input-affix-wrapper\",\n \"ant-input-group-addon\",\n \"ant-input-number\",\n \"ant-input-number-handler\",\n \"ant-select\",\n \"ant-select-selector\",\n \"ant-select-selection-search\",\n \"ant-select-dropdown\",\n \"ant-cascader\",\n \"ant-cascader-input\",\n \"ant-picker\",\n \"ant-picker-input\",\n \"ant-time-picker\",\n \"ant-calendar-picker\",\n \"ant-slider\",\n \"ant-slider-track\",\n \"ant-slider-handle\",\n \"ant-switch\",\n \"ant-checkbox\",\n \"ant-checkbox-wrapper\",\n \"ant-radio\",\n \"ant-radio-wrapper\",\n \"ant-rate\",\n \"ant-upload\",\n \"ant-upload-drag\",\n \"ant-form-item\",\n \"ant-form-item-control\",\n \"ant-btn\",\n \"ant-dropdown\",\n \"ant-dropdown-trigger\",\n \"ant-menu\",\n \"ant-menu-item\",\n \"ant-tooltip\",\n \"ant-popover\",\n \"ant-modal\",\n \"ant-drawer\",\n \"ant-tree-select\",\n \"ant-auto-complete\",\n \"ant-mentions\",\n \"ant-transfer\",\n\n // Shadcn/ui \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ui-input\",\n \"ui-textarea\",\n \"ui-select\",\n \"ui-select-trigger\",\n \"ui-select-content\",\n \"ui-select-item\",\n \"ui-button\",\n \"ui-checkbox\",\n \"ui-radio-group\",\n \"ui-switch\",\n \"ui-slider\",\n \"ui-range-slider\",\n \"ui-calendar\",\n \"ui-date-picker\",\n \"ui-combobox\",\n \"ui-command\",\n \"ui-command-input\",\n \"ui-popover\",\n \"ui-dialog\",\n \"ui-sheet\",\n \"ui-dropdown-menu\",\n \"ui-context-menu\",\n \"ui-menubar\",\n \"ui-navigation-menu\",\n \"ui-form\",\n \"ui-form-control\",\n \"ui-form-item\",\n \"ui-form-field\",\n \"ui-label\",\n // Radix UI \uAE30\uBCF8 \uD074\uB798\uC2A4\uB4E4 (Shadcn \uAE30\uBC18)\n \"radix-ui\",\n \"radix-select\",\n \"radix-dropdown\",\n \"radix-dialog\",\n \"radix-popover\",\n \"radix-accordion\",\n \"radix-tabs\",\n \"radix-slider\",\n \"radix-switch\",\n \"radix-checkbox\",\n \"radix-radio\",\n\n // Quill Editor\n \"ql-editor\",\n \"ql-container\",\n \"ql-toolbar\",\n \"ql-picker\",\n \"ql-picker-label\",\n \"ql-picker-options\",\n \"ql-formats\",\n \"ql-snow\",\n \"ql-bubble\",\n \"quill\",\n \"quilleditor\",\n\n // Monaco Editor\n \"monaco-editor\",\n \"monaco-editor-background\",\n \"view-lines\",\n \"decorationsOverviewRuler\",\n \"monaco-scrollable-element\",\n\n // CodeMirror\n \"CodeMirror\",\n \"CodeMirror-code\",\n \"CodeMirror-lines\",\n \"CodeMirror-scroll\",\n \"CodeMirror-sizer\",\n \"cm-editor\",\n \"cm-focused\",\n \"cm-content\",\n\n // TinyMCE\n \"tox-editor-container\",\n \"tox-editor-header\",\n \"tox-edit-area\",\n \"tox-tinymce\",\n \"mce-content-body\",\n\n // CKEditor\n \"ck-editor\",\n \"ck-content\",\n \"ck-toolbar\",\n \"ck-editor__editable\",\n \"ck-widget\",\n\n // Slate.js\n \"slate-editor\",\n \"slate-content\",\n\n // Draft.js\n \"DraftEditor-root\",\n \"DraftEditor-editorContainer\",\n \"public-DraftEditor-content\",\n\n // EhfuseEditor\n \"ehfuse-editor\",\n \"ehfuse-editor-wrapper\",\n \"ehfuse-editor-content\",\n \"ehfuse-toolbar\",\n \"ehfuse-toolbar-group\",\n \"ehfuse-cursor\",\n\n // \uAE30\uD0C0 \uC5D0\uB514\uD130\uB4E4\n \"text-editor\",\n \"rich-text-editor\",\n \"wysiwyg\",\n \"ace_editor\",\n \"ace_content\",\n];\n\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\nexport const isTextInputElement = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n const tagName = element.tagName.toLowerCase();\n const inputTypes = [\n \"text\",\n \"password\",\n \"email\",\n \"number\",\n \"search\",\n \"tel\",\n \"url\",\n \"checkbox\",\n \"radio\",\n ];\n\n // input \uD0DC\uADF8\uC774\uBA74\uC11C \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD0C0\uC785\uC774\uB098 \uCCB4\uD06C\uBC15\uC2A4/\uB77C\uB514\uC624\uC778 \uACBD\uC6B0\n if (tagName === \"input\") {\n const type = (element as HTMLInputElement).type;\n return inputTypes.includes(type);\n }\n\n // textarea, select, \uD3B8\uC9D1 \uAC00\uB2A5\uD55C \uC694\uC18C\uB4E4\n if ([\"textarea\", \"select\", \"button\"].includes(tagName)) {\n return true;\n }\n\n // SVG \uC694\uC18C\uB4E4 (\uC544\uC774\uCF58\uB4E4)\n if (\n [\n \"svg\",\n \"path\",\n \"circle\",\n \"rect\",\n \"line\",\n \"polygon\",\n \"polyline\",\n ].includes(tagName)\n ) {\n return true;\n }\n\n // contenteditable \uC18D\uC131\uC774 \uC788\uB294 \uC694\uC18C\n if (element.getAttribute(\"contenteditable\") === \"true\") {\n return true;\n }\n\n // \uCD94\uAC00 \uC140\uB809\uD130 \uCCB4\uD06C\n if (config?.excludeSelectors) {\n for (const selector of config.excludeSelectors) {\n if (element.matches(selector)) {\n return true;\n }\n }\n }\n\n return checkElementAndParents(element, config);\n};\n\n/**\n * \uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uB4E4\uC744 \uD655\uC778\uD558\uC5EC \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uC694\uC18C\uC778\uC9C0 \uD310\uB2E8\n */\nconst checkElementAndParents = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n // \uBAA8\uB4E0 \uC81C\uC678 \uD074\uB798\uC2A4\uB4E4 \uD569\uCE58\uAE30 (\uAE30\uBCF8 \uD074\uB798\uC2A4 + \uC0AC\uC6A9\uC790 \uCD94\uAC00 \uD074\uB798\uC2A4)\n const allExcludeClasses = [\n ...DEFAULT_EXCLUDE_CLASSES,\n ...(config?.excludeClasses || []),\n ];\n\n let currentElement: Element | null = element;\n let depth = 0;\n const maxDepth = 5; // \uCD5C\uB300 5\uB2E8\uACC4\uAE4C\uC9C0 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778\n\n while (currentElement && depth <= maxDepth) {\n // \uD604\uC7AC \uC694\uC18C\uAC00 \uC81C\uC678 \uD074\uB798\uC2A4\uB97C \uAC00\uC9C0\uACE0 \uC788\uB294\uC9C0 \uD655\uC778\n if (\n allExcludeClasses.some((cls) =>\n currentElement!.classList.contains(cls)\n )\n ) {\n return true;\n }\n\n // \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB8E8\uD2B8\uC5D0 \uB3C4\uB2EC\uD558\uBA74 \uC911\uB2E8\n if (currentElement.classList.contains(\"MuiDialogContent-root\")) {\n break;\n }\n\n currentElement = currentElement.parentElement;\n depth++;\n }\n\n return false;\n};\n\n/**\n * \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB098 \uBAA8\uB2EC\uC774 \uC0C1\uC704\uC5D0 \uC788\uB294\uC9C0 \uD655\uC778\n */\nexport const hasUpperModal = (scrollContainer: Element): boolean => {\n const currentDialog = scrollContainer.closest(\n \".MuiDialog-root\"\n ) as HTMLElement;\n if (!currentDialog) return false;\n\n const allModals = document.querySelectorAll(\n \".MuiDialog-root, .MuiModal-root, .MuiPopover-root\"\n );\n const currentZIndex = parseInt(\n window.getComputedStyle(currentDialog).zIndex || \"0\"\n );\n\n for (const modal of allModals) {\n if (modal !== currentDialog) {\n const modalElement = modal as HTMLElement;\n const modalZIndex = parseInt(\n window.getComputedStyle(modalElement).zIndex || \"0\"\n );\n\n if (\n modalZIndex > currentZIndex &&\n modalElement.style.display !== \"none\"\n ) {\n return true;\n }\n }\n }\n\n return false;\n};\n\n/**\n * \uD074\uB9AD\uD55C \uC694\uC18C\uAC00 \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB0B4\uBD80\uC778\uC9C0 \uD655\uC778\n */\nexport const isClickInOtherDialog = (\n clickedElement: Element,\n currentDialog: Element | null\n): boolean => {\n const parentDialog = clickedElement.closest(\n \".MuiDialog-root, .MuiPopover-root, .MuiModal-root\"\n );\n return parentDialog !== null && parentDialog !== currentDialog;\n};\n"],
|
|
5
|
-
"mappings": "AAwBA,OACI,UAAAA,EACA,aAAAC,EACA,YAAAC,EACA,eAAAC,EACA,WAAAC,EAEA,cAAAC,GACA,uBAAAC,GACA,mBAAAC,OACG,QCPP,IAAMC,GAA0B,CAE5B,SACA,WACA,QACA,SACA,YACA,eACA,kBAGA,qBACA,mBACA,yBACA,uBACA,iBACA,sBACA,oBACA,iBACA,wBACA,sBACA,gBACA,wBACA,sBACA,kBACA,iBACA,kBACA,iBACA,sBACA,iBACA,yBACA,uBACA,qBACA,iBACA,qBACA,sBACA,mBACA,gBACA,iBACA,yBAGA,YACA,0BACA,wBACA,mBACA,2BACA,aACA,sBACA,8BACA,sBACA,eACA,qBACA,aACA,mBACA,kBACA,sBACA,aACA,mBACA,oBACA,aACA,eACA,uBACA,YACA,oBACA,WACA,aACA,kBACA,gBACA,wBACA,UACA,eACA,uBACA,WACA,gBACA,cACA,cACA,YACA,aACA,kBACA,oBACA,eACA,eAGA,WACA,cACA,YACA,oBACA,oBACA,iBACA,YACA,cACA,iBACA,YACA,YACA,kBACA,cACA,iBACA,cACA,aACA,mBACA,aACA,YACA,WACA,mBACA,kBACA,aACA,qBACA,UACA,kBACA,eACA,gBACA,WAEA,WACA,eACA,iBACA,eACA,gBACA,kBACA,aACA,eACA,eACA,iBACA,cAGA,YACA,eACA,aACA,YACA,kBACA,oBACA,aACA,UACA,YACA,QACA,cAGA,gBACA,2BACA,aACA,2BACA,4BAGA,aACA,kBACA,mBACA,oBACA,mBACA,YACA,aACA,aAGA,uBACA,oBACA,gBACA,cACA,mBAGA,YACA,aACA,aACA,sBACA,YAGA,eACA,gBAGA,mBACA,8BACA,6BAGA,gBACA,wBACA,wBACA,iBACA,uBACA,gBAGA,cACA,mBACA,UACA,aACA,aACJ,EAQaC,GAAqB,CAC9BC,EACAC,IACU,CACV,IAAMC,EAAUF,EAAQ,QAAQ,YAAY,EACtCG,EAAa,CACf,OACA,WACA,QACA,SACA,SACA,MACA,MACA,WACA,OACJ,EAGA,GAAID,IAAY,QAAS,CA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",
|
|
4
|
+
"sourcesContent": ["/**\n * OverlayScrollbar.tsx\n *\n * @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, {\n useRef,\n useEffect,\n useState,\n useCallback,\n useMemo,\n ReactNode,\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n} from \"react\";\nimport { isTextInputElement } from \"./utils/dragScrollUtils\";\n\n// thumb \uAD00\uB828 \uC124\uC815\nexport interface ThumbConfig {\n width?: number; // \uC378\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC00: 8px)\n minHeight?: number; // \uC378\uC758 \uCD5C\uC18C \uB192\uC774 (\uAE30\uBCF8\uAC00: 50px)\n radius?: number; // \uC378\uC758 border-radius (\uAE30\uBCF8\uAC00: width / 2)\n color?: string; // \uC378 \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#606060\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// track \uAD00\uB828 \uC124\uC815\nexport interface TrackConfig {\n width?: number; // \uD638\uBC84 \uC601\uC5ED\uC778 \uD2B8\uB799\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC12: 16px)\n color?: string; // \uD2B8\uB799 \uBC30\uACBD \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: \"rgba(128, 128, 128, 0.1)\")\n visible?: boolean; // \uD2B8\uB799 \uBC30\uACBD \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n alignment?: \"center\" | \"right\"; // \uD2B8\uB799 \uB0B4\uBD80 \uC815\uB82C (\uAE30\uBCF8\uAC00: \"center\")\n radius?: number; // \uD2B8\uB799 \uBC30\uACBD\uC758 border-radius (\uAE30\uBCF8\uAC12: thumb.radius \uB610\uB294 4px)\n margin?: number; // \uD2B8\uB799 \uC0C1\uD558 \uB9C8\uC9C4 (\uAE30\uBCF8\uAC12: 4px)\n}\n\n// arrows \uAD00\uB828 \uC124\uC815\nexport interface ArrowsConfig {\n visible?: boolean; // \uD654\uC0B4\uD45C \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC00: false)\n step?: number; // \uD654\uC0B4\uD45C \uD074\uB9AD\uC2DC \uC2A4\uD06C\uB864 \uC774\uB3D9 \uAC70\uB9AC (\uAE30\uBCF8\uAC00: 50px)\n color?: string; // \uD654\uC0B4\uD45C \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#808080\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\nexport interface DragScrollConfig {\n enabled?: boolean; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n excludeClasses?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778, \uCD5C\uB300 5\uB2E8\uACC4)\n excludeSelectors?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 CSS \uC140\uB809\uD130\uB4E4 (element.matches() \uC0AC\uC6A9)\n}\n\n// \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\nexport interface AutoHideConfig {\n enabled?: boolean; // \uC790\uB3D9 \uC228\uAE40 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n delay?: number; // \uAE30\uBCF8 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC12: 1500ms)\n delayOnWheel?: number; // \uD720 \uC2A4\uD06C\uB864 \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC00: 700ms)\n}\n\nexport interface OverlayScrollbarProps {\n className?: string;\n style?: React.CSSProperties; // wrapper div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n containerStyle?: React.CSSProperties; // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n contentStyle?: React.CSSProperties; // \uB0B4\uBD80 content div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n children: ReactNode;\n onScroll?: (event: Event) => void;\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb?: ThumbConfig; // \uC378 \uAD00\uB828 \uC124\uC815\n track?: TrackConfig; // \uD2B8\uB799 \uAD00\uB828 \uC124\uC815\n arrows?: ArrowsConfig; // \uD654\uC0B4\uD45C\uB4E4 \uAD00\uB828 \uC124\uC815\n dragScroll?: DragScrollConfig; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\n autoHide?: AutoHideConfig; // \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar?: boolean; // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n detectInnerScroll?: boolean; // children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uAC10\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: false, \uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1\uC5D0 \uC0AC\uC6A9)\n}\n\n// OverlayScrollbar\uAC00 \uB178\uCD9C\uD560 \uBA54\uC11C\uB4DC\uB4E4\nexport interface OverlayScrollbarRef {\n getScrollContainer: () => HTMLDivElement | null;\n scrollTo: (options: ScrollToOptions) => void;\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// \uAE30\uBCF8 \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC744 \uCEF4\uD3EC\uB10C\uD2B8 \uC678\uBD80\uC5D0 \uC0C1\uC218\uB85C \uC120\uC5B8 (\uC7AC\uB80C\uB354\uB9C1 \uC2DC \uB3D9\uC77C\uD55C \uCC38\uC870 \uC720\uC9C0)\nconst DEFAULT_THUMB_CONFIG: ThumbConfig = {};\nconst DEFAULT_TRACK_CONFIG: TrackConfig = {};\nconst DEFAULT_ARROWS_CONFIG: ArrowsConfig = {};\nconst DEFAULT_DRAG_SCROLL_CONFIG: DragScrollConfig = {};\nconst DEFAULT_AUTO_HIDE_CONFIG: AutoHideConfig = {};\n\nconst OverlayScrollbar = forwardRef<OverlayScrollbarRef, OverlayScrollbarProps>(\n (\n {\n className = \"\",\n style = {},\n containerStyle = {},\n contentStyle = {},\n children,\n onScroll,\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb = DEFAULT_THUMB_CONFIG,\n track = DEFAULT_TRACK_CONFIG,\n arrows = DEFAULT_ARROWS_CONFIG,\n dragScroll = DEFAULT_DRAG_SCROLL_CONFIG,\n autoHide = DEFAULT_AUTO_HIDE_CONFIG,\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar = true,\n detectInnerScroll = false,\n },\n ref\n ) => {\n // props \uBCC0\uACBD \uCD94\uC801\uC6A9 ref\n const prevPropsRef = useRef<{\n children?: ReactNode;\n onScroll?: (event: Event) => void;\n showScrollbar?: boolean;\n thumb?: ThumbConfig;\n track?: TrackConfig;\n arrows?: ArrowsConfig;\n dragScroll?: DragScrollConfig;\n autoHide?: AutoHideConfig;\n }>({});\n\n // \uB80C\uB354\uB9C1 \uC2DC \uC5B4\uB5A4 prop\uC774 \uBCC0\uACBD\uB418\uC5C8\uB294\uC9C0 \uCCB4\uD06C\n useEffect(() => {\n // \uD604\uC7AC props \uC800\uC7A5\n prevPropsRef.current = {\n children,\n onScroll,\n showScrollbar,\n thumb,\n track,\n arrows,\n dragScroll,\n autoHide,\n };\n });\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLDivElement>(null);\n\n // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uCE90\uC2F1\uC6A9 ref (\uC131\uB2A5 \uCD5C\uC801\uD654)\n const cachedScrollContainerRef = useRef<HTMLElement | null>(null);\n\n // \uAE30\uBCF8 \uC0C1\uD0DC\uB4E4\n const [scrollbarVisible, setScrollbarVisible] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isThumbHovered, setIsThumbHovered] = useState(false);\n const [dragStart, setDragStart] = useState({ y: 0, scrollTop: 0 });\n const [thumbHeight, setThumbHeight] = useState(0);\n const [thumbTop, setThumbTop] = useState(0);\n const [hasScrollableContent, setHasScrollableContent] = useState(false);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC0C1\uD0DC\n const [isDragScrolling, setIsDragScrolling] = useState(false);\n const [dragScrollStart, setDragScrollStart] = useState({\n x: 0,\n y: 0,\n scrollTop: 0,\n scrollLeft: 0,\n });\n const [activeArrow, setActiveArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n const [hoveredArrow, setHoveredArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n\n // \uCD08\uAE30 \uB9C8\uC6B4\uD2B8 \uC2DC hover \uBC29\uC9C0\uC6A9\n const [isInitialized, setIsInitialized] = useState(false);\n\n // \uD720 \uC2A4\uD06C\uB864 \uAC10\uC9C0\uC6A9\n const wheelTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const [isWheelScrolling, setIsWheelScrolling] = useState(false);\n\n // \uC228\uAE40 \uD0C0\uC774\uBA38\n const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const hoverEnterTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uD45C\uC2DC \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const wheelShowTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC5D0 \uAE30\uBCF8\uAC12 \uC124\uC815\n const finalThumbConfig = useMemo(() => {\n const baseColor = thumb.color ?? \"#606060\";\n return {\n width: thumb.width ?? 8,\n minHeight: thumb.minHeight ?? 50,\n radius: thumb.radius ?? (thumb.width ?? 8) / 2,\n color: baseColor,\n opacity: thumb.opacity ?? 0.6,\n hoverColor: thumb.hoverColor ?? baseColor,\n hoverOpacity: thumb.hoverOpacity ?? 1.0,\n };\n }, [thumb]);\n\n const finalTrackConfig = useMemo(\n () => ({\n width: track.width ?? 16,\n color: track.color ?? \"rgba(128, 128, 128, 0.1)\",\n visible: track.visible ?? true,\n alignment: track.alignment ?? \"center\",\n radius: track.radius ?? finalThumbConfig.radius ?? 4,\n margin: track.margin ?? 4,\n }),\n [track, finalThumbConfig.radius]\n );\n\n const finalArrowsConfig = useMemo(() => {\n const baseColor = arrows.color ?? \"#808080\";\n return {\n visible: arrows.visible ?? false,\n step: arrows.step ?? 50,\n color: baseColor,\n opacity: arrows.opacity ?? 0.6,\n hoverColor: arrows.hoverColor ?? baseColor,\n hoverOpacity: arrows.hoverOpacity ?? 1.0,\n };\n }, [arrows]);\n\n const finalDragScrollConfig = useMemo(\n () => ({\n enabled: dragScroll.enabled ?? true,\n excludeClasses: dragScroll.excludeClasses ?? [],\n excludeSelectors: dragScroll.excludeSelectors ?? [],\n }),\n [dragScroll]\n );\n\n const finalAutoHideConfig = useMemo(\n () => ({\n enabled: autoHide.enabled ?? true,\n delay: autoHide.delay ?? 1500,\n delayOnWheel: autoHide.delayOnWheel ?? 700,\n }),\n [autoHide]\n );\n\n // \uD638\uD658\uC131\uC744 \uC704\uD55C \uBCC0\uC218\uB4E4 (\uC790\uC8FC \uC0AC\uC6A9\uB418\uB294 \uBCC0\uC218\uB4E4\uB9CC \uC720\uC9C0)\n const finalThumbWidth = finalThumbConfig.width;\n const finalTrackWidth = finalTrackConfig.width;\n const thumbMinHeight = finalThumbConfig.minHeight;\n const showArrows = finalArrowsConfig.visible;\n const arrowStep = finalArrowsConfig.step;\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 \uD568\uC218 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n const maintainFocus = useCallback(() => {\n if (!containerRef.current) return;\n\n // \uD604\uC7AC \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C \uD655\uC778\n const activeElement = document.activeElement;\n\n // \uC624\uBC84\uB808\uC774 \uC2A4\uD06C\uB864\uBC14 \uB0B4\uBD80\uC5D0 \uC774\uBBF8 \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC788\uC73C\uBA74 \uC2A4\uD0B5\n if (\n activeElement &&\n containerRef.current.contains(activeElement) &&\n activeElement !== containerRef.current\n ) {\n return;\n }\n\n // \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC5C6\uAC70\uB098 \uC678\uBD80\uC5D0 \uC788\uC73C\uBA74 \uCEE8\uD14C\uC774\uB108\uC5D0 \uD3EC\uCEE4\uC2A4\n containerRef.current.focus();\n }, []);\n\n // ref\uB97C \uD1B5\uD574 \uC678\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uB3C4\uB85D \uD568\n useImperativeHandle(\n ref,\n () => ({\n getScrollContainer: () => containerRef.current,\n scrollTo: (options: ScrollToOptions) => {\n if (containerRef.current) {\n containerRef.current.scrollTo(options);\n }\n },\n get scrollTop() {\n return containerRef.current?.scrollTop || 0;\n },\n get scrollHeight() {\n return containerRef.current?.scrollHeight || 0;\n },\n get clientHeight() {\n return containerRef.current?.clientHeight || 0;\n },\n }),\n []\n );\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30 (\uCE90\uC2F1 \uCD5C\uC801\uD654)\n const findScrollableElement = useCallback((): HTMLElement | null => {\n // \uCE90\uC2DC\uB41C \uC694\uC18C\uAC00 \uC5EC\uC804\uD788 \uC720\uD6A8\uD55C\uC9C0 \uD655\uC778\n if (cachedScrollContainerRef.current) {\n const cached = cachedScrollContainerRef.current;\n // DOM\uC5D0 \uC5F0\uACB0\uB418\uC5B4 \uC788\uACE0 \uC5EC\uC804\uD788 \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C\uC9C0 \uD655\uC778\n if (\n document.contains(cached) &&\n cached.scrollHeight > cached.clientHeight + 2\n ) {\n return cached;\n }\n // \uCE90\uC2DC \uBB34\uD6A8\uD654\n cachedScrollContainerRef.current = null;\n }\n\n if (!containerRef.current) {\n return null;\n }\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC758 \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uD655\uC778\n if (\n contentRef.current &&\n contentRef.current.scrollHeight >\n containerRef.current.clientHeight + 2\n ) {\n cachedScrollContainerRef.current = containerRef.current;\n return containerRef.current;\n }\n\n // detectInnerScroll \uC635\uC158\uC774 \uD65C\uC131\uD654\uB41C \uACBD\uC6B0\uC5D0\uB9CC children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uCC3E\uAE30\n // (\uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1 \uB0B4\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864\uC744 \uCC98\uB9AC\uD558\uB294 \uACBD\uC6B0\uC5D0 \uC0AC\uC6A9)\n if (!detectInnerScroll) {\n return null;\n }\n\n // children \uC694\uC18C\uC5D0\uC11C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 \uC601\uC5ED\uC740 \uC81C\uC678 (\uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC2A4\uD0B5)\n const childScrollableElements =\n containerRef.current.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n\n for (const child of childScrollableElements) {\n const element = child as HTMLElement;\n\n // \uC774 \uC694\uC18C\uAC00 \uB2E4\uB978 OverlayScrollbar\uC758 container\uC778\uC9C0 \uD655\uC778\n // (\uC790\uC2E0\uC758 containerRef\uB294 \uC544\uB2C8\uC5B4\uC57C \uD558\uACE0, overlay-scrollbar-container \uD074\uB798\uC2A4\uB97C \uAC00\uC9C4 \uACBD\uC6B0)\n if (\n element !== containerRef.current &&\n element.classList.contains(\"overlay-scrollbar-container\")\n ) {\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 container\uC774\uBBC0\uB85C \uC2A4\uD0B5\n continue;\n }\n\n // \uC774 \uC694\uC18C\uC758 \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uB294\uC9C0 \uD655\uC778\n let parent: HTMLElement | null = element.parentElement;\n let isNestedInAnotherScrollbar = false;\n\n while (parent && parent !== containerRef.current) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== containerRef.current\n ) {\n // \uB2E4\uB978 OverlayScrollbar \uB0B4\uBD80\uC758 \uC694\uC18C\uC774\uBBC0\uB85C \uC2A4\uD0B5\n isNestedInAnotherScrollbar = true;\n break;\n }\n parent = parent.parentElement;\n }\n\n if (isNestedInAnotherScrollbar) {\n continue;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C\uC778\uC9C0 \uD655\uC778\n if (element.scrollHeight > element.clientHeight + 2) {\n cachedScrollContainerRef.current = element;\n return element;\n }\n }\n\n return null;\n }, []);\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uCCB4\uD06C\n const isScrollable = useCallback(() => {\n return findScrollableElement() !== null;\n }, [findScrollableElement]);\n\n // \uD0C0\uC774\uBA38 \uC815\uB9AC\n const clearHideTimer = useCallback(() => {\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const clearHoverEnterTimer = useCallback(() => {\n if (hoverEnterTimeoutRef.current) {\n clearTimeout(hoverEnterTimeoutRef.current);\n hoverEnterTimeoutRef.current = null;\n }\n }, []);\n\n const clearWheelShowTimer = useCallback(() => {\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n wheelShowTimeoutRef.current = null;\n }\n }, []);\n\n // \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 \uD0C0\uC774\uBA38\n const setHideTimer = useCallback(\n (delay: number) => {\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uD0C0\uC774\uBA38\uB97C \uC124\uC815\uD558\uC9C0 \uC54A\uC74C\n if (!finalAutoHideConfig.enabled) {\n return;\n }\n clearHideTimer();\n hideTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(false);\n hideTimeoutRef.current = null;\n }, delay);\n },\n [clearHideTimer, finalAutoHideConfig.enabled]\n );\n\n // \uC2A4\uD06C\uB864\uBC14 \uC704\uCE58 \uBC0F \uD06C\uAE30 \uC5C5\uB370\uC774\uD2B8\n const updateScrollbar = useCallback(() => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) {\n // \uC2A4\uD06C\uB864 \uBD88\uAC00\uB2A5\uD558\uBA74 \uC228\uAE40\n setScrollbarVisible(false);\n setHasScrollableContent(false);\n clearHideTimer();\n return;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20\uAC00 \uC788\uC74C\uC744 \uD45C\uC2DC\n setHasScrollableContent(true);\n\n if (!scrollbarRef.current) return;\n\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled) {\n setScrollbarVisible(true);\n clearHideTimer();\n }\n\n const containerHeight = scrollableElement.clientHeight;\n const contentHeight = scrollableElement.scrollHeight;\n const scrollTop = scrollableElement.scrollTop;\n\n // wrapper\uC758 \uD328\uB529 \uACC4\uC0B0 (\uC0C1\uD558 \uD328\uB529\uB9CC \uD544\uC694)\n let wrapperPaddingTopBottom = 0;\n if (wrapperRef.current) {\n const computedStyle = window.getComputedStyle(\n wrapperRef.current\n );\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom =\n parseFloat(computedStyle.paddingBottom) || 0;\n wrapperPaddingTopBottom = paddingTop + paddingBottom;\n }\n\n // \uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uACC4\uC0B0 (\uD654\uC0B4\uD45C + \uC704\uC544\uB798 \uB9C8\uC9C4, \uD654\uC0B4\uD45C \uC5C6\uC5B4\uB3C4 \uC704\uC544\uB798 \uB9C8\uC9C4)\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n\n // \uC378 \uB192\uC774 \uACC4\uC0B0 (\uC0AC\uC6A9\uC790 \uC124\uC815 \uCD5C\uC18C \uB192\uC774 \uC0AC\uC6A9, \uD654\uC0B4\uD45C \uACF5\uAC04 \uC81C\uC678, wrapper \uD328\uB529 \uCD94\uAC00)\n const availableHeight =\n containerHeight - arrowSpace + wrapperPaddingTopBottom;\n const scrollRatio = containerHeight / contentHeight;\n const calculatedThumbHeight = Math.max(\n availableHeight * scrollRatio,\n thumbMinHeight\n );\n\n // \uC378 \uC704\uCE58 \uACC4\uC0B0 (\uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uC81C\uC678)\n const scrollableHeight = contentHeight - containerHeight;\n const thumbScrollableHeight =\n availableHeight - calculatedThumbHeight;\n const calculatedThumbTop =\n scrollableHeight > 0\n ? (scrollTop / scrollableHeight) * thumbScrollableHeight\n : 0;\n\n setThumbHeight(calculatedThumbHeight);\n setThumbTop(calculatedThumbTop);\n }, [\n findScrollableElement,\n clearHideTimer,\n showArrows,\n finalThumbWidth,\n thumbMinHeight,\n finalAutoHideConfig.enabled,\n ]);\n\n // \uC378 \uB4DC\uB798\uADF8 \uC2DC\uC791\n const handleThumbMouseDown = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n setIsDragging(true);\n setDragStart({\n y: event.clientY,\n scrollTop: actualScrollContainer.scrollTop,\n });\n\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [findScrollableElement, clearHideTimer, maintainFocus]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC911\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragging) return;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n const scrollableHeight = contentHeight - containerHeight;\n\n const deltaY = event.clientY - dragStart.y;\n const thumbScrollableHeight = containerHeight - thumbHeight;\n const scrollDelta =\n (deltaY / thumbScrollableHeight) * scrollableHeight;\n\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableHeight,\n dragStart.scrollTop + scrollDelta\n )\n );\n\n actualScrollContainer.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragging,\n dragStart,\n thumbHeight,\n updateScrollbar,\n findScrollableElement,\n ]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC885\uB8CC\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay); // \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uD2B8\uB799 \uD074\uB9AD\uC73C\uB85C \uC2A4\uD06C\uB864 \uC810\uD504\n const handleTrackClick = useCallback(\n (event: React.MouseEvent) => {\n if (!scrollbarRef.current) {\n return;\n }\n\n const scrollbar = scrollbarRef.current;\n const rect = scrollbar.getBoundingClientRect();\n const clickY = event.clientY - rect.top;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n\n const scrollRatio = clickY / containerHeight;\n const newScrollTop =\n scrollRatio * (contentHeight - containerHeight);\n\n actualScrollContainer.scrollTop = Math.max(\n 0,\n Math.min(contentHeight - containerHeight, newScrollTop)\n );\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n finalAutoHideConfig.delay,\n findScrollableElement,\n maintainFocus,\n ]\n );\n\n // \uC704\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleUpArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current) return;\n\n const newScrollTop = Math.max(\n 0,\n containerRef.current.scrollTop - arrowStep\n );\n\n containerRef.current.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleDownArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current || !contentRef.current) return;\n\n const container = containerRef.current;\n const content = contentRef.current;\n const maxScrollTop =\n content.scrollHeight - container.clientHeight;\n const newScrollTop = Math.min(\n maxScrollTop,\n container.scrollTop + arrowStep\n );\n\n container.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC2DC\uC791\n const handleDragScrollStart = useCallback(\n (event: React.MouseEvent) => {\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uBE44\uD65C\uC131\uD654\uB41C \uACBD\uC6B0\n if (!finalDragScrollConfig.enabled) return;\n\n // \uD14D\uC2A4\uD2B8 \uC785\uB825 \uC694\uC18C\uB098 \uC81C\uC678 \uB300\uC0C1\uC774\uBA74 \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD558\uC9C0 \uC54A\uC74C\n const target = event.target as Element;\n if (isTextInputElement(target, finalDragScrollConfig)) {\n return;\n }\n\n // \uC624\uB978\uCABD \uD074\uB9AD\uC774\uB098 \uD720 \uD074\uB9AD\uC740 \uC81C\uC678\n if (event.button !== 0) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC601\uC5ED\uC774 \uC544\uB2C8\uBA74 \uC81C\uC678\n if (\n scrollableElement.scrollHeight <=\n scrollableElement.clientHeight\n )\n return;\n\n event.preventDefault();\n setIsDragScrolling(true);\n setDragScrollStart({\n x: event.clientX,\n y: event.clientY,\n scrollTop: scrollableElement.scrollTop,\n scrollLeft: scrollableElement.scrollLeft || 0,\n });\n\n // \uC2A4\uD06C\uB864\uBC14\uB294 \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD560 \uB54C \uD45C\uC2DC (handleDragScrollMove\uC5D0\uC11C \uCC98\uB9AC)\n clearHideTimer();\n },\n [\n finalDragScrollConfig,\n isTextInputElement,\n findScrollableElement,\n clearHideTimer,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC911\n const handleDragScrollMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragScrolling) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const deltaX = dragScrollStart.x - event.clientX;\n const deltaY = dragScrollStart.y - event.clientY;\n\n // \uBBF8\uC138\uD55C \uC6C0\uC9C1\uC784 \uBB34\uC2DC (3px \uC774\uD558)\n if (Math.abs(deltaY) < 3 && Math.abs(deltaX) < 3) {\n return;\n }\n\n // \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD588\uC73C\uBBC0\uB85C \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n setScrollbarVisible(true);\n\n // \uC138\uB85C \uC2A4\uD06C\uB864\uB9CC \uCC98\uB9AC (\uAC00\uB85C \uC2A4\uD06C\uB864\uC740 \uD544\uC694\uC2DC \uB098\uC911\uC5D0 \uCD94\uAC00)\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableElement.scrollHeight -\n scrollableElement.clientHeight,\n dragScrollStart.scrollTop + deltaY\n )\n );\n\n scrollableElement.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragScrolling,\n dragScrollStart,\n findScrollableElement,\n updateScrollbar,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC885\uB8CC\n const handleDragScrollEnd = useCallback(() => {\n setIsDragScrolling(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uC2A4\uD06C\uB864 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 (externalScrollContainer \uC6B0\uC120 \uC0AC\uC6A9)\n useEffect(() => {\n const handleScroll = (event: Event) => {\n updateScrollbar();\n\n // \uC2A4\uD06C\uB864 \uC911\uC5D0\uB294 \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC2E4\uC81C \uC2A4\uD06C\uB864 \uBC1C\uC0DD \uC2DC)\n clearWheelShowTimer();\n\n // \uD720 \uC2A4\uD06C\uB864 \uC911\uC774\uBA74 \uBE60\uB978 \uC228\uAE40, \uC544\uB2C8\uBA74 \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n const delay = isWheelScrolling\n ? finalAutoHideConfig.delayOnWheel\n : finalAutoHideConfig.delay;\n setHideTimer(delay);\n\n if (onScroll) {\n onScroll(event);\n }\n };\n\n const handleWheel = () => {\n // \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD45C\uC2DC\n setIsWheelScrolling(true);\n\n // \uAE30\uC874 \uD720 \uD0C0\uC774\uBA38 \uC81C\uAC70\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n\n // 300ms \uD6C4 \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD574\uC81C (\uD720 \uC2A4\uD06C\uB864\uC774 \uB05D\uB0AC\uB2E4\uACE0 \uAC04\uC8FC)\n wheelTimeoutRef.current = setTimeout(() => {\n setIsWheelScrolling(false);\n }, 300);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uC2DC 50ms \uB514\uBC14\uC6B4\uC2A4 \uC801\uC6A9 (\uC2E4\uC81C \uC2A4\uD06C\uB864 \uBC1C\uC0DD \uC2DC handleScroll\uC5D0\uC11C \uCDE8\uC18C\uB428)\n clearWheelShowTimer();\n wheelShowTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n wheelShowTimeoutRef.current = null;\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uD0C0\uC774\uBA38 \uC124\uC815\n setHideTimer(finalAutoHideConfig.delayOnWheel);\n }, 50);\n };\n\n const elementsToWatch: HTMLElement[] = [];\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n const scrollableElement = findScrollableElement();\n if (scrollableElement) {\n elementsToWatch.push(scrollableElement);\n }\n\n // fallback: \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC640 children \uC694\uC18C\uB3C4 \uAC10\uC9C0\n const container = containerRef.current;\n if (container && !scrollableElement) {\n elementsToWatch.push(container);\n\n // children \uC694\uC18C\uB4E4\uC758 \uC2A4\uD06C\uB864\uB3C4 \uAC10\uC9C0 (\uC911\uCCA9\uB41C OverlayScrollbar \uC81C\uC678)\n const childScrollableElements = container.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n childScrollableElements.forEach((child) => {\n const element = child as HTMLElement;\n\n // \uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC81C\uC678\n if (\n element !== container &&\n element.classList.contains(\n \"overlay-scrollbar-container\"\n )\n ) {\n return;\n }\n\n // \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uC73C\uBA74 \uC81C\uC678\n let parent: HTMLElement | null = element.parentElement;\n while (parent && parent !== container) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== container\n ) {\n return; // \uC911\uCCA9\uB41C OverlayScrollbar \uB0B4\uBD80\uC774\uBBC0\uB85C \uC81C\uC678\n }\n parent = parent.parentElement;\n }\n\n elementsToWatch.push(element);\n });\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uC5D0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uB4F1\uB85D\n elementsToWatch.forEach((element) => {\n element.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n });\n element.addEventListener(\"wheel\", handleWheel, {\n passive: true,\n });\n });\n\n return () => {\n // \uBAA8\uB4E0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uC81C\uAC70\n elementsToWatch.forEach((element) => {\n element.removeEventListener(\"scroll\", handleScroll);\n element.removeEventListener(\"wheel\", handleWheel);\n });\n\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n }\n };\n }, [\n findScrollableElement,\n updateScrollbar,\n onScroll,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig,\n isWheelScrolling,\n ]);\n\n // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uD578\uB4E4\uB7EC (\uBC29\uD5A5\uD0A4, PageUp/PageDown/Home/End)\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const { key } = event;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollableElement;\n const maxScrollTop = scrollHeight - clientHeight;\n\n // \uD55C \uC904 \uC2A4\uD06C\uB864 \uB2E8\uC704 (rowHeight \uB610\uB294 \uAE30\uBCF8\uAC12)\n const lineScrollStep = 50;\n\n let newScrollTop: number | null = null;\n\n switch (key) {\n case \"ArrowUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - lineScrollStep);\n break;\n case \"ArrowDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + lineScrollStep\n );\n break;\n case \"PageUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - clientHeight);\n break;\n case \"PageDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + clientHeight\n );\n break;\n case \"Home\":\n event.preventDefault();\n newScrollTop = 0;\n break;\n case \"End\":\n event.preventDefault();\n newScrollTop = maxScrollTop;\n break;\n default:\n return;\n }\n\n if (newScrollTop !== null) {\n // \uC378 \uC704\uCE58\uB97C \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\n const scrollRatio = newScrollTop / maxScrollTop;\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n const availableHeight = clientHeight - arrowSpace;\n const scrollableThumbHeight = availableHeight - thumbHeight;\n const newThumbTop = scrollableThumbHeight * scrollRatio;\n\n setThumbTop(newThumbTop);\n\n // \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uC989\uC2DC \uBCC0\uACBD (\uC560\uB2C8\uBA54\uC774\uC158 \uC5C6\uC74C)\n scrollableElement.scrollTop = newScrollTop;\n\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n }\n };\n\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n container.removeEventListener(\"keydown\", handleKeyDown);\n };\n }\n }, [\n findScrollableElement,\n showArrows,\n finalThumbWidth,\n finalTrackConfig.margin,\n thumbHeight,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig.delay,\n ]);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragScrolling) {\n document.addEventListener(\"mousemove\", handleDragScrollMove);\n document.addEventListener(\"mouseup\", handleDragScrollEnd);\n return () => {\n document.removeEventListener(\n \"mousemove\",\n handleDragScrollMove\n );\n document.removeEventListener(\n \"mouseup\",\n handleDragScrollEnd\n );\n };\n }\n }, [isDragScrolling, handleDragScrollMove, handleDragScrollEnd]);\n\n // \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n }, [isDragging, handleMouseMove, handleMouseUp]);\n\n // \uCD08\uAE30 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8\n useEffect(() => {\n // \uC989\uC2DC \uC5C5\uB370\uC774\uD2B8\n updateScrollbar();\n // \uC57D\uAC04\uC758 \uC9C0\uC5F0 \uD6C4\uC5D0\uB3C4 \uC5C5\uB370\uC774\uD2B8 (DOM\uC774 \uC644\uC804\uD788 \uB80C\uB354\uB9C1\uB41C \uD6C4)\n const timer = setTimeout(() => {\n updateScrollbar();\n }, 100);\n return () => clearTimeout(timer);\n }, [updateScrollbar]);\n\n // \uCEF4\uD3EC\uB10C\uD2B8 \uCD08\uAE30\uD654 \uC644\uB8CC \uD45C\uC2DC (hover \uC774\uBCA4\uD2B8 \uD65C\uC131\uD654\uC6A9)\n useLayoutEffect(() => {\n setIsInitialized(true);\n // \uCD08\uAE30\uD654 \uC9C1\uD6C4 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8 (\uC378 \uB192\uC774 \uC815\uD655\uD558\uAC8C \uACC4\uC0B0)\n updateScrollbar();\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled && isScrollable()) {\n setScrollbarVisible(true);\n }\n }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);\n\n // Resize observer\uB85C \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n updateScrollbar();\n });\n\n const elementsToObserve: HTMLElement[] = [];\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uB4E4 \uAD00\uCC30\n if (containerRef.current) {\n elementsToObserve.push(containerRef.current);\n }\n if (contentRef.current) {\n elementsToObserve.push(contentRef.current);\n }\n\n // \uCE90\uC2DC\uB41C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uB3C4 \uAD00\uCC30\n if (\n cachedScrollContainerRef.current &&\n document.contains(cachedScrollContainerRef.current)\n ) {\n elementsToObserve.push(cachedScrollContainerRef.current);\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uB4E4 \uAD00\uCC30 \uC2DC\uC791\n elementsToObserve.forEach((element) => {\n resizeObserver.observe(element);\n });\n\n return () => resizeObserver.disconnect();\n }, [updateScrollbar]);\n\n // MutationObserver\uB85C DOM \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n // \uCE90\uC2DC \uCD08\uAE30\uD654\uD558\uC5EC \uC0C8\uB85C\uC6B4 \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uAC10\uC9C0\n cachedScrollContainerRef.current = null;\n updateScrollbar();\n });\n\n observer.observe(containerRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"style\"],\n });\n\n return () => observer.disconnect();\n }, [updateScrollbar]);\n\n // trackWidth\uAC00 thumbWidth\uBCF4\uB2E4 \uC791\uC73C\uBA74 thumbWidth\uC640 \uAC19\uAC8C \uC124\uC815\n const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);\n\n // \uC6F9\uD0B7 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30\uC6A9 CSS \uB3D9\uC801 \uC8FC\uC785\n useEffect(() => {\n const styleId = \"overlay-scrollbar-webkit-hide\";\n\n // \uC774\uBBF8 \uC2A4\uD0C0\uC77C\uC774 \uC788\uC73C\uBA74 \uC81C\uAC70\n const existingStyle = document.getElementById(styleId);\n if (existingStyle) {\n existingStyle.remove();\n }\n\n const style = document.createElement(\"style\");\n style.id = styleId;\n style.textContent = `\n .overlay-scrollbar-container::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-track {\n display: none !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-thumb {\n display: none !important;\n }\n .overlay-scrollbar-container:focus {\n outline: 2px solid rgba(0, 123, 255, 0.3);\n outline-offset: -2px;\n }\n .overlay-scrollbar-container:focus-visible {\n outline: 2px solid rgba(0, 123, 255, 0.5);\n outline-offset: -2px;\n }\n `;\n document.head.appendChild(style);\n\n return () => {\n const styleToRemove = document.getElementById(styleId);\n if (styleToRemove) {\n styleToRemove.remove();\n }\n };\n }, []);\n\n return (\n <div\n ref={wrapperRef}\n className={`overlay-scrollbar-wrapper ${className}`}\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n minHeight: 0, // shrink \uAC00\uB2A5\uD558\uB3C4\uB85D\n height: \"100%\", // \uBD80\uBAA8\uC758 \uC804\uCCB4 \uB192\uC774 \uC0AC\uC6A9\n flex: \"1 1 0%\", // \uAE30\uBCF8\uC801\uC73C\uB85C flex item\uC73C\uB85C \uB3D9\uC791\n ...style, // \uC0AC\uC6A9\uC790\uAC00 flex\uB97C override \uD560 \uC218 \uC788\uB3C4\uB85D style\uC744 \uB4A4\uC5D0 \uBC30\uCE58\n }}\n >\n {/* \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 */}\n <div\n ref={containerRef}\n className=\"overlay-scrollbar-container\"\n tabIndex={-1} // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD558\uAC8C \uD568\n onMouseDown={handleDragScrollStart}\n style={{\n display: \"flex\",\n width: \"100%\", // \uBA85\uC2DC\uC801 \uB108\uBE44 \uC124\uC815\n flex: \"1 1 auto\", // flex item\uC73C\uB85C \uC124\uC815\uD558\uC5EC \uB192\uC774\uB97C \uC790\uB3D9\uC73C\uB85C \uACC4\uC0B0\n minHeight: 0, // \uCD5C\uC18C \uB192\uC774 \uBCF4\uC7A5\n overflow: \"auto\", // \uB124\uC774\uD2F0\uBE0C \uC2A4\uD06C\uB864 \uAE30\uB2A5 \uC720\uC9C0\n // \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8 \uC2A4\uD06C\uB864\uBC14\uB9CC \uC228\uAE30\uAE30\n scrollbarWidth: \"none\", // Firefox\n msOverflowStyle: \"none\", // IE/Edge\n // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uC2A4\uD0C0\uC77C (\uC811\uADFC\uC131)\n outline: \"none\", // \uAE30\uBCF8 \uC544\uC6C3\uB77C\uC778 \uC81C\uAC70\n userSelect: isDragScrolling ? \"none\" : \"auto\", // \uB4DC\uB798\uADF8 \uC911 \uD14D\uC2A4\uD2B8 \uC120\uD0DD \uBC29\uC9C0\n ...containerStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n <div\n ref={contentRef}\n className=\"overlay-scrollbar-content\"\n style={{\n flex: \"1 1 0%\", // grow\uD558\uC5EC \uACF5\uAC04 \uCC44\uC6B0\uAE30\n minHeight: 0, // flex shrink \uD5C8\uC6A9\n display: \"flex\", // flex \uCEE8\uD14C\uC774\uB108\uB85C \uC124\uC815\n flexDirection: \"column\", // \uC138\uB85C \uBC29\uD5A5 \uC815\uB82C\n ...contentStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n {children}\n </div>\n </div>\n\n {/* \uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14 */}\n {showScrollbar && hasScrollableContent && (\n <div\n ref={scrollbarRef}\n className=\"overlay-scrollbar-track\"\n onMouseEnter={() => {\n // \uC228\uAE40 \uD0C0\uC774\uBA38\uB294 \uC989\uC2DC \uCDE8\uC18C\n clearHideTimer();\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uC124\uC815 (100ms \uD6C4 \uD45C\uC2DC)\n hoverEnterTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n hoverEnterTimeoutRef.current = null;\n }, 100);\n }}\n onMouseLeave={() => {\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC9C0\uB098\uAC00\uAE30\uB9CC \uD55C \uACBD\uC6B0)\n clearHoverEnterTimer();\n\n if (!isDragging) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }}\n style={{\n position: \"absolute\",\n top: 0,\n right: 0,\n width: `${adjustedTrackWidth}px`,\n height: \"100%\",\n opacity: scrollbarVisible ? 1 : 0,\n transition: \"opacity 0.2s ease-in-out\",\n cursor: \"pointer\",\n zIndex: 1000,\n pointerEvents: \"auto\",\n }}\n >\n {/* \uC2A4\uD06C\uB864\uBC14 \uD2B8\uB799 \uBC30\uACBD */}\n {finalTrackConfig.visible && (\n <div\n className=\"overlay-scrollbar-track-background\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleTrackClick(e);\n }}\n style={{\n position: \"absolute\",\n top: showArrows\n ? `${\n finalThumbConfig.width +\n finalTrackConfig.margin * 2\n }px`\n : `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbConfig.width) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbConfig.width}px`,\n height: showArrows\n ? `calc(100% - ${\n finalThumbConfig.width * 2 +\n finalTrackConfig.margin * 4\n }px)`\n : `calc(100% - ${\n finalTrackConfig.margin * 2\n }px)`,\n backgroundColor: finalTrackConfig.color,\n borderRadius: `${finalTrackConfig.radius}px`,\n cursor: \"pointer\",\n }}\n />\n )}\n\n {/* \uC2A4\uD06C\uB864\uBC14 \uC378 */}\n <div\n ref={thumbRef}\n className=\"overlay-scrollbar-thumb\"\n onMouseDown={handleThumbMouseDown}\n onMouseEnter={() => setIsThumbHovered(true)}\n onMouseLeave={() => setIsThumbHovered(false)}\n style={{\n position: \"absolute\",\n top: `${\n (showArrows\n ? finalThumbWidth +\n finalTrackConfig.margin * 2\n : finalTrackConfig.margin) + thumbTop\n }px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${Math.max(\n thumbHeight,\n thumbMinHeight\n )}px`,\n backgroundColor:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverColor\n : finalThumbConfig.color,\n opacity:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverOpacity\n : finalThumbConfig.opacity,\n borderRadius: `${finalThumbConfig.radius}px`,\n cursor: \"pointer\",\n transition:\n \"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out\",\n }}\n />\n </div>\n )}\n\n {/* \uC704\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-up-arrow\"\n onClick={handleUpArrowClick}\n onMouseEnter={() => setHoveredArrow(\"up\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n top: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25B2\n </div>\n )}\n\n {/* \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-down-arrow\"\n onClick={handleDownArrowClick}\n onMouseEnter={() => setHoveredArrow(\"down\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n bottom: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25BC\n </div>\n )}\n </div>\n );\n }\n);\n\nexport default OverlayScrollbar;\nexport { OverlayScrollbar };\n", "/**\n * MIT License\n *\n * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { DragScrollConfig } from \"../types\";\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uC5D0\uC11C \uD655\uC778)\nconst DEFAULT_EXCLUDE_CLASSES = [\n // \uAE30\uBCF8 \uC785\uB825 \uC694\uC18C\uB4E4\n \"editor\",\n \"textarea\",\n \"input\",\n \"select\",\n \"textfield\",\n \"form-control\",\n \"contenteditable\",\n\n // Material-UI \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"MuiInputBase-input\",\n \"MuiSelect-select\",\n \"MuiOutlinedInput-input\",\n \"MuiFilledInput-input\",\n \"MuiInput-input\",\n \"MuiFormControl-root\",\n \"MuiTextField-root\",\n \"MuiSelect-root\",\n \"MuiOutlinedInput-root\",\n \"MuiFilledInput-root\",\n \"MuiInput-root\",\n \"MuiAutocomplete-input\",\n \"MuiDatePicker-input\",\n \"MuiSlider-thumb\",\n \"MuiSlider-rail\",\n \"MuiSlider-track\",\n \"MuiSlider-mark\",\n \"MuiSlider-markLabel\",\n \"MuiSlider-root\",\n \"MuiSlider-colorPrimary\",\n \"MuiSlider-sizeMedium\",\n \"MuiIconButton-root\",\n \"MuiButton-root\",\n \"MuiButtonBase-root\",\n \"MuiTouchRipple-root\",\n \"MuiCheckbox-root\",\n \"MuiRadio-root\",\n \"MuiSwitch-root\",\n \"PrivateSwitchBase-root\",\n\n // Ant Design \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ant-input\",\n \"ant-input-affix-wrapper\",\n \"ant-input-group-addon\",\n \"ant-input-number\",\n \"ant-input-number-handler\",\n \"ant-select\",\n \"ant-select-selector\",\n \"ant-select-selection-search\",\n \"ant-select-dropdown\",\n \"ant-cascader\",\n \"ant-cascader-input\",\n \"ant-picker\",\n \"ant-picker-input\",\n \"ant-time-picker\",\n \"ant-calendar-picker\",\n \"ant-slider\",\n \"ant-slider-track\",\n \"ant-slider-handle\",\n \"ant-switch\",\n \"ant-checkbox\",\n \"ant-checkbox-wrapper\",\n \"ant-radio\",\n \"ant-radio-wrapper\",\n \"ant-rate\",\n \"ant-upload\",\n \"ant-upload-drag\",\n \"ant-form-item\",\n \"ant-form-item-control\",\n \"ant-btn\",\n \"ant-dropdown\",\n \"ant-dropdown-trigger\",\n \"ant-menu\",\n \"ant-menu-item\",\n \"ant-tooltip\",\n \"ant-popover\",\n \"ant-modal\",\n \"ant-drawer\",\n \"ant-tree-select\",\n \"ant-auto-complete\",\n \"ant-mentions\",\n \"ant-transfer\",\n\n // Shadcn/ui \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ui-input\",\n \"ui-textarea\",\n \"ui-select\",\n \"ui-select-trigger\",\n \"ui-select-content\",\n \"ui-select-item\",\n \"ui-button\",\n \"ui-checkbox\",\n \"ui-radio-group\",\n \"ui-switch\",\n \"ui-slider\",\n \"ui-range-slider\",\n \"ui-calendar\",\n \"ui-date-picker\",\n \"ui-combobox\",\n \"ui-command\",\n \"ui-command-input\",\n \"ui-popover\",\n \"ui-dialog\",\n \"ui-sheet\",\n \"ui-dropdown-menu\",\n \"ui-context-menu\",\n \"ui-menubar\",\n \"ui-navigation-menu\",\n \"ui-form\",\n \"ui-form-control\",\n \"ui-form-item\",\n \"ui-form-field\",\n \"ui-label\",\n // Radix UI \uAE30\uBCF8 \uD074\uB798\uC2A4\uB4E4 (Shadcn \uAE30\uBC18)\n \"radix-ui\",\n \"radix-select\",\n \"radix-dropdown\",\n \"radix-dialog\",\n \"radix-popover\",\n \"radix-accordion\",\n \"radix-tabs\",\n \"radix-slider\",\n \"radix-switch\",\n \"radix-checkbox\",\n \"radix-radio\",\n\n // Quill Editor\n \"ql-editor\",\n \"ql-container\",\n \"ql-toolbar\",\n \"ql-picker\",\n \"ql-picker-label\",\n \"ql-picker-options\",\n \"ql-formats\",\n \"ql-snow\",\n \"ql-bubble\",\n \"quill\",\n \"quilleditor\",\n\n // Monaco Editor\n \"monaco-editor\",\n \"monaco-editor-background\",\n \"view-lines\",\n \"decorationsOverviewRuler\",\n \"monaco-scrollable-element\",\n\n // CodeMirror\n \"CodeMirror\",\n \"CodeMirror-code\",\n \"CodeMirror-lines\",\n \"CodeMirror-scroll\",\n \"CodeMirror-sizer\",\n \"cm-editor\",\n \"cm-focused\",\n \"cm-content\",\n\n // TinyMCE\n \"tox-editor-container\",\n \"tox-editor-header\",\n \"tox-edit-area\",\n \"tox-tinymce\",\n \"mce-content-body\",\n\n // CKEditor\n \"ck-editor\",\n \"ck-content\",\n \"ck-toolbar\",\n \"ck-editor__editable\",\n \"ck-widget\",\n\n // Slate.js\n \"slate-editor\",\n \"slate-content\",\n\n // Draft.js\n \"DraftEditor-root\",\n \"DraftEditor-editorContainer\",\n \"public-DraftEditor-content\",\n\n // EhfuseEditor\n \"ehfuse-editor\",\n \"ehfuse-editor-wrapper\",\n \"ehfuse-editor-content\",\n \"ehfuse-toolbar\",\n \"ehfuse-toolbar-group\",\n \"ehfuse-cursor\",\n\n // \uAE30\uD0C0 \uC5D0\uB514\uD130\uB4E4\n \"text-editor\",\n \"rich-text-editor\",\n \"wysiwyg\",\n \"ace_editor\",\n \"ace_content\",\n];\n\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\nexport const isTextInputElement = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n const tagName = element.tagName.toLowerCase();\n const inputTypes = [\n \"text\",\n \"password\",\n \"email\",\n \"number\",\n \"search\",\n \"tel\",\n \"url\",\n \"checkbox\",\n \"radio\",\n ];\n\n // input \uD0DC\uADF8\uC774\uBA74\uC11C \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD0C0\uC785\uC774\uB098 \uCCB4\uD06C\uBC15\uC2A4/\uB77C\uB514\uC624\uC778 \uACBD\uC6B0\n if (tagName === \"input\") {\n const type = (element as HTMLInputElement).type;\n return inputTypes.includes(type);\n }\n\n // textarea, select, \uD3B8\uC9D1 \uAC00\uB2A5\uD55C \uC694\uC18C\uB4E4\n if ([\"textarea\", \"select\", \"button\"].includes(tagName)) {\n return true;\n }\n\n // SVG \uC694\uC18C\uB4E4 (\uC544\uC774\uCF58\uB4E4)\n if (\n [\n \"svg\",\n \"path\",\n \"circle\",\n \"rect\",\n \"line\",\n \"polygon\",\n \"polyline\",\n ].includes(tagName)\n ) {\n return true;\n }\n\n // contenteditable \uC18D\uC131\uC774 \uC788\uB294 \uC694\uC18C\n if (element.getAttribute(\"contenteditable\") === \"true\") {\n return true;\n }\n\n // \uCD94\uAC00 \uC140\uB809\uD130 \uCCB4\uD06C\n if (config?.excludeSelectors) {\n for (const selector of config.excludeSelectors) {\n if (element.matches(selector)) {\n return true;\n }\n }\n }\n\n return checkElementAndParents(element, config);\n};\n\n/**\n * \uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uB4E4\uC744 \uD655\uC778\uD558\uC5EC \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uC694\uC18C\uC778\uC9C0 \uD310\uB2E8\n */\nconst checkElementAndParents = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n // \uBAA8\uB4E0 \uC81C\uC678 \uD074\uB798\uC2A4\uB4E4 \uD569\uCE58\uAE30 (\uAE30\uBCF8 \uD074\uB798\uC2A4 + \uC0AC\uC6A9\uC790 \uCD94\uAC00 \uD074\uB798\uC2A4)\n const allExcludeClasses = [\n ...DEFAULT_EXCLUDE_CLASSES,\n ...(config?.excludeClasses || []),\n ];\n\n let currentElement: Element | null = element;\n let depth = 0;\n const maxDepth = 5; // \uCD5C\uB300 5\uB2E8\uACC4\uAE4C\uC9C0 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778\n\n while (currentElement && depth <= maxDepth) {\n // \uD604\uC7AC \uC694\uC18C\uAC00 \uC81C\uC678 \uD074\uB798\uC2A4\uB97C \uAC00\uC9C0\uACE0 \uC788\uB294\uC9C0 \uD655\uC778\n if (\n allExcludeClasses.some((cls) =>\n currentElement!.classList.contains(cls)\n )\n ) {\n return true;\n }\n\n // \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB8E8\uD2B8\uC5D0 \uB3C4\uB2EC\uD558\uBA74 \uC911\uB2E8\n if (currentElement.classList.contains(\"MuiDialogContent-root\")) {\n break;\n }\n\n currentElement = currentElement.parentElement;\n depth++;\n }\n\n return false;\n};\n\n/**\n * \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB098 \uBAA8\uB2EC\uC774 \uC0C1\uC704\uC5D0 \uC788\uB294\uC9C0 \uD655\uC778\n */\nexport const hasUpperModal = (scrollContainer: Element): boolean => {\n const currentDialog = scrollContainer.closest(\n \".MuiDialog-root\"\n ) as HTMLElement;\n if (!currentDialog) return false;\n\n const allModals = document.querySelectorAll(\n \".MuiDialog-root, .MuiModal-root, .MuiPopover-root\"\n );\n const currentZIndex = parseInt(\n window.getComputedStyle(currentDialog).zIndex || \"0\"\n );\n\n for (const modal of allModals) {\n if (modal !== currentDialog) {\n const modalElement = modal as HTMLElement;\n const modalZIndex = parseInt(\n window.getComputedStyle(modalElement).zIndex || \"0\"\n );\n\n if (\n modalZIndex > currentZIndex &&\n modalElement.style.display !== \"none\"\n ) {\n return true;\n }\n }\n }\n\n return false;\n};\n\n/**\n * \uD074\uB9AD\uD55C \uC694\uC18C\uAC00 \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB0B4\uBD80\uC778\uC9C0 \uD655\uC778\n */\nexport const isClickInOtherDialog = (\n clickedElement: Element,\n currentDialog: Element | null\n): boolean => {\n const parentDialog = clickedElement.closest(\n \".MuiDialog-root, .MuiPopover-root, .MuiModal-root\"\n );\n return parentDialog !== null && parentDialog !== currentDialog;\n};\n"],
|
|
5
|
+
"mappings": "AAwBA,OACI,UAAAA,EACA,aAAAC,EACA,YAAAC,EACA,eAAAC,EACA,WAAAC,EAEA,cAAAC,GACA,uBAAAC,GACA,mBAAAC,OACG,QCPP,IAAMC,GAA0B,CAE5B,SACA,WACA,QACA,SACA,YACA,eACA,kBAGA,qBACA,mBACA,yBACA,uBACA,iBACA,sBACA,oBACA,iBACA,wBACA,sBACA,gBACA,wBACA,sBACA,kBACA,iBACA,kBACA,iBACA,sBACA,iBACA,yBACA,uBACA,qBACA,iBACA,qBACA,sBACA,mBACA,gBACA,iBACA,yBAGA,YACA,0BACA,wBACA,mBACA,2BACA,aACA,sBACA,8BACA,sBACA,eACA,qBACA,aACA,mBACA,kBACA,sBACA,aACA,mBACA,oBACA,aACA,eACA,uBACA,YACA,oBACA,WACA,aACA,kBACA,gBACA,wBACA,UACA,eACA,uBACA,WACA,gBACA,cACA,cACA,YACA,aACA,kBACA,oBACA,eACA,eAGA,WACA,cACA,YACA,oBACA,oBACA,iBACA,YACA,cACA,iBACA,YACA,YACA,kBACA,cACA,iBACA,cACA,aACA,mBACA,aACA,YACA,WACA,mBACA,kBACA,aACA,qBACA,UACA,kBACA,eACA,gBACA,WAEA,WACA,eACA,iBACA,eACA,gBACA,kBACA,aACA,eACA,eACA,iBACA,cAGA,YACA,eACA,aACA,YACA,kBACA,oBACA,aACA,UACA,YACA,QACA,cAGA,gBACA,2BACA,aACA,2BACA,4BAGA,aACA,kBACA,mBACA,oBACA,mBACA,YACA,aACA,aAGA,uBACA,oBACA,gBACA,cACA,mBAGA,YACA,aACA,aACA,sBACA,YAGA,eACA,gBAGA,mBACA,8BACA,6BAGA,gBACA,wBACA,wBACA,iBACA,uBACA,gBAGA,cACA,mBACA,UACA,aACA,aACJ,EAQaC,GAAqB,CAC9BC,EACAC,IACU,CACV,IAAMC,EAAUF,EAAQ,QAAQ,YAAY,EACtCG,EAAa,CACf,OACA,WACA,QACA,SACA,SACA,MACA,MACA,WACA,OACJ,EAGA,GAAID,IAAY,QAAS,CA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",
|
|
6
6
|
"names": ["useRef", "useEffect", "useState", "useCallback", "useMemo", "forwardRef", "useImperativeHandle", "useLayoutEffect", "DEFAULT_EXCLUDE_CLASSES", "isTextInputElement", "element", "config", "tagName", "inputTypes", "type", "selector", "checkElementAndParents", "allExcludeClasses", "currentElement", "depth", "maxDepth", "cls", "jsx", "jsxs", "DEFAULT_THUMB_CONFIG", "DEFAULT_TRACK_CONFIG", "DEFAULT_ARROWS_CONFIG", "DEFAULT_DRAG_SCROLL_CONFIG", "DEFAULT_AUTO_HIDE_CONFIG", "OverlayScrollbar", "forwardRef", "className", "style", "containerStyle", "contentStyle", "children", "onScroll", "thumb", "track", "arrows", "dragScroll", "autoHide", "showScrollbar", "detectInnerScroll", "ref", "prevPropsRef", "useRef", "useEffect", "wrapperRef", "containerRef", "contentRef", "scrollbarRef", "thumbRef", "cachedScrollContainerRef", "scrollbarVisible", "setScrollbarVisible", "useState", "isDragging", "setIsDragging", "isThumbHovered", "setIsThumbHovered", "dragStart", "setDragStart", "thumbHeight", "setThumbHeight", "thumbTop", "setThumbTop", "hasScrollableContent", "setHasScrollableContent", "isDragScrolling", "setIsDragScrolling", "dragScrollStart", "setDragScrollStart", "activeArrow", "setActiveArrow", "hoveredArrow", "setHoveredArrow", "isInitialized", "setIsInitialized", "wheelTimeoutRef", "isWheelScrolling", "setIsWheelScrolling", "hideTimeoutRef", "hoverEnterTimeoutRef", "wheelShowTimeoutRef", "finalThumbConfig", "useMemo", "baseColor", "finalTrackConfig", "finalArrowsConfig", "finalDragScrollConfig", "finalAutoHideConfig", "finalThumbWidth", "finalTrackWidth", "thumbMinHeight", "showArrows", "arrowStep", "maintainFocus", "useCallback", "activeElement", "useImperativeHandle", "options", "findScrollableElement", "cached", "childScrollableElements", "child", "element", "parent", "isNestedInAnotherScrollbar", "isScrollable", "clearHideTimer", "clearHoverEnterTimer", "clearWheelShowTimer", "setHideTimer", "delay", "updateScrollbar", "scrollableElement", "containerHeight", "contentHeight", "scrollTop", "wrapperPaddingTopBottom", "computedStyle", "paddingTop", "paddingBottom", "arrowSpace", "availableHeight", "scrollRatio", "calculatedThumbHeight", "scrollableHeight", "thumbScrollableHeight", "calculatedThumbTop", "handleThumbMouseDown", "event", "actualScrollContainer", "handleMouseMove", "deltaY", "scrollDelta", "newScrollTop", "handleMouseUp", "handleTrackClick", "rect", "clickY", "handleUpArrowClick", "handleDownArrowClick", "container", "maxScrollTop", "handleDragScrollStart", "target", "isTextInputElement", "handleDragScrollMove", "deltaX", "handleDragScrollEnd", "handleScroll", "handleWheel", "elementsToWatch", "handleKeyDown", "key", "scrollHeight", "clientHeight", "lineScrollStep", "newThumbTop", "timer", "useLayoutEffect", "resizeObserver", "elementsToObserve", "observer", "adjustedTrackWidth", "styleId", "existingStyle", "styleToRemove", "OverlayScrollbar_default"]
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var pe=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Be=Object.getOwnPropertyNames;var Ye=Object.prototype.hasOwnProperty;var Ge=(m,f)=>{for(var S in f)pe(m,S,{get:f[S],enumerable:!0})},Je=(m,f,S,M)=>{if(f&&typeof f=="object"||typeof f=="function")for(let g of Be(f))!Ye.call(m,g)&&g!==S&&pe(m,g,{get:()=>f[g],enumerable:!(M=ze(f,g))||M.enumerable});return m};var Xe=m=>Je(pe({},"__esModule",{value:!0}),m);var rt={};Ge(rt,{OverlayScrollbar:()=>fe,default:()=>fe});module.exports=Xe(rt);var e=require("react");var Ke=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],me=(m,f)=>{let S=m.tagName.toLowerCase(),M=["text","password","email","number","search","tel","url","checkbox","radio"];if(S==="input"){let g=m.type;return M.includes(g)}if(["textarea","select","button"].includes(S)||["svg","path","circle","rect","line","polygon","polyline"].includes(S)||m.getAttribute("contenteditable")==="true")return!0;if(f?.excludeSelectors){for(let g of f.excludeSelectors)if(m.matches(g))return!0}return Ze(m,f)},Ze=(m,f)=>{let S=[...Ke,...f?.excludeClasses||[]],M=m,g=0,P=5;for(;M&&g<=P;){if(S.some(E=>M.classList.contains(E)))return!0;if(M.classList.contains("MuiDialogContent-root"))break;M=M.parentElement,g++}return!1};var D=require("react/jsx-runtime"),je={},Ve={},Qe={},et={},tt={},ot=(0,e.forwardRef)(({className:m="",style:f={},containerStyle:S={},contentStyle:M={},children:g,onScroll:P,thumb:E=je,track:R=Ve,arrows:I=Qe,dragScroll:_=et,autoHide:q=tt,showScrollbar:X=!0,detectInnerScroll:Ee=!1},Ce)=>{let He=(0,e.useRef)({});(0,e.useEffect)(()=>{He.current={children:g,onScroll:P,showScrollbar:X,thumb:E,track:R,arrows:I,dragScroll:_,autoHide:q}});let te=(0,e.useRef)(null),n=(0,e.useRef)(null),O=(0,e.useRef)(null),K=(0,e.useRef)(null),De=(0,e.useRef)(null),k=(0,e.useRef)(null),[oe,x]=(0,e.useState)(!1),[N,he]=(0,e.useState)(!1),[ge,be]=(0,e.useState)(!1),[re,ke]=(0,e.useState)({y:0,scrollTop:0}),[U,Le]=(0,e.useState)(0),[Re,ve]=(0,e.useState)(0),[ne,ye]=(0,e.useState)(!1),[W,xe]=(0,e.useState)(!1),[Z,Ie]=(0,e.useState)({x:0,y:0,scrollTop:0,scrollLeft:0}),[nt,lt]=(0,e.useState)(null),[j,V]=(0,e.useState)(null),[it,Ae]=(0,e.useState)(!1),z=(0,e.useRef)(null),[Te,we]=(0,e.useState)(!1),B=(0,e.useRef)(null),Y=(0,e.useRef)(null),$=(0,e.useRef)(null),T=(0,e.useMemo)(()=>{let t=E.color??"#606060";return{width:E.width??8,minHeight:E.minHeight??50,radius:E.radius??(E.width??8)/2,color:t,opacity:E.opacity??.6,hoverColor:E.hoverColor??t,hoverOpacity:E.hoverOpacity??1}},[E]),a=(0,e.useMemo)(()=>({width:R.width??16,color:R.color??"rgba(128, 128, 128, 0.1)",visible:R.visible??!0,alignment:R.alignment??"center",radius:R.radius??T.radius??4,margin:R.margin??4}),[R,T.radius]),H=(0,e.useMemo)(()=>{let t=I.color??"#808080";return{visible:I.visible??!1,step:I.step??50,color:t,opacity:I.opacity??.6,hoverColor:I.hoverColor??t,hoverOpacity:I.hoverOpacity??1}},[I]),le=(0,e.useMemo)(()=>({enabled:_.enabled??!0,excludeClasses:_.excludeClasses??[],excludeSelectors:_.excludeSelectors??[]}),[_]),c=(0,e.useMemo)(()=>({enabled:q.enabled??!0,delay:q.delay??1500,delayOnWheel:q.delayOnWheel??700}),[q]),h=T.width,Oe=a.width,ie=T.minHeight,L=H.visible,Q=H.step,A=(0,e.useCallback)(()=>{if(!n.current)return;let t=document.activeElement;t&&n.current.contains(t)&&t!==n.current||n.current.focus()},[]);(0,e.useImperativeHandle)(Ce,()=>({getScrollContainer:()=>n.current,scrollTo:t=>{n.current&&n.current.scrollTo(t)},get scrollTop(){return n.current?.scrollTop||0},get scrollHeight(){return n.current?.scrollHeight||0},get clientHeight(){return n.current?.clientHeight||0}}),[]);let d=(0,e.useCallback)(()=>{if(k.current){let o=k.current;if(document.contains(o)&&o.scrollHeight>o.clientHeight+2)return o;k.current=null}if(!n.current)return null;if(O.current&&O.current.scrollHeight>n.current.clientHeight+2)return k.current=n.current,n.current;if(!Ee)return null;let t=n.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let o of t){let r=o;if(r!==n.current&&r.classList.contains("overlay-scrollbar-container"))continue;let l=r.parentElement,i=!1;for(;l&&l!==n.current;){if(l.classList.contains("overlay-scrollbar-container")&&l!==n.current){i=!0;break}l=l.parentElement}if(!i&&r.scrollHeight>r.clientHeight+2)return k.current=r,r}return null},[]),F=(0,e.useCallback)(()=>d()!==null,[d]),b=(0,e.useCallback)(()=>{B.current&&(clearTimeout(B.current),B.current=null)},[]),Ne=(0,e.useCallback)(()=>{Y.current&&(clearTimeout(Y.current),Y.current=null)},[]),$e=(0,e.useCallback)(()=>{$.current&&(clearTimeout($.current),$.current=null)},[]),v=(0,e.useCallback)(t=>{c.enabled&&(b(),B.current=setTimeout(()=>{x(!1),B.current=null},t))},[b,c.enabled]),s=(0,e.useCallback)(()=>{let t=d();if(!t){x(!1),ye(!1),b();return}if(ye(!0),!K.current)return;c.enabled||(x(!0),b());let o=t.clientHeight,r=t.scrollHeight,l=t.scrollTop,i=0;if(te.current){let ee=window.getComputedStyle(te.current),Se=parseFloat(ee.paddingTop)||0,Me=parseFloat(ee.paddingBottom)||0;i=Se+Me}let u=L?h*2+a.margin*4:a.margin*2,w=o-u+i,y=o/r,p=Math.max(w*y,ie),J=r-o,C=w-p,de=J>0?l/J*C:0;Le(p),ve(de)},[d,b,L,h,ie,c.enabled]),Pe=(0,e.useCallback)(t=>{t.preventDefault(),t.stopPropagation();let o=d();o&&(he(!0),ke({y:t.clientY,scrollTop:o.scrollTop}),b(),x(!0),A())},[d,b,A]),ce=(0,e.useCallback)(t=>{if(!N)return;let o=d();if(!o)return;let r=o.clientHeight,i=o.scrollHeight-r,u=t.clientY-re.y,w=r-U,y=u/w*i,p=Math.max(0,Math.min(i,re.scrollTop+y));o.scrollTop=p,s()},[N,re,U,s,d]),ae=(0,e.useCallback)(()=>{he(!1),F()&&v(c.delay)},[F,v,c.delay]),Fe=(0,e.useCallback)(t=>{if(!K.current)return;let r=K.current.getBoundingClientRect(),l=t.clientY-r.top,i=d();if(!i)return;let u=i.clientHeight,w=i.scrollHeight,p=l/u*(w-u);i.scrollTop=Math.max(0,Math.min(w-u,p)),s(),x(!0),v(c.delay),A()},[s,v,c.delay,d,A]),_e=(0,e.useCallback)(t=>{if(t.preventDefault(),t.stopPropagation(),!n.current)return;let o=Math.max(0,n.current.scrollTop-Q);n.current.scrollTop=o,s(),x(!0),v(c.delay),A()},[s,v,Q,c.delay,A]),qe=(0,e.useCallback)(t=>{if(t.preventDefault(),t.stopPropagation(),!n.current||!O.current)return;let o=n.current,l=O.current.scrollHeight-o.clientHeight,i=Math.min(l,o.scrollTop+Q);o.scrollTop=i,s(),x(!0),v(c.delay),A()},[s,v,Q,c.delay,A]),Ue=(0,e.useCallback)(t=>{if(!le.enabled)return;let o=t.target;if(me(o,le)||t.button!==0)return;let r=d();r&&(r.scrollHeight<=r.clientHeight||(t.preventDefault(),xe(!0),Ie({x:t.clientX,y:t.clientY,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft||0}),b()))},[le,me,d,b]),se=(0,e.useCallback)(t=>{if(!W)return;let o=d();if(!o)return;let r=Z.x-t.clientX,l=Z.y-t.clientY;if(Math.abs(l)<3&&Math.abs(r)<3)return;x(!0);let i=Math.max(0,Math.min(o.scrollHeight-o.clientHeight,Z.scrollTop+l));o.scrollTop=i,s()},[W,Z,d,s]),ue=(0,e.useCallback)(()=>{xe(!1),F()&&v(c.delay)},[F,v,c.delay]);(0,e.useEffect)(()=>{let t=u=>{s(),b(),x(!0);let w=Te?c.delayOnWheel:c.delay;v(w),P&&P(u)},o=()=>{we(!0),z.current&&clearTimeout(z.current),z.current=setTimeout(()=>{we(!1)},300),b(),$e(),$.current=setTimeout(()=>{x(!0),$.current=null},50)},r=[],l=d();l&&r.push(l);let i=n.current;return i&&!l&&(r.push(i),i.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(w=>{let y=w;if(y!==i&&y.classList.contains("overlay-scrollbar-container"))return;let p=y.parentElement;for(;p&&p!==i;){if(p.classList.contains("overlay-scrollbar-container")&&p!==i)return;p=p.parentElement}r.push(y)})),r.forEach(u=>{u.addEventListener("scroll",t,{passive:!0}),u.addEventListener("wheel",o,{passive:!0})}),()=>{r.forEach(u=>{u.removeEventListener("scroll",t),u.removeEventListener("wheel",o)}),z.current&&clearTimeout(z.current),$.current&&clearTimeout($.current)}},[d,s,P,b,v,c,Te]),(0,e.useEffect)(()=>{let t=r=>{let l=d();if(!l)return;let{key:i}=r,{scrollTop:u,scrollHeight:w,clientHeight:y}=l,p=w-y,J=50,C=null;switch(i){case"ArrowUp":r.preventDefault(),C=Math.max(0,u-J);break;case"ArrowDown":r.preventDefault(),C=Math.min(p,u+J);break;case"PageUp":r.preventDefault(),C=Math.max(0,u-y);break;case"PageDown":r.preventDefault(),C=Math.min(p,u+y);break;case"Home":r.preventDefault(),C=0;break;case"End":r.preventDefault(),C=p;break;default:return}if(C!==null){let de=C/p,ee=L?h*2+a.margin*4:a.margin*2,We=(y-ee-U)*de;ve(We),l.scrollTop=C,b(),x(!0),v(c.delay)}},o=n.current;if(o)return o.addEventListener("keydown",t),()=>{o.removeEventListener("keydown",t)}},[d,L,h,a.margin,U,b,v,c.delay]),(0,e.useEffect)(()=>{if(W)return document.addEventListener("mousemove",se),document.addEventListener("mouseup",ue),()=>{document.removeEventListener("mousemove",se),document.removeEventListener("mouseup",ue)}},[W,se,ue]),(0,e.useEffect)(()=>{if(N)return document.addEventListener("mousemove",ce),document.addEventListener("mouseup",ae),()=>{document.removeEventListener("mousemove",ce),document.removeEventListener("mouseup",ae)}},[N,ce,ae]),(0,e.useEffect)(()=>{s();let t=setTimeout(()=>{s()},100);return()=>clearTimeout(t)},[s]),(0,e.useLayoutEffect)(()=>{Ae(!0),s(),!c.enabled&&F()&&x(!0)},[F,s,c.enabled]),(0,e.useEffect)(()=>{let t=new ResizeObserver(()=>{s()}),o=[];return n.current&&o.push(n.current),O.current&&o.push(O.current),k.current&&document.contains(k.current)&&o.push(k.current),o.forEach(r=>{t.observe(r)}),()=>t.disconnect()},[s]),(0,e.useEffect)(()=>{if(!n.current)return;let t=new MutationObserver(()=>{k.current=null,s()});return t.observe(n.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>t.disconnect()},[s]);let G=Math.max(Oe,h);return(0,e.useEffect)(()=>{let t="overlay-scrollbar-webkit-hide",o=document.getElementById(t);o&&o.remove();let r=document.createElement("style");return r.id=t,r.textContent=`
|
|
1
|
+
"use strict";var pe=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Be=Object.getOwnPropertyNames;var Ye=Object.prototype.hasOwnProperty;var Ge=(m,f)=>{for(var S in f)pe(m,S,{get:f[S],enumerable:!0})},Je=(m,f,S,M)=>{if(f&&typeof f=="object"||typeof f=="function")for(let b of Be(f))!Ye.call(m,b)&&b!==S&&pe(m,b,{get:()=>f[b],enumerable:!(M=ze(f,b))||M.enumerable});return m};var Xe=m=>Je(pe({},"__esModule",{value:!0}),m);var rt={};Ge(rt,{OverlayScrollbar:()=>fe,default:()=>fe});module.exports=Xe(rt);var e=require("react");var Ke=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],me=(m,f)=>{let S=m.tagName.toLowerCase(),M=["text","password","email","number","search","tel","url","checkbox","radio"];if(S==="input"){let b=m.type;return M.includes(b)}if(["textarea","select","button"].includes(S)||["svg","path","circle","rect","line","polygon","polyline"].includes(S)||m.getAttribute("contenteditable")==="true")return!0;if(f?.excludeSelectors){for(let b of f.excludeSelectors)if(m.matches(b))return!0}return Ze(m,f)},Ze=(m,f)=>{let S=[...Ke,...f?.excludeClasses||[]],M=m,b=0,P=5;for(;M&&b<=P;){if(S.some(E=>M.classList.contains(E)))return!0;if(M.classList.contains("MuiDialogContent-root"))break;M=M.parentElement,b++}return!1};var D=require("react/jsx-runtime"),je={},Ve={},Qe={},et={},tt={},ot=(0,e.forwardRef)(({className:m="",style:f={},containerStyle:S={},contentStyle:M={},children:b,onScroll:P,thumb:E=je,track:R=Ve,arrows:I=Qe,dragScroll:_=et,autoHide:W=tt,showScrollbar:X=!0,detectInnerScroll:Ce=!1},He)=>{let De=(0,e.useRef)({});(0,e.useEffect)(()=>{De.current={children:b,onScroll:P,showScrollbar:X,thumb:E,track:R,arrows:I,dragScroll:_,autoHide:W}});let te=(0,e.useRef)(null),n=(0,e.useRef)(null),A=(0,e.useRef)(null),K=(0,e.useRef)(null),ke=(0,e.useRef)(null),k=(0,e.useRef)(null),[oe,x]=(0,e.useState)(!1),[N,he]=(0,e.useState)(!1),[ge,be]=(0,e.useState)(!1),[re,Le]=(0,e.useState)({y:0,scrollTop:0}),[q,Re]=(0,e.useState)(0),[Ie,ve]=(0,e.useState)(0),[ne,ye]=(0,e.useState)(!1),[U,xe]=(0,e.useState)(!1),[Z,Oe]=(0,e.useState)({x:0,y:0,scrollTop:0,scrollLeft:0}),[nt,lt]=(0,e.useState)(null),[j,V]=(0,e.useState)(null),[it,Ae]=(0,e.useState)(!1),z=(0,e.useRef)(null),[Te,we]=(0,e.useState)(!1),B=(0,e.useRef)(null),Y=(0,e.useRef)(null),$=(0,e.useRef)(null),T=(0,e.useMemo)(()=>{let t=E.color??"#606060";return{width:E.width??8,minHeight:E.minHeight??50,radius:E.radius??(E.width??8)/2,color:t,opacity:E.opacity??.6,hoverColor:E.hoverColor??t,hoverOpacity:E.hoverOpacity??1}},[E]),a=(0,e.useMemo)(()=>({width:R.width??16,color:R.color??"rgba(128, 128, 128, 0.1)",visible:R.visible??!0,alignment:R.alignment??"center",radius:R.radius??T.radius??4,margin:R.margin??4}),[R,T.radius]),H=(0,e.useMemo)(()=>{let t=I.color??"#808080";return{visible:I.visible??!1,step:I.step??50,color:t,opacity:I.opacity??.6,hoverColor:I.hoverColor??t,hoverOpacity:I.hoverOpacity??1}},[I]),le=(0,e.useMemo)(()=>({enabled:_.enabled??!0,excludeClasses:_.excludeClasses??[],excludeSelectors:_.excludeSelectors??[]}),[_]),c=(0,e.useMemo)(()=>({enabled:W.enabled??!0,delay:W.delay??1500,delayOnWheel:W.delayOnWheel??700}),[W]),h=T.width,Ne=a.width,ie=T.minHeight,L=H.visible,Q=H.step,O=(0,e.useCallback)(()=>{if(!n.current)return;let t=document.activeElement;t&&n.current.contains(t)&&t!==n.current||n.current.focus()},[]);(0,e.useImperativeHandle)(He,()=>({getScrollContainer:()=>n.current,scrollTo:t=>{n.current&&n.current.scrollTo(t)},get scrollTop(){return n.current?.scrollTop||0},get scrollHeight(){return n.current?.scrollHeight||0},get clientHeight(){return n.current?.clientHeight||0}}),[]);let d=(0,e.useCallback)(()=>{if(k.current){let o=k.current;if(document.contains(o)&&o.scrollHeight>o.clientHeight+2)return o;k.current=null}if(!n.current)return null;if(A.current&&A.current.scrollHeight>n.current.clientHeight+2)return k.current=n.current,n.current;if(!Ce)return null;let t=n.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let o of t){let r=o;if(r!==n.current&&r.classList.contains("overlay-scrollbar-container"))continue;let l=r.parentElement,i=!1;for(;l&&l!==n.current;){if(l.classList.contains("overlay-scrollbar-container")&&l!==n.current){i=!0;break}l=l.parentElement}if(!i&&r.scrollHeight>r.clientHeight+2)return k.current=r,r}return null},[]),F=(0,e.useCallback)(()=>d()!==null,[d]),v=(0,e.useCallback)(()=>{B.current&&(clearTimeout(B.current),B.current=null)},[]),$e=(0,e.useCallback)(()=>{Y.current&&(clearTimeout(Y.current),Y.current=null)},[]),Se=(0,e.useCallback)(()=>{$.current&&(clearTimeout($.current),$.current=null)},[]),g=(0,e.useCallback)(t=>{c.enabled&&(v(),B.current=setTimeout(()=>{x(!1),B.current=null},t))},[v,c.enabled]),s=(0,e.useCallback)(()=>{let t=d();if(!t){x(!1),ye(!1),v();return}if(ye(!0),!K.current)return;c.enabled||(x(!0),v());let o=t.clientHeight,r=t.scrollHeight,l=t.scrollTop,i=0;if(te.current){let ee=window.getComputedStyle(te.current),Me=parseFloat(ee.paddingTop)||0,Ee=parseFloat(ee.paddingBottom)||0;i=Me+Ee}let u=L?h*2+a.margin*4:a.margin*2,w=o-u+i,y=o/r,p=Math.max(w*y,ie),J=r-o,C=w-p,de=J>0?l/J*C:0;Re(p),ve(de)},[d,v,L,h,ie,c.enabled]),Pe=(0,e.useCallback)(t=>{t.preventDefault(),t.stopPropagation();let o=d();o&&(he(!0),Le({y:t.clientY,scrollTop:o.scrollTop}),v(),x(!0),O())},[d,v,O]),ce=(0,e.useCallback)(t=>{if(!N)return;let o=d();if(!o)return;let r=o.clientHeight,i=o.scrollHeight-r,u=t.clientY-re.y,w=r-q,y=u/w*i,p=Math.max(0,Math.min(i,re.scrollTop+y));o.scrollTop=p,s()},[N,re,q,s,d]),ae=(0,e.useCallback)(()=>{he(!1),F()&&g(c.delay)},[F,g,c.delay]),Fe=(0,e.useCallback)(t=>{if(!K.current)return;let r=K.current.getBoundingClientRect(),l=t.clientY-r.top,i=d();if(!i)return;let u=i.clientHeight,w=i.scrollHeight,p=l/u*(w-u);i.scrollTop=Math.max(0,Math.min(w-u,p)),s(),x(!0),g(c.delay),O()},[s,g,c.delay,d,O]),_e=(0,e.useCallback)(t=>{if(t.preventDefault(),t.stopPropagation(),!n.current)return;let o=Math.max(0,n.current.scrollTop-Q);n.current.scrollTop=o,s(),x(!0),g(c.delay),O()},[s,g,Q,c.delay,O]),We=(0,e.useCallback)(t=>{if(t.preventDefault(),t.stopPropagation(),!n.current||!A.current)return;let o=n.current,l=A.current.scrollHeight-o.clientHeight,i=Math.min(l,o.scrollTop+Q);o.scrollTop=i,s(),x(!0),g(c.delay),O()},[s,g,Q,c.delay,O]),qe=(0,e.useCallback)(t=>{if(!le.enabled)return;let o=t.target;if(me(o,le)||t.button!==0)return;let r=d();r&&(r.scrollHeight<=r.clientHeight||(t.preventDefault(),xe(!0),Oe({x:t.clientX,y:t.clientY,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft||0}),v()))},[le,me,d,v]),se=(0,e.useCallback)(t=>{if(!U)return;let o=d();if(!o)return;let r=Z.x-t.clientX,l=Z.y-t.clientY;if(Math.abs(l)<3&&Math.abs(r)<3)return;x(!0);let i=Math.max(0,Math.min(o.scrollHeight-o.clientHeight,Z.scrollTop+l));o.scrollTop=i,s()},[U,Z,d,s]),ue=(0,e.useCallback)(()=>{xe(!1),F()&&g(c.delay)},[F,g,c.delay]);(0,e.useEffect)(()=>{let t=u=>{s(),v(),x(!0),Se();let w=Te?c.delayOnWheel:c.delay;g(w),P&&P(u)},o=()=>{we(!0),z.current&&clearTimeout(z.current),z.current=setTimeout(()=>{we(!1)},300),Se(),$.current=setTimeout(()=>{x(!0),$.current=null,g(c.delayOnWheel)},50)},r=[],l=d();l&&r.push(l);let i=n.current;return i&&!l&&(r.push(i),i.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(w=>{let y=w;if(y!==i&&y.classList.contains("overlay-scrollbar-container"))return;let p=y.parentElement;for(;p&&p!==i;){if(p.classList.contains("overlay-scrollbar-container")&&p!==i)return;p=p.parentElement}r.push(y)})),r.forEach(u=>{u.addEventListener("scroll",t,{passive:!0}),u.addEventListener("wheel",o,{passive:!0})}),()=>{r.forEach(u=>{u.removeEventListener("scroll",t),u.removeEventListener("wheel",o)}),z.current&&clearTimeout(z.current),$.current&&clearTimeout($.current)}},[d,s,P,v,g,c,Te]),(0,e.useEffect)(()=>{let t=r=>{let l=d();if(!l)return;let{key:i}=r,{scrollTop:u,scrollHeight:w,clientHeight:y}=l,p=w-y,J=50,C=null;switch(i){case"ArrowUp":r.preventDefault(),C=Math.max(0,u-J);break;case"ArrowDown":r.preventDefault(),C=Math.min(p,u+J);break;case"PageUp":r.preventDefault(),C=Math.max(0,u-y);break;case"PageDown":r.preventDefault(),C=Math.min(p,u+y);break;case"Home":r.preventDefault(),C=0;break;case"End":r.preventDefault(),C=p;break;default:return}if(C!==null){let de=C/p,ee=L?h*2+a.margin*4:a.margin*2,Ue=(y-ee-q)*de;ve(Ue),l.scrollTop=C,v(),x(!0),g(c.delay)}},o=n.current;if(o)return o.addEventListener("keydown",t),()=>{o.removeEventListener("keydown",t)}},[d,L,h,a.margin,q,v,g,c.delay]),(0,e.useEffect)(()=>{if(U)return document.addEventListener("mousemove",se),document.addEventListener("mouseup",ue),()=>{document.removeEventListener("mousemove",se),document.removeEventListener("mouseup",ue)}},[U,se,ue]),(0,e.useEffect)(()=>{if(N)return document.addEventListener("mousemove",ce),document.addEventListener("mouseup",ae),()=>{document.removeEventListener("mousemove",ce),document.removeEventListener("mouseup",ae)}},[N,ce,ae]),(0,e.useEffect)(()=>{s();let t=setTimeout(()=>{s()},100);return()=>clearTimeout(t)},[s]),(0,e.useLayoutEffect)(()=>{Ae(!0),s(),!c.enabled&&F()&&x(!0)},[F,s,c.enabled]),(0,e.useEffect)(()=>{let t=new ResizeObserver(()=>{s()}),o=[];return n.current&&o.push(n.current),A.current&&o.push(A.current),k.current&&document.contains(k.current)&&o.push(k.current),o.forEach(r=>{t.observe(r)}),()=>t.disconnect()},[s]),(0,e.useEffect)(()=>{if(!n.current)return;let t=new MutationObserver(()=>{k.current=null,s()});return t.observe(n.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>t.disconnect()},[s]);let G=Math.max(Ne,h);return(0,e.useEffect)(()=>{let t="overlay-scrollbar-webkit-hide",o=document.getElementById(t);o&&o.remove();let r=document.createElement("style");return r.id=t,r.textContent=`
|
|
2
2
|
.overlay-scrollbar-container::-webkit-scrollbar {
|
|
3
3
|
display: none !important;
|
|
4
4
|
width: 0 !important;
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
19
19
|
outline-offset: -2px;
|
|
20
20
|
}
|
|
21
|
-
`,document.head.appendChild(r),()=>{let l=document.getElementById(t);l&&l.remove()}},[]),(0,D.jsxs)("div",{ref:te,className:`overlay-scrollbar-wrapper ${m}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...f},children:[(0,D.jsx)("div",{ref:n,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:
|
|
21
|
+
`,document.head.appendChild(r),()=>{let l=document.getElementById(t);l&&l.remove()}},[]),(0,D.jsxs)("div",{ref:te,className:`overlay-scrollbar-wrapper ${m}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...f},children:[(0,D.jsx)("div",{ref:n,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:qe,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:U?"none":"auto",...S},children:(0,D.jsx)("div",{ref:A,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...M},children:b})}),X&&ne&&(0,D.jsxs)("div",{ref:K,className:"overlay-scrollbar-track",onMouseEnter:()=>{v(),Y.current=setTimeout(()=>{x(!0),Y.current=null},100)},onMouseLeave:()=>{$e(),N||g(c.delay)},style:{position:"absolute",top:0,right:0,width:`${G}px`,height:"100%",opacity:oe?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[a.visible&&(0,D.jsx)("div",{className:"overlay-scrollbar-track-background",onClick:t=>{t.preventDefault(),t.stopPropagation(),Fe(t)},style:{position:"absolute",top:L?`${T.width+a.margin*2}px`:`${a.margin}px`,right:a.alignment==="right"?"0px":`${(G-T.width)/2}px`,width:`${T.width}px`,height:L?`calc(100% - ${T.width*2+a.margin*4}px)`:`calc(100% - ${a.margin*2}px)`,backgroundColor:a.color,borderRadius:`${a.radius}px`,cursor:"pointer"}}),(0,D.jsx)("div",{ref:ke,className:"overlay-scrollbar-thumb",onMouseDown:Pe,onMouseEnter:()=>be(!0),onMouseLeave:()=>be(!1),style:{position:"absolute",top:`${(L?h+a.margin*2:a.margin)+Ie}px`,right:a.alignment==="right"?"0px":`${(G-h)/2}px`,width:`${h}px`,height:`${Math.max(q,ie)}px`,backgroundColor:ge||N?T.hoverColor:T.color,opacity:ge||N?T.hoverOpacity:T.opacity,borderRadius:`${T.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),X&&ne&&L&&(0,D.jsx)("div",{className:"overlay-scrollbar-up-arrow",onClick:_e,onMouseEnter:()=>V("up"),onMouseLeave:()=>V(null),style:{position:"absolute",top:`${a.margin}px`,right:a.alignment==="right"?"0px":`${(G-h)/2}px`,width:`${h}px`,height:`${h}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(h*.75,8)}px`,color:j==="up"?H.hoverColor:H.color,userSelect:"none",zIndex:1001,opacity:oe?j==="up"?H.hoverOpacity:H.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),X&&ne&&L&&(0,D.jsx)("div",{className:"overlay-scrollbar-down-arrow",onClick:We,onMouseEnter:()=>V("down"),onMouseLeave:()=>V(null),style:{position:"absolute",bottom:`${a.margin}px`,right:a.alignment==="right"?"0px":`${(G-h)/2}px`,width:`${h}px`,height:`${h}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(h*.75,8)}px`,color:j==="down"?H.hoverColor:H.color,userSelect:"none",zIndex:1001,opacity:oe?j==="down"?H.hoverOpacity:H.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),fe=ot;
|
|
22
22
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../index.ts", "../src/OverlayScrollbar.tsx", "../src/utils/dragScrollUtils.ts"],
|
|
4
|
-
"sourcesContent": ["export { default } from \"./src/OverlayScrollbar\";\nexport { default as OverlayScrollbar } from \"./src/OverlayScrollbar\";\nexport type {\n OverlayScrollbarRef,\n OverlayScrollbarProps,\n ThumbConfig,\n TrackConfig,\n ArrowsConfig,\n DragScrollConfig,\n AutoHideConfig,\n} from \"./src/types\";\n", "/**\n * OverlayScrollbar.tsx\n *\n * @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, {\n useRef,\n useEffect,\n useState,\n useCallback,\n useMemo,\n ReactNode,\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n} from \"react\";\nimport { isTextInputElement } from \"./utils/dragScrollUtils\";\n\n// thumb \uAD00\uB828 \uC124\uC815\nexport interface ThumbConfig {\n width?: number; // \uC378\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC00: 8px)\n minHeight?: number; // \uC378\uC758 \uCD5C\uC18C \uB192\uC774 (\uAE30\uBCF8\uAC00: 50px)\n radius?: number; // \uC378\uC758 border-radius (\uAE30\uBCF8\uAC00: width / 2)\n color?: string; // \uC378 \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#606060\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// track \uAD00\uB828 \uC124\uC815\nexport interface TrackConfig {\n width?: number; // \uD638\uBC84 \uC601\uC5ED\uC778 \uD2B8\uB799\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC12: 16px)\n color?: string; // \uD2B8\uB799 \uBC30\uACBD \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: \"rgba(128, 128, 128, 0.1)\")\n visible?: boolean; // \uD2B8\uB799 \uBC30\uACBD \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n alignment?: \"center\" | \"right\"; // \uD2B8\uB799 \uB0B4\uBD80 \uC815\uB82C (\uAE30\uBCF8\uAC00: \"center\")\n radius?: number; // \uD2B8\uB799 \uBC30\uACBD\uC758 border-radius (\uAE30\uBCF8\uAC12: thumb.radius \uB610\uB294 4px)\n margin?: number; // \uD2B8\uB799 \uC0C1\uD558 \uB9C8\uC9C4 (\uAE30\uBCF8\uAC12: 4px)\n}\n\n// arrows \uAD00\uB828 \uC124\uC815\nexport interface ArrowsConfig {\n visible?: boolean; // \uD654\uC0B4\uD45C \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC00: false)\n step?: number; // \uD654\uC0B4\uD45C \uD074\uB9AD\uC2DC \uC2A4\uD06C\uB864 \uC774\uB3D9 \uAC70\uB9AC (\uAE30\uBCF8\uAC00: 50px)\n color?: string; // \uD654\uC0B4\uD45C \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#808080\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\nexport interface DragScrollConfig {\n enabled?: boolean; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n excludeClasses?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778, \uCD5C\uB300 5\uB2E8\uACC4)\n excludeSelectors?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 CSS \uC140\uB809\uD130\uB4E4 (element.matches() \uC0AC\uC6A9)\n}\n\n// \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\nexport interface AutoHideConfig {\n enabled?: boolean; // \uC790\uB3D9 \uC228\uAE40 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n delay?: number; // \uAE30\uBCF8 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC12: 1500ms)\n delayOnWheel?: number; // \uD720 \uC2A4\uD06C\uB864 \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC00: 700ms)\n}\n\nexport interface OverlayScrollbarProps {\n className?: string;\n style?: React.CSSProperties; // wrapper div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n containerStyle?: React.CSSProperties; // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n contentStyle?: React.CSSProperties; // \uB0B4\uBD80 content div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n children: ReactNode;\n onScroll?: (event: Event) => void;\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb?: ThumbConfig; // \uC378 \uAD00\uB828 \uC124\uC815\n track?: TrackConfig; // \uD2B8\uB799 \uAD00\uB828 \uC124\uC815\n arrows?: ArrowsConfig; // \uD654\uC0B4\uD45C\uB4E4 \uAD00\uB828 \uC124\uC815\n dragScroll?: DragScrollConfig; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\n autoHide?: AutoHideConfig; // \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar?: boolean; // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n detectInnerScroll?: boolean; // children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uAC10\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: false, \uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1\uC5D0 \uC0AC\uC6A9)\n}\n\n// OverlayScrollbar\uAC00 \uB178\uCD9C\uD560 \uBA54\uC11C\uB4DC\uB4E4\nexport interface OverlayScrollbarRef {\n getScrollContainer: () => HTMLDivElement | null;\n scrollTo: (options: ScrollToOptions) => void;\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// \uAE30\uBCF8 \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC744 \uCEF4\uD3EC\uB10C\uD2B8 \uC678\uBD80\uC5D0 \uC0C1\uC218\uB85C \uC120\uC5B8 (\uC7AC\uB80C\uB354\uB9C1 \uC2DC \uB3D9\uC77C\uD55C \uCC38\uC870 \uC720\uC9C0)\nconst DEFAULT_THUMB_CONFIG: ThumbConfig = {};\nconst DEFAULT_TRACK_CONFIG: TrackConfig = {};\nconst DEFAULT_ARROWS_CONFIG: ArrowsConfig = {};\nconst DEFAULT_DRAG_SCROLL_CONFIG: DragScrollConfig = {};\nconst DEFAULT_AUTO_HIDE_CONFIG: AutoHideConfig = {};\n\nconst OverlayScrollbar = forwardRef<OverlayScrollbarRef, OverlayScrollbarProps>(\n (\n {\n className = \"\",\n style = {},\n containerStyle = {},\n contentStyle = {},\n children,\n onScroll,\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb = DEFAULT_THUMB_CONFIG,\n track = DEFAULT_TRACK_CONFIG,\n arrows = DEFAULT_ARROWS_CONFIG,\n dragScroll = DEFAULT_DRAG_SCROLL_CONFIG,\n autoHide = DEFAULT_AUTO_HIDE_CONFIG,\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar = true,\n detectInnerScroll = false,\n },\n ref\n ) => {\n // props \uBCC0\uACBD \uCD94\uC801\uC6A9 ref\n const prevPropsRef = useRef<{\n children?: ReactNode;\n onScroll?: (event: Event) => void;\n showScrollbar?: boolean;\n thumb?: ThumbConfig;\n track?: TrackConfig;\n arrows?: ArrowsConfig;\n dragScroll?: DragScrollConfig;\n autoHide?: AutoHideConfig;\n }>({});\n\n // \uB80C\uB354\uB9C1 \uC2DC \uC5B4\uB5A4 prop\uC774 \uBCC0\uACBD\uB418\uC5C8\uB294\uC9C0 \uCCB4\uD06C\n useEffect(() => {\n // \uD604\uC7AC props \uC800\uC7A5\n prevPropsRef.current = {\n children,\n onScroll,\n showScrollbar,\n thumb,\n track,\n arrows,\n dragScroll,\n autoHide,\n };\n });\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLDivElement>(null);\n\n // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uCE90\uC2F1\uC6A9 ref (\uC131\uB2A5 \uCD5C\uC801\uD654)\n const cachedScrollContainerRef = useRef<HTMLElement | null>(null);\n\n // \uAE30\uBCF8 \uC0C1\uD0DC\uB4E4\n const [scrollbarVisible, setScrollbarVisible] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isThumbHovered, setIsThumbHovered] = useState(false);\n const [dragStart, setDragStart] = useState({ y: 0, scrollTop: 0 });\n const [thumbHeight, setThumbHeight] = useState(0);\n const [thumbTop, setThumbTop] = useState(0);\n const [hasScrollableContent, setHasScrollableContent] = useState(false);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC0C1\uD0DC\n const [isDragScrolling, setIsDragScrolling] = useState(false);\n const [dragScrollStart, setDragScrollStart] = useState({\n x: 0,\n y: 0,\n scrollTop: 0,\n scrollLeft: 0,\n });\n const [activeArrow, setActiveArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n const [hoveredArrow, setHoveredArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n\n // \uCD08\uAE30 \uB9C8\uC6B4\uD2B8 \uC2DC hover \uBC29\uC9C0\uC6A9\n const [isInitialized, setIsInitialized] = useState(false);\n\n // \uD720 \uC2A4\uD06C\uB864 \uAC10\uC9C0\uC6A9\n const wheelTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const [isWheelScrolling, setIsWheelScrolling] = useState(false);\n\n // \uC228\uAE40 \uD0C0\uC774\uBA38\n const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const hoverEnterTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uD45C\uC2DC \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const wheelShowTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC5D0 \uAE30\uBCF8\uAC12 \uC124\uC815\n const finalThumbConfig = useMemo(() => {\n const baseColor = thumb.color ?? \"#606060\";\n return {\n width: thumb.width ?? 8,\n minHeight: thumb.minHeight ?? 50,\n radius: thumb.radius ?? (thumb.width ?? 8) / 2,\n color: baseColor,\n opacity: thumb.opacity ?? 0.6,\n hoverColor: thumb.hoverColor ?? baseColor,\n hoverOpacity: thumb.hoverOpacity ?? 1.0,\n };\n }, [thumb]);\n\n const finalTrackConfig = useMemo(\n () => ({\n width: track.width ?? 16,\n color: track.color ?? \"rgba(128, 128, 128, 0.1)\",\n visible: track.visible ?? true,\n alignment: track.alignment ?? \"center\",\n radius: track.radius ?? finalThumbConfig.radius ?? 4,\n margin: track.margin ?? 4,\n }),\n [track, finalThumbConfig.radius]\n );\n\n const finalArrowsConfig = useMemo(() => {\n const baseColor = arrows.color ?? \"#808080\";\n return {\n visible: arrows.visible ?? false,\n step: arrows.step ?? 50,\n color: baseColor,\n opacity: arrows.opacity ?? 0.6,\n hoverColor: arrows.hoverColor ?? baseColor,\n hoverOpacity: arrows.hoverOpacity ?? 1.0,\n };\n }, [arrows]);\n\n const finalDragScrollConfig = useMemo(\n () => ({\n enabled: dragScroll.enabled ?? true,\n excludeClasses: dragScroll.excludeClasses ?? [],\n excludeSelectors: dragScroll.excludeSelectors ?? [],\n }),\n [dragScroll]\n );\n\n const finalAutoHideConfig = useMemo(\n () => ({\n enabled: autoHide.enabled ?? true,\n delay: autoHide.delay ?? 1500,\n delayOnWheel: autoHide.delayOnWheel ?? 700,\n }),\n [autoHide]\n );\n\n // \uD638\uD658\uC131\uC744 \uC704\uD55C \uBCC0\uC218\uB4E4 (\uC790\uC8FC \uC0AC\uC6A9\uB418\uB294 \uBCC0\uC218\uB4E4\uB9CC \uC720\uC9C0)\n const finalThumbWidth = finalThumbConfig.width;\n const finalTrackWidth = finalTrackConfig.width;\n const thumbMinHeight = finalThumbConfig.minHeight;\n const showArrows = finalArrowsConfig.visible;\n const arrowStep = finalArrowsConfig.step;\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 \uD568\uC218 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n const maintainFocus = useCallback(() => {\n if (!containerRef.current) return;\n\n // \uD604\uC7AC \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C \uD655\uC778\n const activeElement = document.activeElement;\n\n // \uC624\uBC84\uB808\uC774 \uC2A4\uD06C\uB864\uBC14 \uB0B4\uBD80\uC5D0 \uC774\uBBF8 \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC788\uC73C\uBA74 \uC2A4\uD0B5\n if (\n activeElement &&\n containerRef.current.contains(activeElement) &&\n activeElement !== containerRef.current\n ) {\n return;\n }\n\n // \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC5C6\uAC70\uB098 \uC678\uBD80\uC5D0 \uC788\uC73C\uBA74 \uCEE8\uD14C\uC774\uB108\uC5D0 \uD3EC\uCEE4\uC2A4\n containerRef.current.focus();\n }, []);\n\n // ref\uB97C \uD1B5\uD574 \uC678\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uB3C4\uB85D \uD568\n useImperativeHandle(\n ref,\n () => ({\n getScrollContainer: () => containerRef.current,\n scrollTo: (options: ScrollToOptions) => {\n if (containerRef.current) {\n containerRef.current.scrollTo(options);\n }\n },\n get scrollTop() {\n return containerRef.current?.scrollTop || 0;\n },\n get scrollHeight() {\n return containerRef.current?.scrollHeight || 0;\n },\n get clientHeight() {\n return containerRef.current?.clientHeight || 0;\n },\n }),\n []\n );\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30 (\uCE90\uC2F1 \uCD5C\uC801\uD654)\n const findScrollableElement = useCallback((): HTMLElement | null => {\n // \uCE90\uC2DC\uB41C \uC694\uC18C\uAC00 \uC5EC\uC804\uD788 \uC720\uD6A8\uD55C\uC9C0 \uD655\uC778\n if (cachedScrollContainerRef.current) {\n const cached = cachedScrollContainerRef.current;\n // DOM\uC5D0 \uC5F0\uACB0\uB418\uC5B4 \uC788\uACE0 \uC5EC\uC804\uD788 \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C\uC9C0 \uD655\uC778\n if (\n document.contains(cached) &&\n cached.scrollHeight > cached.clientHeight + 2\n ) {\n return cached;\n }\n // \uCE90\uC2DC \uBB34\uD6A8\uD654\n cachedScrollContainerRef.current = null;\n }\n\n if (!containerRef.current) {\n return null;\n }\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC758 \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uD655\uC778\n if (\n contentRef.current &&\n contentRef.current.scrollHeight >\n containerRef.current.clientHeight + 2\n ) {\n cachedScrollContainerRef.current = containerRef.current;\n return containerRef.current;\n }\n\n // detectInnerScroll \uC635\uC158\uC774 \uD65C\uC131\uD654\uB41C \uACBD\uC6B0\uC5D0\uB9CC children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uCC3E\uAE30\n // (\uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1 \uB0B4\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864\uC744 \uCC98\uB9AC\uD558\uB294 \uACBD\uC6B0\uC5D0 \uC0AC\uC6A9)\n if (!detectInnerScroll) {\n return null;\n }\n\n // children \uC694\uC18C\uC5D0\uC11C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 \uC601\uC5ED\uC740 \uC81C\uC678 (\uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC2A4\uD0B5)\n const childScrollableElements =\n containerRef.current.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n\n for (const child of childScrollableElements) {\n const element = child as HTMLElement;\n\n // \uC774 \uC694\uC18C\uAC00 \uB2E4\uB978 OverlayScrollbar\uC758 container\uC778\uC9C0 \uD655\uC778\n // (\uC790\uC2E0\uC758 containerRef\uB294 \uC544\uB2C8\uC5B4\uC57C \uD558\uACE0, overlay-scrollbar-container \uD074\uB798\uC2A4\uB97C \uAC00\uC9C4 \uACBD\uC6B0)\n if (\n element !== containerRef.current &&\n element.classList.contains(\"overlay-scrollbar-container\")\n ) {\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 container\uC774\uBBC0\uB85C \uC2A4\uD0B5\n continue;\n }\n\n // \uC774 \uC694\uC18C\uC758 \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uB294\uC9C0 \uD655\uC778\n let parent: HTMLElement | null = element.parentElement;\n let isNestedInAnotherScrollbar = false;\n\n while (parent && parent !== containerRef.current) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== containerRef.current\n ) {\n // \uB2E4\uB978 OverlayScrollbar \uB0B4\uBD80\uC758 \uC694\uC18C\uC774\uBBC0\uB85C \uC2A4\uD0B5\n isNestedInAnotherScrollbar = true;\n break;\n }\n parent = parent.parentElement;\n }\n\n if (isNestedInAnotherScrollbar) {\n continue;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C\uC778\uC9C0 \uD655\uC778\n if (element.scrollHeight > element.clientHeight + 2) {\n cachedScrollContainerRef.current = element;\n return element;\n }\n }\n\n return null;\n }, []);\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uCCB4\uD06C\n const isScrollable = useCallback(() => {\n return findScrollableElement() !== null;\n }, [findScrollableElement]);\n\n // \uD0C0\uC774\uBA38 \uC815\uB9AC\n const clearHideTimer = useCallback(() => {\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const clearHoverEnterTimer = useCallback(() => {\n if (hoverEnterTimeoutRef.current) {\n clearTimeout(hoverEnterTimeoutRef.current);\n hoverEnterTimeoutRef.current = null;\n }\n }, []);\n\n const clearWheelShowTimer = useCallback(() => {\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n wheelShowTimeoutRef.current = null;\n }\n }, []);\n\n // \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 \uD0C0\uC774\uBA38\n const setHideTimer = useCallback(\n (delay: number) => {\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uD0C0\uC774\uBA38\uB97C \uC124\uC815\uD558\uC9C0 \uC54A\uC74C\n if (!finalAutoHideConfig.enabled) {\n return;\n }\n clearHideTimer();\n hideTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(false);\n hideTimeoutRef.current = null;\n }, delay);\n },\n [clearHideTimer, finalAutoHideConfig.enabled]\n );\n\n // \uC2A4\uD06C\uB864\uBC14 \uC704\uCE58 \uBC0F \uD06C\uAE30 \uC5C5\uB370\uC774\uD2B8\n const updateScrollbar = useCallback(() => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) {\n // \uC2A4\uD06C\uB864 \uBD88\uAC00\uB2A5\uD558\uBA74 \uC228\uAE40\n setScrollbarVisible(false);\n setHasScrollableContent(false);\n clearHideTimer();\n return;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20\uAC00 \uC788\uC74C\uC744 \uD45C\uC2DC\n setHasScrollableContent(true);\n\n if (!scrollbarRef.current) return;\n\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled) {\n setScrollbarVisible(true);\n clearHideTimer();\n }\n\n const containerHeight = scrollableElement.clientHeight;\n const contentHeight = scrollableElement.scrollHeight;\n const scrollTop = scrollableElement.scrollTop;\n\n // wrapper\uC758 \uD328\uB529 \uACC4\uC0B0 (\uC0C1\uD558 \uD328\uB529\uB9CC \uD544\uC694)\n let wrapperPaddingTopBottom = 0;\n if (wrapperRef.current) {\n const computedStyle = window.getComputedStyle(\n wrapperRef.current\n );\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom =\n parseFloat(computedStyle.paddingBottom) || 0;\n wrapperPaddingTopBottom = paddingTop + paddingBottom;\n }\n\n // \uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uACC4\uC0B0 (\uD654\uC0B4\uD45C + \uC704\uC544\uB798 \uB9C8\uC9C4, \uD654\uC0B4\uD45C \uC5C6\uC5B4\uB3C4 \uC704\uC544\uB798 \uB9C8\uC9C4)\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n\n // \uC378 \uB192\uC774 \uACC4\uC0B0 (\uC0AC\uC6A9\uC790 \uC124\uC815 \uCD5C\uC18C \uB192\uC774 \uC0AC\uC6A9, \uD654\uC0B4\uD45C \uACF5\uAC04 \uC81C\uC678, wrapper \uD328\uB529 \uCD94\uAC00)\n const availableHeight =\n containerHeight - arrowSpace + wrapperPaddingTopBottom;\n const scrollRatio = containerHeight / contentHeight;\n const calculatedThumbHeight = Math.max(\n availableHeight * scrollRatio,\n thumbMinHeight\n );\n\n // \uC378 \uC704\uCE58 \uACC4\uC0B0 (\uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uC81C\uC678)\n const scrollableHeight = contentHeight - containerHeight;\n const thumbScrollableHeight =\n availableHeight - calculatedThumbHeight;\n const calculatedThumbTop =\n scrollableHeight > 0\n ? (scrollTop / scrollableHeight) * thumbScrollableHeight\n : 0;\n\n setThumbHeight(calculatedThumbHeight);\n setThumbTop(calculatedThumbTop);\n }, [\n findScrollableElement,\n clearHideTimer,\n showArrows,\n finalThumbWidth,\n thumbMinHeight,\n finalAutoHideConfig.enabled,\n ]);\n\n // \uC378 \uB4DC\uB798\uADF8 \uC2DC\uC791\n const handleThumbMouseDown = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n setIsDragging(true);\n setDragStart({\n y: event.clientY,\n scrollTop: actualScrollContainer.scrollTop,\n });\n\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [findScrollableElement, clearHideTimer, maintainFocus]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC911\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragging) return;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n const scrollableHeight = contentHeight - containerHeight;\n\n const deltaY = event.clientY - dragStart.y;\n const thumbScrollableHeight = containerHeight - thumbHeight;\n const scrollDelta =\n (deltaY / thumbScrollableHeight) * scrollableHeight;\n\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableHeight,\n dragStart.scrollTop + scrollDelta\n )\n );\n\n actualScrollContainer.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragging,\n dragStart,\n thumbHeight,\n updateScrollbar,\n findScrollableElement,\n ]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC885\uB8CC\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay); // \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uD2B8\uB799 \uD074\uB9AD\uC73C\uB85C \uC2A4\uD06C\uB864 \uC810\uD504\n const handleTrackClick = useCallback(\n (event: React.MouseEvent) => {\n if (!scrollbarRef.current) {\n return;\n }\n\n const scrollbar = scrollbarRef.current;\n const rect = scrollbar.getBoundingClientRect();\n const clickY = event.clientY - rect.top;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n\n const scrollRatio = clickY / containerHeight;\n const newScrollTop =\n scrollRatio * (contentHeight - containerHeight);\n\n actualScrollContainer.scrollTop = Math.max(\n 0,\n Math.min(contentHeight - containerHeight, newScrollTop)\n );\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n finalAutoHideConfig.delay,\n findScrollableElement,\n maintainFocus,\n ]\n );\n\n // \uC704\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleUpArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current) return;\n\n const newScrollTop = Math.max(\n 0,\n containerRef.current.scrollTop - arrowStep\n );\n\n containerRef.current.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleDownArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current || !contentRef.current) return;\n\n const container = containerRef.current;\n const content = contentRef.current;\n const maxScrollTop =\n content.scrollHeight - container.clientHeight;\n const newScrollTop = Math.min(\n maxScrollTop,\n container.scrollTop + arrowStep\n );\n\n container.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC2DC\uC791\n const handleDragScrollStart = useCallback(\n (event: React.MouseEvent) => {\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uBE44\uD65C\uC131\uD654\uB41C \uACBD\uC6B0\n if (!finalDragScrollConfig.enabled) return;\n\n // \uD14D\uC2A4\uD2B8 \uC785\uB825 \uC694\uC18C\uB098 \uC81C\uC678 \uB300\uC0C1\uC774\uBA74 \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD558\uC9C0 \uC54A\uC74C\n const target = event.target as Element;\n if (isTextInputElement(target, finalDragScrollConfig)) {\n return;\n }\n\n // \uC624\uB978\uCABD \uD074\uB9AD\uC774\uB098 \uD720 \uD074\uB9AD\uC740 \uC81C\uC678\n if (event.button !== 0) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC601\uC5ED\uC774 \uC544\uB2C8\uBA74 \uC81C\uC678\n if (\n scrollableElement.scrollHeight <=\n scrollableElement.clientHeight\n )\n return;\n\n event.preventDefault();\n setIsDragScrolling(true);\n setDragScrollStart({\n x: event.clientX,\n y: event.clientY,\n scrollTop: scrollableElement.scrollTop,\n scrollLeft: scrollableElement.scrollLeft || 0,\n });\n\n // \uC2A4\uD06C\uB864\uBC14\uB294 \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD560 \uB54C \uD45C\uC2DC (handleDragScrollMove\uC5D0\uC11C \uCC98\uB9AC)\n clearHideTimer();\n },\n [\n finalDragScrollConfig,\n isTextInputElement,\n findScrollableElement,\n clearHideTimer,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC911\n const handleDragScrollMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragScrolling) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const deltaX = dragScrollStart.x - event.clientX;\n const deltaY = dragScrollStart.y - event.clientY;\n\n // \uBBF8\uC138\uD55C \uC6C0\uC9C1\uC784 \uBB34\uC2DC (3px \uC774\uD558)\n if (Math.abs(deltaY) < 3 && Math.abs(deltaX) < 3) {\n return;\n }\n\n // \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD588\uC73C\uBBC0\uB85C \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n setScrollbarVisible(true);\n\n // \uC138\uB85C \uC2A4\uD06C\uB864\uB9CC \uCC98\uB9AC (\uAC00\uB85C \uC2A4\uD06C\uB864\uC740 \uD544\uC694\uC2DC \uB098\uC911\uC5D0 \uCD94\uAC00)\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableElement.scrollHeight -\n scrollableElement.clientHeight,\n dragScrollStart.scrollTop + deltaY\n )\n );\n\n scrollableElement.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragScrolling,\n dragScrollStart,\n findScrollableElement,\n updateScrollbar,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC885\uB8CC\n const handleDragScrollEnd = useCallback(() => {\n setIsDragScrolling(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uC2A4\uD06C\uB864 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 (externalScrollContainer \uC6B0\uC120 \uC0AC\uC6A9)\n useEffect(() => {\n const handleScroll = (event: Event) => {\n updateScrollbar();\n\n // \uC2A4\uD06C\uB864 \uC911\uC5D0\uB294 \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD720 \uC2A4\uD06C\uB864 \uC911\uC774\uBA74 \uBE60\uB978 \uC228\uAE40, \uC544\uB2C8\uBA74 \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n const delay = isWheelScrolling\n ? finalAutoHideConfig.delayOnWheel\n : finalAutoHideConfig.delay;\n setHideTimer(delay);\n\n if (onScroll) {\n onScroll(event);\n }\n };\n\n const handleWheel = () => {\n // \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD45C\uC2DC\n setIsWheelScrolling(true);\n\n // \uAE30\uC874 \uD720 \uD0C0\uC774\uBA38 \uC81C\uAC70\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n\n // 300ms \uD6C4 \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD574\uC81C (\uD720 \uC2A4\uD06C\uB864\uC774 \uB05D\uB0AC\uB2E4\uACE0 \uAC04\uC8FC)\n wheelTimeoutRef.current = setTimeout(() => {\n setIsWheelScrolling(false);\n }, 300);\n\n clearHideTimer();\n\n // \uD720 \uC774\uBCA4\uD2B8 \uC2DC 50ms \uB514\uBC14\uC6B4\uC2A4 \uC801\uC6A9 (\uBBF8\uC138\uD55C \uD720 \uC6C0\uC9C1\uC784 \uBB34\uC2DC)\n clearWheelShowTimer();\n wheelShowTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n wheelShowTimeoutRef.current = null;\n }, 50);\n };\n\n const elementsToWatch: HTMLElement[] = [];\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n const scrollableElement = findScrollableElement();\n if (scrollableElement) {\n elementsToWatch.push(scrollableElement);\n }\n\n // fallback: \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC640 children \uC694\uC18C\uB3C4 \uAC10\uC9C0\n const container = containerRef.current;\n if (container && !scrollableElement) {\n elementsToWatch.push(container);\n\n // children \uC694\uC18C\uB4E4\uC758 \uC2A4\uD06C\uB864\uB3C4 \uAC10\uC9C0 (\uC911\uCCA9\uB41C OverlayScrollbar \uC81C\uC678)\n const childScrollableElements = container.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n childScrollableElements.forEach((child) => {\n const element = child as HTMLElement;\n\n // \uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC81C\uC678\n if (\n element !== container &&\n element.classList.contains(\n \"overlay-scrollbar-container\"\n )\n ) {\n return;\n }\n\n // \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uC73C\uBA74 \uC81C\uC678\n let parent: HTMLElement | null = element.parentElement;\n while (parent && parent !== container) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== container\n ) {\n return; // \uC911\uCCA9\uB41C OverlayScrollbar \uB0B4\uBD80\uC774\uBBC0\uB85C \uC81C\uC678\n }\n parent = parent.parentElement;\n }\n\n elementsToWatch.push(element);\n });\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uC5D0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uB4F1\uB85D\n elementsToWatch.forEach((element) => {\n element.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n });\n element.addEventListener(\"wheel\", handleWheel, {\n passive: true,\n });\n });\n\n return () => {\n // \uBAA8\uB4E0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uC81C\uAC70\n elementsToWatch.forEach((element) => {\n element.removeEventListener(\"scroll\", handleScroll);\n element.removeEventListener(\"wheel\", handleWheel);\n });\n\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n }\n };\n }, [\n findScrollableElement,\n updateScrollbar,\n onScroll,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig,\n isWheelScrolling,\n ]);\n\n // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uD578\uB4E4\uB7EC (\uBC29\uD5A5\uD0A4, PageUp/PageDown/Home/End)\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const { key } = event;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollableElement;\n const maxScrollTop = scrollHeight - clientHeight;\n\n // \uD55C \uC904 \uC2A4\uD06C\uB864 \uB2E8\uC704 (rowHeight \uB610\uB294 \uAE30\uBCF8\uAC12)\n const lineScrollStep = 50;\n\n let newScrollTop: number | null = null;\n\n switch (key) {\n case \"ArrowUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - lineScrollStep);\n break;\n case \"ArrowDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + lineScrollStep\n );\n break;\n case \"PageUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - clientHeight);\n break;\n case \"PageDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + clientHeight\n );\n break;\n case \"Home\":\n event.preventDefault();\n newScrollTop = 0;\n break;\n case \"End\":\n event.preventDefault();\n newScrollTop = maxScrollTop;\n break;\n default:\n return;\n }\n\n if (newScrollTop !== null) {\n // \uC378 \uC704\uCE58\uB97C \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\n const scrollRatio = newScrollTop / maxScrollTop;\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n const availableHeight = clientHeight - arrowSpace;\n const scrollableThumbHeight = availableHeight - thumbHeight;\n const newThumbTop = scrollableThumbHeight * scrollRatio;\n\n setThumbTop(newThumbTop);\n\n // \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uC989\uC2DC \uBCC0\uACBD (\uC560\uB2C8\uBA54\uC774\uC158 \uC5C6\uC74C)\n scrollableElement.scrollTop = newScrollTop;\n\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n }\n };\n\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n container.removeEventListener(\"keydown\", handleKeyDown);\n };\n }\n }, [\n findScrollableElement,\n showArrows,\n finalThumbWidth,\n finalTrackConfig.margin,\n thumbHeight,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig.delay,\n ]);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragScrolling) {\n document.addEventListener(\"mousemove\", handleDragScrollMove);\n document.addEventListener(\"mouseup\", handleDragScrollEnd);\n return () => {\n document.removeEventListener(\n \"mousemove\",\n handleDragScrollMove\n );\n document.removeEventListener(\n \"mouseup\",\n handleDragScrollEnd\n );\n };\n }\n }, [isDragScrolling, handleDragScrollMove, handleDragScrollEnd]);\n\n // \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n }, [isDragging, handleMouseMove, handleMouseUp]);\n\n // \uCD08\uAE30 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8\n useEffect(() => {\n // \uC989\uC2DC \uC5C5\uB370\uC774\uD2B8\n updateScrollbar();\n // \uC57D\uAC04\uC758 \uC9C0\uC5F0 \uD6C4\uC5D0\uB3C4 \uC5C5\uB370\uC774\uD2B8 (DOM\uC774 \uC644\uC804\uD788 \uB80C\uB354\uB9C1\uB41C \uD6C4)\n const timer = setTimeout(() => {\n updateScrollbar();\n }, 100);\n return () => clearTimeout(timer);\n }, [updateScrollbar]);\n\n // \uCEF4\uD3EC\uB10C\uD2B8 \uCD08\uAE30\uD654 \uC644\uB8CC \uD45C\uC2DC (hover \uC774\uBCA4\uD2B8 \uD65C\uC131\uD654\uC6A9)\n useLayoutEffect(() => {\n setIsInitialized(true);\n // \uCD08\uAE30\uD654 \uC9C1\uD6C4 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8 (\uC378 \uB192\uC774 \uC815\uD655\uD558\uAC8C \uACC4\uC0B0)\n updateScrollbar();\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled && isScrollable()) {\n setScrollbarVisible(true);\n }\n }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);\n\n // Resize observer\uB85C \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n updateScrollbar();\n });\n\n const elementsToObserve: HTMLElement[] = [];\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uB4E4 \uAD00\uCC30\n if (containerRef.current) {\n elementsToObserve.push(containerRef.current);\n }\n if (contentRef.current) {\n elementsToObserve.push(contentRef.current);\n }\n\n // \uCE90\uC2DC\uB41C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uB3C4 \uAD00\uCC30\n if (\n cachedScrollContainerRef.current &&\n document.contains(cachedScrollContainerRef.current)\n ) {\n elementsToObserve.push(cachedScrollContainerRef.current);\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uB4E4 \uAD00\uCC30 \uC2DC\uC791\n elementsToObserve.forEach((element) => {\n resizeObserver.observe(element);\n });\n\n return () => resizeObserver.disconnect();\n }, [updateScrollbar]);\n\n // MutationObserver\uB85C DOM \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n // \uCE90\uC2DC \uCD08\uAE30\uD654\uD558\uC5EC \uC0C8\uB85C\uC6B4 \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uAC10\uC9C0\n cachedScrollContainerRef.current = null;\n updateScrollbar();\n });\n\n observer.observe(containerRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"style\"],\n });\n\n return () => observer.disconnect();\n }, [updateScrollbar]);\n\n // trackWidth\uAC00 thumbWidth\uBCF4\uB2E4 \uC791\uC73C\uBA74 thumbWidth\uC640 \uAC19\uAC8C \uC124\uC815\n const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);\n\n // \uC6F9\uD0B7 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30\uC6A9 CSS \uB3D9\uC801 \uC8FC\uC785\n useEffect(() => {\n const styleId = \"overlay-scrollbar-webkit-hide\";\n\n // \uC774\uBBF8 \uC2A4\uD0C0\uC77C\uC774 \uC788\uC73C\uBA74 \uC81C\uAC70\n const existingStyle = document.getElementById(styleId);\n if (existingStyle) {\n existingStyle.remove();\n }\n\n const style = document.createElement(\"style\");\n style.id = styleId;\n style.textContent = `\n .overlay-scrollbar-container::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-track {\n display: none !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-thumb {\n display: none !important;\n }\n .overlay-scrollbar-container:focus {\n outline: 2px solid rgba(0, 123, 255, 0.3);\n outline-offset: -2px;\n }\n .overlay-scrollbar-container:focus-visible {\n outline: 2px solid rgba(0, 123, 255, 0.5);\n outline-offset: -2px;\n }\n `;\n document.head.appendChild(style);\n\n return () => {\n const styleToRemove = document.getElementById(styleId);\n if (styleToRemove) {\n styleToRemove.remove();\n }\n };\n }, []);\n\n return (\n <div\n ref={wrapperRef}\n className={`overlay-scrollbar-wrapper ${className}`}\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n minHeight: 0, // shrink \uAC00\uB2A5\uD558\uB3C4\uB85D\n height: \"100%\", // \uBD80\uBAA8\uC758 \uC804\uCCB4 \uB192\uC774 \uC0AC\uC6A9\n flex: \"1 1 0%\", // \uAE30\uBCF8\uC801\uC73C\uB85C flex item\uC73C\uB85C \uB3D9\uC791\n ...style, // \uC0AC\uC6A9\uC790\uAC00 flex\uB97C override \uD560 \uC218 \uC788\uB3C4\uB85D style\uC744 \uB4A4\uC5D0 \uBC30\uCE58\n }}\n >\n {/* \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 */}\n <div\n ref={containerRef}\n className=\"overlay-scrollbar-container\"\n tabIndex={-1} // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD558\uAC8C \uD568\n onMouseDown={handleDragScrollStart}\n style={{\n display: \"flex\",\n width: \"100%\", // \uBA85\uC2DC\uC801 \uB108\uBE44 \uC124\uC815\n flex: \"1 1 auto\", // flex item\uC73C\uB85C \uC124\uC815\uD558\uC5EC \uB192\uC774\uB97C \uC790\uB3D9\uC73C\uB85C \uACC4\uC0B0\n minHeight: 0, // \uCD5C\uC18C \uB192\uC774 \uBCF4\uC7A5\n overflow: \"auto\", // \uB124\uC774\uD2F0\uBE0C \uC2A4\uD06C\uB864 \uAE30\uB2A5 \uC720\uC9C0\n // \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8 \uC2A4\uD06C\uB864\uBC14\uB9CC \uC228\uAE30\uAE30\n scrollbarWidth: \"none\", // Firefox\n msOverflowStyle: \"none\", // IE/Edge\n // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uC2A4\uD0C0\uC77C (\uC811\uADFC\uC131)\n outline: \"none\", // \uAE30\uBCF8 \uC544\uC6C3\uB77C\uC778 \uC81C\uAC70\n userSelect: isDragScrolling ? \"none\" : \"auto\", // \uB4DC\uB798\uADF8 \uC911 \uD14D\uC2A4\uD2B8 \uC120\uD0DD \uBC29\uC9C0\n ...containerStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n <div\n ref={contentRef}\n className=\"overlay-scrollbar-content\"\n style={{\n flex: \"1 1 0%\", // grow\uD558\uC5EC \uACF5\uAC04 \uCC44\uC6B0\uAE30\n minHeight: 0, // flex shrink \uD5C8\uC6A9\n display: \"flex\", // flex \uCEE8\uD14C\uC774\uB108\uB85C \uC124\uC815\n flexDirection: \"column\", // \uC138\uB85C \uBC29\uD5A5 \uC815\uB82C\n ...contentStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n {children}\n </div>\n </div>\n\n {/* \uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14 */}\n {showScrollbar && hasScrollableContent && (\n <div\n ref={scrollbarRef}\n className=\"overlay-scrollbar-track\"\n onMouseEnter={() => {\n // \uC228\uAE40 \uD0C0\uC774\uBA38\uB294 \uC989\uC2DC \uCDE8\uC18C\n clearHideTimer();\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uC124\uC815 (100ms \uD6C4 \uD45C\uC2DC)\n hoverEnterTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n hoverEnterTimeoutRef.current = null;\n }, 100);\n }}\n onMouseLeave={() => {\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC9C0\uB098\uAC00\uAE30\uB9CC \uD55C \uACBD\uC6B0)\n clearHoverEnterTimer();\n\n if (!isDragging) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }}\n style={{\n position: \"absolute\",\n top: 0,\n right: 0,\n width: `${adjustedTrackWidth}px`,\n height: \"100%\",\n opacity: scrollbarVisible ? 1 : 0,\n transition: \"opacity 0.2s ease-in-out\",\n cursor: \"pointer\",\n zIndex: 1000,\n pointerEvents: \"auto\",\n }}\n >\n {/* \uC2A4\uD06C\uB864\uBC14 \uD2B8\uB799 \uBC30\uACBD */}\n {finalTrackConfig.visible && (\n <div\n className=\"overlay-scrollbar-track-background\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleTrackClick(e);\n }}\n style={{\n position: \"absolute\",\n top: showArrows\n ? `${\n finalThumbConfig.width +\n finalTrackConfig.margin * 2\n }px`\n : `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbConfig.width) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbConfig.width}px`,\n height: showArrows\n ? `calc(100% - ${\n finalThumbConfig.width * 2 +\n finalTrackConfig.margin * 4\n }px)`\n : `calc(100% - ${\n finalTrackConfig.margin * 2\n }px)`,\n backgroundColor: finalTrackConfig.color,\n borderRadius: `${finalTrackConfig.radius}px`,\n cursor: \"pointer\",\n }}\n />\n )}\n\n {/* \uC2A4\uD06C\uB864\uBC14 \uC378 */}\n <div\n ref={thumbRef}\n className=\"overlay-scrollbar-thumb\"\n onMouseDown={handleThumbMouseDown}\n onMouseEnter={() => setIsThumbHovered(true)}\n onMouseLeave={() => setIsThumbHovered(false)}\n style={{\n position: \"absolute\",\n top: `${\n (showArrows\n ? finalThumbWidth +\n finalTrackConfig.margin * 2\n : finalTrackConfig.margin) + thumbTop\n }px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${Math.max(\n thumbHeight,\n thumbMinHeight\n )}px`,\n backgroundColor:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverColor\n : finalThumbConfig.color,\n opacity:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverOpacity\n : finalThumbConfig.opacity,\n borderRadius: `${finalThumbConfig.radius}px`,\n cursor: \"pointer\",\n transition:\n \"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out\",\n }}\n />\n </div>\n )}\n\n {/* \uC704\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-up-arrow\"\n onClick={handleUpArrowClick}\n onMouseEnter={() => setHoveredArrow(\"up\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n top: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25B2\n </div>\n )}\n\n {/* \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-down-arrow\"\n onClick={handleDownArrowClick}\n onMouseEnter={() => setHoveredArrow(\"down\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n bottom: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25BC\n </div>\n )}\n </div>\n );\n }\n);\n\nexport default OverlayScrollbar;\nexport { OverlayScrollbar };\n", "/**\n * MIT License\n *\n * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { DragScrollConfig } from \"../types\";\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uC5D0\uC11C \uD655\uC778)\nconst DEFAULT_EXCLUDE_CLASSES = [\n // \uAE30\uBCF8 \uC785\uB825 \uC694\uC18C\uB4E4\n \"editor\",\n \"textarea\",\n \"input\",\n \"select\",\n \"textfield\",\n \"form-control\",\n \"contenteditable\",\n\n // Material-UI \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"MuiInputBase-input\",\n \"MuiSelect-select\",\n \"MuiOutlinedInput-input\",\n \"MuiFilledInput-input\",\n \"MuiInput-input\",\n \"MuiFormControl-root\",\n \"MuiTextField-root\",\n \"MuiSelect-root\",\n \"MuiOutlinedInput-root\",\n \"MuiFilledInput-root\",\n \"MuiInput-root\",\n \"MuiAutocomplete-input\",\n \"MuiDatePicker-input\",\n \"MuiSlider-thumb\",\n \"MuiSlider-rail\",\n \"MuiSlider-track\",\n \"MuiSlider-mark\",\n \"MuiSlider-markLabel\",\n \"MuiSlider-root\",\n \"MuiSlider-colorPrimary\",\n \"MuiSlider-sizeMedium\",\n \"MuiIconButton-root\",\n \"MuiButton-root\",\n \"MuiButtonBase-root\",\n \"MuiTouchRipple-root\",\n \"MuiCheckbox-root\",\n \"MuiRadio-root\",\n \"MuiSwitch-root\",\n \"PrivateSwitchBase-root\",\n\n // Ant Design \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ant-input\",\n \"ant-input-affix-wrapper\",\n \"ant-input-group-addon\",\n \"ant-input-number\",\n \"ant-input-number-handler\",\n \"ant-select\",\n \"ant-select-selector\",\n \"ant-select-selection-search\",\n \"ant-select-dropdown\",\n \"ant-cascader\",\n \"ant-cascader-input\",\n \"ant-picker\",\n \"ant-picker-input\",\n \"ant-time-picker\",\n \"ant-calendar-picker\",\n \"ant-slider\",\n \"ant-slider-track\",\n \"ant-slider-handle\",\n \"ant-switch\",\n \"ant-checkbox\",\n \"ant-checkbox-wrapper\",\n \"ant-radio\",\n \"ant-radio-wrapper\",\n \"ant-rate\",\n \"ant-upload\",\n \"ant-upload-drag\",\n \"ant-form-item\",\n \"ant-form-item-control\",\n \"ant-btn\",\n \"ant-dropdown\",\n \"ant-dropdown-trigger\",\n \"ant-menu\",\n \"ant-menu-item\",\n \"ant-tooltip\",\n \"ant-popover\",\n \"ant-modal\",\n \"ant-drawer\",\n \"ant-tree-select\",\n \"ant-auto-complete\",\n \"ant-mentions\",\n \"ant-transfer\",\n\n // Shadcn/ui \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ui-input\",\n \"ui-textarea\",\n \"ui-select\",\n \"ui-select-trigger\",\n \"ui-select-content\",\n \"ui-select-item\",\n \"ui-button\",\n \"ui-checkbox\",\n \"ui-radio-group\",\n \"ui-switch\",\n \"ui-slider\",\n \"ui-range-slider\",\n \"ui-calendar\",\n \"ui-date-picker\",\n \"ui-combobox\",\n \"ui-command\",\n \"ui-command-input\",\n \"ui-popover\",\n \"ui-dialog\",\n \"ui-sheet\",\n \"ui-dropdown-menu\",\n \"ui-context-menu\",\n \"ui-menubar\",\n \"ui-navigation-menu\",\n \"ui-form\",\n \"ui-form-control\",\n \"ui-form-item\",\n \"ui-form-field\",\n \"ui-label\",\n // Radix UI \uAE30\uBCF8 \uD074\uB798\uC2A4\uB4E4 (Shadcn \uAE30\uBC18)\n \"radix-ui\",\n \"radix-select\",\n \"radix-dropdown\",\n \"radix-dialog\",\n \"radix-popover\",\n \"radix-accordion\",\n \"radix-tabs\",\n \"radix-slider\",\n \"radix-switch\",\n \"radix-checkbox\",\n \"radix-radio\",\n\n // Quill Editor\n \"ql-editor\",\n \"ql-container\",\n \"ql-toolbar\",\n \"ql-picker\",\n \"ql-picker-label\",\n \"ql-picker-options\",\n \"ql-formats\",\n \"ql-snow\",\n \"ql-bubble\",\n \"quill\",\n \"quilleditor\",\n\n // Monaco Editor\n \"monaco-editor\",\n \"monaco-editor-background\",\n \"view-lines\",\n \"decorationsOverviewRuler\",\n \"monaco-scrollable-element\",\n\n // CodeMirror\n \"CodeMirror\",\n \"CodeMirror-code\",\n \"CodeMirror-lines\",\n \"CodeMirror-scroll\",\n \"CodeMirror-sizer\",\n \"cm-editor\",\n \"cm-focused\",\n \"cm-content\",\n\n // TinyMCE\n \"tox-editor-container\",\n \"tox-editor-header\",\n \"tox-edit-area\",\n \"tox-tinymce\",\n \"mce-content-body\",\n\n // CKEditor\n \"ck-editor\",\n \"ck-content\",\n \"ck-toolbar\",\n \"ck-editor__editable\",\n \"ck-widget\",\n\n // Slate.js\n \"slate-editor\",\n \"slate-content\",\n\n // Draft.js\n \"DraftEditor-root\",\n \"DraftEditor-editorContainer\",\n \"public-DraftEditor-content\",\n\n // EhfuseEditor\n \"ehfuse-editor\",\n \"ehfuse-editor-wrapper\",\n \"ehfuse-editor-content\",\n \"ehfuse-toolbar\",\n \"ehfuse-toolbar-group\",\n \"ehfuse-cursor\",\n\n // \uAE30\uD0C0 \uC5D0\uB514\uD130\uB4E4\n \"text-editor\",\n \"rich-text-editor\",\n \"wysiwyg\",\n \"ace_editor\",\n \"ace_content\",\n];\n\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\nexport const isTextInputElement = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n const tagName = element.tagName.toLowerCase();\n const inputTypes = [\n \"text\",\n \"password\",\n \"email\",\n \"number\",\n \"search\",\n \"tel\",\n \"url\",\n \"checkbox\",\n \"radio\",\n ];\n\n // input \uD0DC\uADF8\uC774\uBA74\uC11C \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD0C0\uC785\uC774\uB098 \uCCB4\uD06C\uBC15\uC2A4/\uB77C\uB514\uC624\uC778 \uACBD\uC6B0\n if (tagName === \"input\") {\n const type = (element as HTMLInputElement).type;\n return inputTypes.includes(type);\n }\n\n // textarea, select, \uD3B8\uC9D1 \uAC00\uB2A5\uD55C \uC694\uC18C\uB4E4\n if ([\"textarea\", \"select\", \"button\"].includes(tagName)) {\n return true;\n }\n\n // SVG \uC694\uC18C\uB4E4 (\uC544\uC774\uCF58\uB4E4)\n if (\n [\n \"svg\",\n \"path\",\n \"circle\",\n \"rect\",\n \"line\",\n \"polygon\",\n \"polyline\",\n ].includes(tagName)\n ) {\n return true;\n }\n\n // contenteditable \uC18D\uC131\uC774 \uC788\uB294 \uC694\uC18C\n if (element.getAttribute(\"contenteditable\") === \"true\") {\n return true;\n }\n\n // \uCD94\uAC00 \uC140\uB809\uD130 \uCCB4\uD06C\n if (config?.excludeSelectors) {\n for (const selector of config.excludeSelectors) {\n if (element.matches(selector)) {\n return true;\n }\n }\n }\n\n return checkElementAndParents(element, config);\n};\n\n/**\n * \uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uB4E4\uC744 \uD655\uC778\uD558\uC5EC \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uC694\uC18C\uC778\uC9C0 \uD310\uB2E8\n */\nconst checkElementAndParents = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n // \uBAA8\uB4E0 \uC81C\uC678 \uD074\uB798\uC2A4\uB4E4 \uD569\uCE58\uAE30 (\uAE30\uBCF8 \uD074\uB798\uC2A4 + \uC0AC\uC6A9\uC790 \uCD94\uAC00 \uD074\uB798\uC2A4)\n const allExcludeClasses = [\n ...DEFAULT_EXCLUDE_CLASSES,\n ...(config?.excludeClasses || []),\n ];\n\n let currentElement: Element | null = element;\n let depth = 0;\n const maxDepth = 5; // \uCD5C\uB300 5\uB2E8\uACC4\uAE4C\uC9C0 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778\n\n while (currentElement && depth <= maxDepth) {\n // \uD604\uC7AC \uC694\uC18C\uAC00 \uC81C\uC678 \uD074\uB798\uC2A4\uB97C \uAC00\uC9C0\uACE0 \uC788\uB294\uC9C0 \uD655\uC778\n if (\n allExcludeClasses.some((cls) =>\n currentElement!.classList.contains(cls)\n )\n ) {\n return true;\n }\n\n // \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB8E8\uD2B8\uC5D0 \uB3C4\uB2EC\uD558\uBA74 \uC911\uB2E8\n if (currentElement.classList.contains(\"MuiDialogContent-root\")) {\n break;\n }\n\n currentElement = currentElement.parentElement;\n depth++;\n }\n\n return false;\n};\n\n/**\n * \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB098 \uBAA8\uB2EC\uC774 \uC0C1\uC704\uC5D0 \uC788\uB294\uC9C0 \uD655\uC778\n */\nexport const hasUpperModal = (scrollContainer: Element): boolean => {\n const currentDialog = scrollContainer.closest(\n \".MuiDialog-root\"\n ) as HTMLElement;\n if (!currentDialog) return false;\n\n const allModals = document.querySelectorAll(\n \".MuiDialog-root, .MuiModal-root, .MuiPopover-root\"\n );\n const currentZIndex = parseInt(\n window.getComputedStyle(currentDialog).zIndex || \"0\"\n );\n\n for (const modal of allModals) {\n if (modal !== currentDialog) {\n const modalElement = modal as HTMLElement;\n const modalZIndex = parseInt(\n window.getComputedStyle(modalElement).zIndex || \"0\"\n );\n\n if (\n modalZIndex > currentZIndex &&\n modalElement.style.display !== \"none\"\n ) {\n return true;\n }\n }\n }\n\n return false;\n};\n\n/**\n * \uD074\uB9AD\uD55C \uC694\uC18C\uAC00 \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB0B4\uBD80\uC778\uC9C0 \uD655\uC778\n */\nexport const isClickInOtherDialog = (\n clickedElement: Element,\n currentDialog: Element | null\n): boolean => {\n const parentDialog = clickedElement.closest(\n \".MuiDialog-root, .MuiPopover-root, .MuiModal-root\"\n );\n return parentDialog !== null && parentDialog !== currentDialog;\n};\n"],
|
|
5
|
-
"mappings": "ubAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,sBAAAE,GAAA,YAAAA,KAAA,eAAAC,GAAAH,ICwBA,IAAAI,EAUO,iBCPP,IAAMC,GAA0B,CAE5B,SACA,WACA,QACA,SACA,YACA,eACA,kBAGA,qBACA,mBACA,yBACA,uBACA,iBACA,sBACA,oBACA,iBACA,wBACA,sBACA,gBACA,wBACA,sBACA,kBACA,iBACA,kBACA,iBACA,sBACA,iBACA,yBACA,uBACA,qBACA,iBACA,qBACA,sBACA,mBACA,gBACA,iBACA,yBAGA,YACA,0BACA,wBACA,mBACA,2BACA,aACA,sBACA,8BACA,sBACA,eACA,qBACA,aACA,mBACA,kBACA,sBACA,aACA,mBACA,oBACA,aACA,eACA,uBACA,YACA,oBACA,WACA,aACA,kBACA,gBACA,wBACA,UACA,eACA,uBACA,WACA,gBACA,cACA,cACA,YACA,aACA,kBACA,oBACA,eACA,eAGA,WACA,cACA,YACA,oBACA,oBACA,iBACA,YACA,cACA,iBACA,YACA,YACA,kBACA,cACA,iBACA,cACA,aACA,mBACA,aACA,YACA,WACA,mBACA,kBACA,aACA,qBACA,UACA,kBACA,eACA,gBACA,WAEA,WACA,eACA,iBACA,eACA,gBACA,kBACA,aACA,eACA,eACA,iBACA,cAGA,YACA,eACA,aACA,YACA,kBACA,oBACA,aACA,UACA,YACA,QACA,cAGA,gBACA,2BACA,aACA,2BACA,4BAGA,aACA,kBACA,mBACA,oBACA,mBACA,YACA,aACA,aAGA,uBACA,oBACA,gBACA,cACA,mBAGA,YACA,aACA,aACA,sBACA,YAGA,eACA,gBAGA,mBACA,8BACA,6BAGA,gBACA,wBACA,wBACA,iBACA,uBACA,gBAGA,cACA,mBACA,UACA,aACA,aACJ,EAQaC,GAAqB,CAC9BC,EACAC,IACU,CACV,IAAMC,EAAUF,EAAQ,QAAQ,YAAY,EACtCG,EAAa,CACf,OACA,WACA,QACA,SACA,SACA,MACA,MACA,WACA,OACJ,EAGA,GAAID,IAAY,QAAS,CACrB,IAAME,EAAQ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",
|
|
4
|
+
"sourcesContent": ["export { default } from \"./src/OverlayScrollbar\";\nexport { default as OverlayScrollbar } from \"./src/OverlayScrollbar\";\nexport type {\n OverlayScrollbarRef,\n OverlayScrollbarProps,\n ThumbConfig,\n TrackConfig,\n ArrowsConfig,\n DragScrollConfig,\n AutoHideConfig,\n} from \"./src/types\";\n", "/**\n * OverlayScrollbar.tsx\n *\n * @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, {\n useRef,\n useEffect,\n useState,\n useCallback,\n useMemo,\n ReactNode,\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n} from \"react\";\nimport { isTextInputElement } from \"./utils/dragScrollUtils\";\n\n// thumb \uAD00\uB828 \uC124\uC815\nexport interface ThumbConfig {\n width?: number; // \uC378\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC00: 8px)\n minHeight?: number; // \uC378\uC758 \uCD5C\uC18C \uB192\uC774 (\uAE30\uBCF8\uAC00: 50px)\n radius?: number; // \uC378\uC758 border-radius (\uAE30\uBCF8\uAC00: width / 2)\n color?: string; // \uC378 \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#606060\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// track \uAD00\uB828 \uC124\uC815\nexport interface TrackConfig {\n width?: number; // \uD638\uBC84 \uC601\uC5ED\uC778 \uD2B8\uB799\uC758 \uB108\uBE44 (\uAE30\uBCF8\uAC12: 16px)\n color?: string; // \uD2B8\uB799 \uBC30\uACBD \uC0C9\uC0C1 (\uAE30\uBCF8\uAC12: \"rgba(128, 128, 128, 0.1)\")\n visible?: boolean; // \uD2B8\uB799 \uBC30\uACBD \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n alignment?: \"center\" | \"right\"; // \uD2B8\uB799 \uB0B4\uBD80 \uC815\uB82C (\uAE30\uBCF8\uAC00: \"center\")\n radius?: number; // \uD2B8\uB799 \uBC30\uACBD\uC758 border-radius (\uAE30\uBCF8\uAC12: thumb.radius \uB610\uB294 4px)\n margin?: number; // \uD2B8\uB799 \uC0C1\uD558 \uB9C8\uC9C4 (\uAE30\uBCF8\uAC12: 4px)\n}\n\n// arrows \uAD00\uB828 \uC124\uC815\nexport interface ArrowsConfig {\n visible?: boolean; // \uD654\uC0B4\uD45C \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC00: false)\n step?: number; // \uD654\uC0B4\uD45C \uD074\uB9AD\uC2DC \uC2A4\uD06C\uB864 \uC774\uB3D9 \uAC70\uB9AC (\uAE30\uBCF8\uAC00: 50px)\n color?: string; // \uD654\uC0B4\uD45C \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: \"#808080\")\n opacity?: number; // \uAE30\uBCF8 \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 0.6)\n hoverColor?: string; // \uD638\uBC84 \uC2DC \uC0C9\uC0C1 (\uAE30\uBCF8\uAC00: color \uB3D9\uC77C)\n hoverOpacity?: number; // \uD638\uBC84 \uC2DC \uD22C\uBA85\uB3C4 (\uAE30\uBCF8\uAC00: 1.0)\n}\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\nexport interface DragScrollConfig {\n enabled?: boolean; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n excludeClasses?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778, \uCD5C\uB300 5\uB2E8\uACC4)\n excludeSelectors?: string[]; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uCD94\uAC00 CSS \uC140\uB809\uD130\uB4E4 (element.matches() \uC0AC\uC6A9)\n}\n\n// \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\nexport interface AutoHideConfig {\n enabled?: boolean; // \uC790\uB3D9 \uC228\uAE40 \uD65C\uC131\uD654 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n delay?: number; // \uAE30\uBCF8 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC12: 1500ms)\n delayOnWheel?: number; // \uD720 \uC2A4\uD06C\uB864 \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uC2DC\uAC04 (\uAE30\uBCF8\uAC00: 700ms)\n}\n\nexport interface OverlayScrollbarProps {\n className?: string;\n style?: React.CSSProperties; // wrapper div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n containerStyle?: React.CSSProperties; // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n contentStyle?: React.CSSProperties; // \uB0B4\uBD80 content div\uC5D0 \uC801\uC6A9\uD560 \uC2A4\uD0C0\uC77C\n children: ReactNode;\n onScroll?: (event: Event) => void;\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb?: ThumbConfig; // \uC378 \uAD00\uB828 \uC124\uC815\n track?: TrackConfig; // \uD2B8\uB799 \uAD00\uB828 \uC124\uC815\n arrows?: ArrowsConfig; // \uD654\uC0B4\uD45C\uB4E4 \uAD00\uB828 \uC124\uC815\n dragScroll?: DragScrollConfig; // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uAD00\uB828 \uC124\uC815\n autoHide?: AutoHideConfig; // \uC790\uB3D9 \uC228\uAE40 \uAD00\uB828 \uC124\uC815\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar?: boolean; // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: true)\n detectInnerScroll?: boolean; // children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uAC10\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12: false, \uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1\uC5D0 \uC0AC\uC6A9)\n}\n\n// OverlayScrollbar\uAC00 \uB178\uCD9C\uD560 \uBA54\uC11C\uB4DC\uB4E4\nexport interface OverlayScrollbarRef {\n getScrollContainer: () => HTMLDivElement | null;\n scrollTo: (options: ScrollToOptions) => void;\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n// \uAE30\uBCF8 \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC744 \uCEF4\uD3EC\uB10C\uD2B8 \uC678\uBD80\uC5D0 \uC0C1\uC218\uB85C \uC120\uC5B8 (\uC7AC\uB80C\uB354\uB9C1 \uC2DC \uB3D9\uC77C\uD55C \uCC38\uC870 \uC720\uC9C0)\nconst DEFAULT_THUMB_CONFIG: ThumbConfig = {};\nconst DEFAULT_TRACK_CONFIG: TrackConfig = {};\nconst DEFAULT_ARROWS_CONFIG: ArrowsConfig = {};\nconst DEFAULT_DRAG_SCROLL_CONFIG: DragScrollConfig = {};\nconst DEFAULT_AUTO_HIDE_CONFIG: AutoHideConfig = {};\n\nconst OverlayScrollbar = forwardRef<OverlayScrollbarRef, OverlayScrollbarProps>(\n (\n {\n className = \"\",\n style = {},\n containerStyle = {},\n contentStyle = {},\n children,\n onScroll,\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\n thumb = DEFAULT_THUMB_CONFIG,\n track = DEFAULT_TRACK_CONFIG,\n arrows = DEFAULT_ARROWS_CONFIG,\n dragScroll = DEFAULT_DRAG_SCROLL_CONFIG,\n autoHide = DEFAULT_AUTO_HIDE_CONFIG,\n\n // \uAE30\uD0C0 \uC124\uC815\uB4E4\n showScrollbar = true,\n detectInnerScroll = false,\n },\n ref\n ) => {\n // props \uBCC0\uACBD \uCD94\uC801\uC6A9 ref\n const prevPropsRef = useRef<{\n children?: ReactNode;\n onScroll?: (event: Event) => void;\n showScrollbar?: boolean;\n thumb?: ThumbConfig;\n track?: TrackConfig;\n arrows?: ArrowsConfig;\n dragScroll?: DragScrollConfig;\n autoHide?: AutoHideConfig;\n }>({});\n\n // \uB80C\uB354\uB9C1 \uC2DC \uC5B4\uB5A4 prop\uC774 \uBCC0\uACBD\uB418\uC5C8\uB294\uC9C0 \uCCB4\uD06C\n useEffect(() => {\n // \uD604\uC7AC props \uC800\uC7A5\n prevPropsRef.current = {\n children,\n onScroll,\n showScrollbar,\n thumb,\n track,\n arrows,\n dragScroll,\n autoHide,\n };\n });\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLDivElement>(null);\n\n // \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uCE90\uC2F1\uC6A9 ref (\uC131\uB2A5 \uCD5C\uC801\uD654)\n const cachedScrollContainerRef = useRef<HTMLElement | null>(null);\n\n // \uAE30\uBCF8 \uC0C1\uD0DC\uB4E4\n const [scrollbarVisible, setScrollbarVisible] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isThumbHovered, setIsThumbHovered] = useState(false);\n const [dragStart, setDragStart] = useState({ y: 0, scrollTop: 0 });\n const [thumbHeight, setThumbHeight] = useState(0);\n const [thumbTop, setThumbTop] = useState(0);\n const [hasScrollableContent, setHasScrollableContent] = useState(false);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC0C1\uD0DC\n const [isDragScrolling, setIsDragScrolling] = useState(false);\n const [dragScrollStart, setDragScrollStart] = useState({\n x: 0,\n y: 0,\n scrollTop: 0,\n scrollLeft: 0,\n });\n const [activeArrow, setActiveArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n const [hoveredArrow, setHoveredArrow] = useState<\"up\" | \"down\" | null>(\n null\n );\n\n // \uCD08\uAE30 \uB9C8\uC6B4\uD2B8 \uC2DC hover \uBC29\uC9C0\uC6A9\n const [isInitialized, setIsInitialized] = useState(false);\n\n // \uD720 \uC2A4\uD06C\uB864 \uAC10\uC9C0\uC6A9\n const wheelTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n const [isWheelScrolling, setIsWheelScrolling] = useState(false);\n\n // \uC228\uAE40 \uD0C0\uC774\uBA38\n const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const hoverEnterTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uD45C\uC2DC \uD0C0\uC774\uBA38 (\uB514\uBC14\uC6B4\uC2A4\uC6A9)\n const wheelShowTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // \uADF8\uB8F9\uD654\uB41C \uC124\uC815 \uAC1D\uCCB4\uB4E4\uC5D0 \uAE30\uBCF8\uAC12 \uC124\uC815\n const finalThumbConfig = useMemo(() => {\n const baseColor = thumb.color ?? \"#606060\";\n return {\n width: thumb.width ?? 8,\n minHeight: thumb.minHeight ?? 50,\n radius: thumb.radius ?? (thumb.width ?? 8) / 2,\n color: baseColor,\n opacity: thumb.opacity ?? 0.6,\n hoverColor: thumb.hoverColor ?? baseColor,\n hoverOpacity: thumb.hoverOpacity ?? 1.0,\n };\n }, [thumb]);\n\n const finalTrackConfig = useMemo(\n () => ({\n width: track.width ?? 16,\n color: track.color ?? \"rgba(128, 128, 128, 0.1)\",\n visible: track.visible ?? true,\n alignment: track.alignment ?? \"center\",\n radius: track.radius ?? finalThumbConfig.radius ?? 4,\n margin: track.margin ?? 4,\n }),\n [track, finalThumbConfig.radius]\n );\n\n const finalArrowsConfig = useMemo(() => {\n const baseColor = arrows.color ?? \"#808080\";\n return {\n visible: arrows.visible ?? false,\n step: arrows.step ?? 50,\n color: baseColor,\n opacity: arrows.opacity ?? 0.6,\n hoverColor: arrows.hoverColor ?? baseColor,\n hoverOpacity: arrows.hoverOpacity ?? 1.0,\n };\n }, [arrows]);\n\n const finalDragScrollConfig = useMemo(\n () => ({\n enabled: dragScroll.enabled ?? true,\n excludeClasses: dragScroll.excludeClasses ?? [],\n excludeSelectors: dragScroll.excludeSelectors ?? [],\n }),\n [dragScroll]\n );\n\n const finalAutoHideConfig = useMemo(\n () => ({\n enabled: autoHide.enabled ?? true,\n delay: autoHide.delay ?? 1500,\n delayOnWheel: autoHide.delayOnWheel ?? 700,\n }),\n [autoHide]\n );\n\n // \uD638\uD658\uC131\uC744 \uC704\uD55C \uBCC0\uC218\uB4E4 (\uC790\uC8FC \uC0AC\uC6A9\uB418\uB294 \uBCC0\uC218\uB4E4\uB9CC \uC720\uC9C0)\n const finalThumbWidth = finalThumbConfig.width;\n const finalTrackWidth = finalTrackConfig.width;\n const thumbMinHeight = finalThumbConfig.minHeight;\n const showArrows = finalArrowsConfig.visible;\n const arrowStep = finalArrowsConfig.step;\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 \uD568\uC218 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n const maintainFocus = useCallback(() => {\n if (!containerRef.current) return;\n\n // \uD604\uC7AC \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C \uD655\uC778\n const activeElement = document.activeElement;\n\n // \uC624\uBC84\uB808\uC774 \uC2A4\uD06C\uB864\uBC14 \uB0B4\uBD80\uC5D0 \uC774\uBBF8 \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC788\uC73C\uBA74 \uC2A4\uD0B5\n if (\n activeElement &&\n containerRef.current.contains(activeElement) &&\n activeElement !== containerRef.current\n ) {\n return;\n }\n\n // \uD3EC\uCEE4\uC2A4\uB41C \uC694\uC18C\uAC00 \uC5C6\uAC70\uB098 \uC678\uBD80\uC5D0 \uC788\uC73C\uBA74 \uCEE8\uD14C\uC774\uB108\uC5D0 \uD3EC\uCEE4\uC2A4\n containerRef.current.focus();\n }, []);\n\n // ref\uB97C \uD1B5\uD574 \uC678\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uB3C4\uB85D \uD568\n useImperativeHandle(\n ref,\n () => ({\n getScrollContainer: () => containerRef.current,\n scrollTo: (options: ScrollToOptions) => {\n if (containerRef.current) {\n containerRef.current.scrollTo(options);\n }\n },\n get scrollTop() {\n return containerRef.current?.scrollTop || 0;\n },\n get scrollHeight() {\n return containerRef.current?.scrollHeight || 0;\n },\n get clientHeight() {\n return containerRef.current?.clientHeight || 0;\n },\n }),\n []\n );\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30 (\uCE90\uC2F1 \uCD5C\uC801\uD654)\n const findScrollableElement = useCallback((): HTMLElement | null => {\n // \uCE90\uC2DC\uB41C \uC694\uC18C\uAC00 \uC5EC\uC804\uD788 \uC720\uD6A8\uD55C\uC9C0 \uD655\uC778\n if (cachedScrollContainerRef.current) {\n const cached = cachedScrollContainerRef.current;\n // DOM\uC5D0 \uC5F0\uACB0\uB418\uC5B4 \uC788\uACE0 \uC5EC\uC804\uD788 \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C\uC9C0 \uD655\uC778\n if (\n document.contains(cached) &&\n cached.scrollHeight > cached.clientHeight + 2\n ) {\n return cached;\n }\n // \uCE90\uC2DC \uBB34\uD6A8\uD654\n cachedScrollContainerRef.current = null;\n }\n\n if (!containerRef.current) {\n return null;\n }\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC758 \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uD655\uC778\n if (\n contentRef.current &&\n contentRef.current.scrollHeight >\n containerRef.current.clientHeight + 2\n ) {\n cachedScrollContainerRef.current = containerRef.current;\n return containerRef.current;\n }\n\n // detectInnerScroll \uC635\uC158\uC774 \uD65C\uC131\uD654\uB41C \uACBD\uC6B0\uC5D0\uB9CC children \uB0B4\uBD80\uC758 \uC2A4\uD06C\uB864 \uC694\uC18C \uCC3E\uAE30\n // (\uAC00\uC0C1 \uD14C\uC774\uBE14 \uB4F1 \uB0B4\uBD80\uC5D0\uC11C \uC2A4\uD06C\uB864\uC744 \uCC98\uB9AC\uD558\uB294 \uACBD\uC6B0\uC5D0 \uC0AC\uC6A9)\n if (!detectInnerScroll) {\n return null;\n }\n\n // children \uC694\uC18C\uC5D0\uC11C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 \uC601\uC5ED\uC740 \uC81C\uC678 (\uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC2A4\uD0B5)\n const childScrollableElements =\n containerRef.current.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n\n for (const child of childScrollableElements) {\n const element = child as HTMLElement;\n\n // \uC774 \uC694\uC18C\uAC00 \uB2E4\uB978 OverlayScrollbar\uC758 container\uC778\uC9C0 \uD655\uC778\n // (\uC790\uC2E0\uC758 containerRef\uB294 \uC544\uB2C8\uC5B4\uC57C \uD558\uACE0, overlay-scrollbar-container \uD074\uB798\uC2A4\uB97C \uAC00\uC9C4 \uACBD\uC6B0)\n if (\n element !== containerRef.current &&\n element.classList.contains(\"overlay-scrollbar-container\")\n ) {\n // \uC911\uCCA9\uB41C OverlayScrollbar\uC758 container\uC774\uBBC0\uB85C \uC2A4\uD0B5\n continue;\n }\n\n // \uC774 \uC694\uC18C\uC758 \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uB294\uC9C0 \uD655\uC778\n let parent: HTMLElement | null = element.parentElement;\n let isNestedInAnotherScrollbar = false;\n\n while (parent && parent !== containerRef.current) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== containerRef.current\n ) {\n // \uB2E4\uB978 OverlayScrollbar \uB0B4\uBD80\uC758 \uC694\uC18C\uC774\uBBC0\uB85C \uC2A4\uD0B5\n isNestedInAnotherScrollbar = true;\n break;\n }\n parent = parent.parentElement;\n }\n\n if (isNestedInAnotherScrollbar) {\n continue;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C\uC778\uC9C0 \uD655\uC778\n if (element.scrollHeight > element.clientHeight + 2) {\n cachedScrollContainerRef.current = element;\n return element;\n }\n }\n\n return null;\n }, []);\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5 \uC5EC\uBD80 \uCCB4\uD06C\n const isScrollable = useCallback(() => {\n return findScrollableElement() !== null;\n }, [findScrollableElement]);\n\n // \uD0C0\uC774\uBA38 \uC815\uB9AC\n const clearHideTimer = useCallback(() => {\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const clearHoverEnterTimer = useCallback(() => {\n if (hoverEnterTimeoutRef.current) {\n clearTimeout(hoverEnterTimeoutRef.current);\n hoverEnterTimeoutRef.current = null;\n }\n }, []);\n\n const clearWheelShowTimer = useCallback(() => {\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n wheelShowTimeoutRef.current = null;\n }\n }, []);\n\n // \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 \uD0C0\uC774\uBA38\n const setHideTimer = useCallback(\n (delay: number) => {\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uD0C0\uC774\uBA38\uB97C \uC124\uC815\uD558\uC9C0 \uC54A\uC74C\n if (!finalAutoHideConfig.enabled) {\n return;\n }\n clearHideTimer();\n hideTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(false);\n hideTimeoutRef.current = null;\n }, delay);\n },\n [clearHideTimer, finalAutoHideConfig.enabled]\n );\n\n // \uC2A4\uD06C\uB864\uBC14 \uC704\uCE58 \uBC0F \uD06C\uAE30 \uC5C5\uB370\uC774\uD2B8\n const updateScrollbar = useCallback(() => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) {\n // \uC2A4\uD06C\uB864 \uBD88\uAC00\uB2A5\uD558\uBA74 \uC228\uAE40\n setScrollbarVisible(false);\n setHasScrollableContent(false);\n clearHideTimer();\n return;\n }\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20\uAC00 \uC788\uC74C\uC744 \uD45C\uC2DC\n setHasScrollableContent(true);\n\n if (!scrollbarRef.current) return;\n\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled) {\n setScrollbarVisible(true);\n clearHideTimer();\n }\n\n const containerHeight = scrollableElement.clientHeight;\n const contentHeight = scrollableElement.scrollHeight;\n const scrollTop = scrollableElement.scrollTop;\n\n // wrapper\uC758 \uD328\uB529 \uACC4\uC0B0 (\uC0C1\uD558 \uD328\uB529\uB9CC \uD544\uC694)\n let wrapperPaddingTopBottom = 0;\n if (wrapperRef.current) {\n const computedStyle = window.getComputedStyle(\n wrapperRef.current\n );\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom =\n parseFloat(computedStyle.paddingBottom) || 0;\n wrapperPaddingTopBottom = paddingTop + paddingBottom;\n }\n\n // \uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uACC4\uC0B0 (\uD654\uC0B4\uD45C + \uC704\uC544\uB798 \uB9C8\uC9C4, \uD654\uC0B4\uD45C \uC5C6\uC5B4\uB3C4 \uC704\uC544\uB798 \uB9C8\uC9C4)\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n\n // \uC378 \uB192\uC774 \uACC4\uC0B0 (\uC0AC\uC6A9\uC790 \uC124\uC815 \uCD5C\uC18C \uB192\uC774 \uC0AC\uC6A9, \uD654\uC0B4\uD45C \uACF5\uAC04 \uC81C\uC678, wrapper \uD328\uB529 \uCD94\uAC00)\n const availableHeight =\n containerHeight - arrowSpace + wrapperPaddingTopBottom;\n const scrollRatio = containerHeight / contentHeight;\n const calculatedThumbHeight = Math.max(\n availableHeight * scrollRatio,\n thumbMinHeight\n );\n\n // \uC378 \uC704\uCE58 \uACC4\uC0B0 (\uD654\uC0B4\uD45C\uC640 \uAC04\uACA9 \uACF5\uAC04 \uC81C\uC678)\n const scrollableHeight = contentHeight - containerHeight;\n const thumbScrollableHeight =\n availableHeight - calculatedThumbHeight;\n const calculatedThumbTop =\n scrollableHeight > 0\n ? (scrollTop / scrollableHeight) * thumbScrollableHeight\n : 0;\n\n setThumbHeight(calculatedThumbHeight);\n setThumbTop(calculatedThumbTop);\n }, [\n findScrollableElement,\n clearHideTimer,\n showArrows,\n finalThumbWidth,\n thumbMinHeight,\n finalAutoHideConfig.enabled,\n ]);\n\n // \uC378 \uB4DC\uB798\uADF8 \uC2DC\uC791\n const handleThumbMouseDown = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n setIsDragging(true);\n setDragStart({\n y: event.clientY,\n scrollTop: actualScrollContainer.scrollTop,\n });\n\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [findScrollableElement, clearHideTimer, maintainFocus]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC911\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragging) return;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n const scrollableHeight = contentHeight - containerHeight;\n\n const deltaY = event.clientY - dragStart.y;\n const thumbScrollableHeight = containerHeight - thumbHeight;\n const scrollDelta =\n (deltaY / thumbScrollableHeight) * scrollableHeight;\n\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableHeight,\n dragStart.scrollTop + scrollDelta\n )\n );\n\n actualScrollContainer.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragging,\n dragStart,\n thumbHeight,\n updateScrollbar,\n findScrollableElement,\n ]\n );\n\n // \uC378 \uB4DC\uB798\uADF8 \uC885\uB8CC\n const handleMouseUp = useCallback(() => {\n setIsDragging(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay); // \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uD2B8\uB799 \uD074\uB9AD\uC73C\uB85C \uC2A4\uD06C\uB864 \uC810\uD504\n const handleTrackClick = useCallback(\n (event: React.MouseEvent) => {\n if (!scrollbarRef.current) {\n return;\n }\n\n const scrollbar = scrollbarRef.current;\n const rect = scrollbar.getBoundingClientRect();\n const clickY = event.clientY - rect.top;\n\n const actualScrollContainer = findScrollableElement();\n if (!actualScrollContainer) {\n return;\n }\n\n const containerHeight = actualScrollContainer.clientHeight;\n const contentHeight = actualScrollContainer.scrollHeight;\n\n const scrollRatio = clickY / containerHeight;\n const newScrollTop =\n scrollRatio * (contentHeight - containerHeight);\n\n actualScrollContainer.scrollTop = Math.max(\n 0,\n Math.min(contentHeight - containerHeight, newScrollTop)\n );\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n finalAutoHideConfig.delay,\n findScrollableElement,\n maintainFocus,\n ]\n );\n\n // \uC704\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleUpArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current) return;\n\n const newScrollTop = Math.max(\n 0,\n containerRef.current.scrollTop - arrowStep\n );\n\n containerRef.current.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uD074\uB9AD \uD578\uB4E4\uB7EC\n const handleDownArrowClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!containerRef.current || !contentRef.current) return;\n\n const container = containerRef.current;\n const content = contentRef.current;\n const maxScrollTop =\n content.scrollHeight - container.clientHeight;\n const newScrollTop = Math.min(\n maxScrollTop,\n container.scrollTop + arrowStep\n );\n\n container.scrollTop = newScrollTop;\n updateScrollbar();\n\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n\n // \uD3EC\uCEE4\uC2A4 \uC720\uC9C0 (\uD0A4\uBCF4\uB4DC \uC785\uB825\uC774 \uACC4\uC18D \uC791\uB3D9\uD558\uB3C4\uB85D)\n maintainFocus();\n },\n [\n updateScrollbar,\n setHideTimer,\n arrowStep,\n finalAutoHideConfig.delay,\n maintainFocus,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC2DC\uC791\n const handleDragScrollStart = useCallback(\n (event: React.MouseEvent) => {\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uBE44\uD65C\uC131\uD654\uB41C \uACBD\uC6B0\n if (!finalDragScrollConfig.enabled) return;\n\n // \uD14D\uC2A4\uD2B8 \uC785\uB825 \uC694\uC18C\uB098 \uC81C\uC678 \uB300\uC0C1\uC774\uBA74 \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uD558\uC9C0 \uC54A\uC74C\n const target = event.target as Element;\n if (isTextInputElement(target, finalDragScrollConfig)) {\n return;\n }\n\n // \uC624\uB978\uCABD \uD074\uB9AD\uC774\uB098 \uD720 \uD074\uB9AD\uC740 \uC81C\uC678\n if (event.button !== 0) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n // \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC601\uC5ED\uC774 \uC544\uB2C8\uBA74 \uC81C\uC678\n if (\n scrollableElement.scrollHeight <=\n scrollableElement.clientHeight\n )\n return;\n\n event.preventDefault();\n setIsDragScrolling(true);\n setDragScrollStart({\n x: event.clientX,\n y: event.clientY,\n scrollTop: scrollableElement.scrollTop,\n scrollLeft: scrollableElement.scrollLeft || 0,\n });\n\n // \uC2A4\uD06C\uB864\uBC14\uB294 \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD560 \uB54C \uD45C\uC2DC (handleDragScrollMove\uC5D0\uC11C \uCC98\uB9AC)\n clearHideTimer();\n },\n [\n finalDragScrollConfig,\n isTextInputElement,\n findScrollableElement,\n clearHideTimer,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC911\n const handleDragScrollMove = useCallback(\n (event: MouseEvent) => {\n if (!isDragScrolling) return;\n\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const deltaX = dragScrollStart.x - event.clientX;\n const deltaY = dragScrollStart.y - event.clientY;\n\n // \uBBF8\uC138\uD55C \uC6C0\uC9C1\uC784 \uBB34\uC2DC (3px \uC774\uD558)\n if (Math.abs(deltaY) < 3 && Math.abs(deltaX) < 3) {\n return;\n }\n\n // \uC2E4\uC81C \uB4DC\uB798\uADF8\uAC00 \uBC1C\uC0DD\uD588\uC73C\uBBC0\uB85C \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n setScrollbarVisible(true);\n\n // \uC138\uB85C \uC2A4\uD06C\uB864\uB9CC \uCC98\uB9AC (\uAC00\uB85C \uC2A4\uD06C\uB864\uC740 \uD544\uC694\uC2DC \uB098\uC911\uC5D0 \uCD94\uAC00)\n const newScrollTop = Math.max(\n 0,\n Math.min(\n scrollableElement.scrollHeight -\n scrollableElement.clientHeight,\n dragScrollStart.scrollTop + deltaY\n )\n );\n\n scrollableElement.scrollTop = newScrollTop;\n updateScrollbar();\n },\n [\n isDragScrolling,\n dragScrollStart,\n findScrollableElement,\n updateScrollbar,\n ]\n );\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC885\uB8CC\n const handleDragScrollEnd = useCallback(() => {\n setIsDragScrolling(false);\n if (isScrollable()) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);\n\n // \uC2A4\uD06C\uB864 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 (externalScrollContainer \uC6B0\uC120 \uC0AC\uC6A9)\n useEffect(() => {\n const handleScroll = (event: Event) => {\n updateScrollbar();\n\n // \uC2A4\uD06C\uB864 \uC911\uC5D0\uB294 \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC2E4\uC81C \uC2A4\uD06C\uB864 \uBC1C\uC0DD \uC2DC)\n clearWheelShowTimer();\n\n // \uD720 \uC2A4\uD06C\uB864 \uC911\uC774\uBA74 \uBE60\uB978 \uC228\uAE40, \uC544\uB2C8\uBA74 \uAE30\uBCF8 \uC228\uAE40 \uC2DC\uAC04 \uC801\uC6A9\n const delay = isWheelScrolling\n ? finalAutoHideConfig.delayOnWheel\n : finalAutoHideConfig.delay;\n setHideTimer(delay);\n\n if (onScroll) {\n onScroll(event);\n }\n };\n\n const handleWheel = () => {\n // \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD45C\uC2DC\n setIsWheelScrolling(true);\n\n // \uAE30\uC874 \uD720 \uD0C0\uC774\uBA38 \uC81C\uAC70\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n\n // 300ms \uD6C4 \uD720 \uC2A4\uD06C\uB864 \uC0C1\uD0DC \uD574\uC81C (\uD720 \uC2A4\uD06C\uB864\uC774 \uB05D\uB0AC\uB2E4\uACE0 \uAC04\uC8FC)\n wheelTimeoutRef.current = setTimeout(() => {\n setIsWheelScrolling(false);\n }, 300);\n\n // \uD720 \uC774\uBCA4\uD2B8 \uC2DC 50ms \uB514\uBC14\uC6B4\uC2A4 \uC801\uC6A9 (\uC2E4\uC81C \uC2A4\uD06C\uB864 \uBC1C\uC0DD \uC2DC handleScroll\uC5D0\uC11C \uCDE8\uC18C\uB428)\n clearWheelShowTimer();\n wheelShowTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n wheelShowTimeoutRef.current = null;\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC \uD6C4 \uC790\uB3D9 \uC228\uAE40 \uD0C0\uC774\uBA38 \uC124\uC815\n setHideTimer(finalAutoHideConfig.delayOnWheel);\n }, 50);\n };\n\n const elementsToWatch: HTMLElement[] = [];\n\n // \uC2E4\uC81C \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uC694\uC18C \uCC3E\uAE30\n const scrollableElement = findScrollableElement();\n if (scrollableElement) {\n elementsToWatch.push(scrollableElement);\n }\n\n // fallback: \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uC640 children \uC694\uC18C\uB3C4 \uAC10\uC9C0\n const container = containerRef.current;\n if (container && !scrollableElement) {\n elementsToWatch.push(container);\n\n // children \uC694\uC18C\uB4E4\uC758 \uC2A4\uD06C\uB864\uB3C4 \uAC10\uC9C0 (\uC911\uCCA9\uB41C OverlayScrollbar \uC81C\uC678)\n const childScrollableElements = container.querySelectorAll(\n '[data-virtuoso-scroller], [style*=\"overflow\"], .virtuoso-scroller, [style*=\"overflow: auto\"], [style*=\"overflow:auto\"]'\n );\n childScrollableElements.forEach((child) => {\n const element = child as HTMLElement;\n\n // \uB2E4\uB978 OverlayScrollbar\uC758 container\uB294 \uC81C\uC678\n if (\n element !== container &&\n element.classList.contains(\n \"overlay-scrollbar-container\"\n )\n ) {\n return;\n }\n\n // \uBD80\uBAA8 \uC911\uC5D0 \uB2E4\uB978 OverlayScrollbar container\uAC00 \uC788\uC73C\uBA74 \uC81C\uC678\n let parent: HTMLElement | null = element.parentElement;\n while (parent && parent !== container) {\n if (\n parent.classList.contains(\n \"overlay-scrollbar-container\"\n ) &&\n parent !== container\n ) {\n return; // \uC911\uCCA9\uB41C OverlayScrollbar \uB0B4\uBD80\uC774\uBBC0\uB85C \uC81C\uC678\n }\n parent = parent.parentElement;\n }\n\n elementsToWatch.push(element);\n });\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uC5D0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uB4F1\uB85D\n elementsToWatch.forEach((element) => {\n element.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n });\n element.addEventListener(\"wheel\", handleWheel, {\n passive: true,\n });\n });\n\n return () => {\n // \uBAA8\uB4E0 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108 \uC81C\uAC70\n elementsToWatch.forEach((element) => {\n element.removeEventListener(\"scroll\", handleScroll);\n element.removeEventListener(\"wheel\", handleWheel);\n });\n\n if (wheelTimeoutRef.current) {\n clearTimeout(wheelTimeoutRef.current);\n }\n if (wheelShowTimeoutRef.current) {\n clearTimeout(wheelShowTimeoutRef.current);\n }\n };\n }, [\n findScrollableElement,\n updateScrollbar,\n onScroll,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig,\n isWheelScrolling,\n ]);\n\n // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uD578\uB4E4\uB7EC (\uBC29\uD5A5\uD0A4, PageUp/PageDown/Home/End)\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const scrollableElement = findScrollableElement();\n if (!scrollableElement) return;\n\n const { key } = event;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollableElement;\n const maxScrollTop = scrollHeight - clientHeight;\n\n // \uD55C \uC904 \uC2A4\uD06C\uB864 \uB2E8\uC704 (rowHeight \uB610\uB294 \uAE30\uBCF8\uAC12)\n const lineScrollStep = 50;\n\n let newScrollTop: number | null = null;\n\n switch (key) {\n case \"ArrowUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - lineScrollStep);\n break;\n case \"ArrowDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + lineScrollStep\n );\n break;\n case \"PageUp\":\n event.preventDefault();\n newScrollTop = Math.max(0, scrollTop - clientHeight);\n break;\n case \"PageDown\":\n event.preventDefault();\n newScrollTop = Math.min(\n maxScrollTop,\n scrollTop + clientHeight\n );\n break;\n case \"Home\":\n event.preventDefault();\n newScrollTop = 0;\n break;\n case \"End\":\n event.preventDefault();\n newScrollTop = maxScrollTop;\n break;\n default:\n return;\n }\n\n if (newScrollTop !== null) {\n // \uC378 \uC704\uCE58\uB97C \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\n const scrollRatio = newScrollTop / maxScrollTop;\n const arrowSpace = showArrows\n ? finalThumbWidth * 2 + finalTrackConfig.margin * 4\n : finalTrackConfig.margin * 2;\n const availableHeight = clientHeight - arrowSpace;\n const scrollableThumbHeight = availableHeight - thumbHeight;\n const newThumbTop = scrollableThumbHeight * scrollRatio;\n\n setThumbTop(newThumbTop);\n\n // \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uC989\uC2DC \uBCC0\uACBD (\uC560\uB2C8\uBA54\uC774\uC158 \uC5C6\uC74C)\n scrollableElement.scrollTop = newScrollTop;\n\n // \uC2A4\uD06C\uB864\uBC14 \uD45C\uC2DC\n clearHideTimer();\n setScrollbarVisible(true);\n setHideTimer(finalAutoHideConfig.delay);\n }\n };\n\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n container.removeEventListener(\"keydown\", handleKeyDown);\n };\n }\n }, [\n findScrollableElement,\n showArrows,\n finalThumbWidth,\n finalTrackConfig.margin,\n thumbHeight,\n clearHideTimer,\n setHideTimer,\n finalAutoHideConfig.delay,\n ]);\n\n // \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864 \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragScrolling) {\n document.addEventListener(\"mousemove\", handleDragScrollMove);\n document.addEventListener(\"mouseup\", handleDragScrollEnd);\n return () => {\n document.removeEventListener(\n \"mousemove\",\n handleDragScrollMove\n );\n document.removeEventListener(\n \"mouseup\",\n handleDragScrollEnd\n );\n };\n }\n }, [isDragScrolling, handleDragScrollMove, handleDragScrollEnd]);\n\n // \uC804\uC5ED \uB9C8\uC6B0\uC2A4 \uC774\uBCA4\uD2B8 \uB9AC\uC2A4\uB108\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }\n }, [isDragging, handleMouseMove, handleMouseUp]);\n\n // \uCD08\uAE30 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8\n useEffect(() => {\n // \uC989\uC2DC \uC5C5\uB370\uC774\uD2B8\n updateScrollbar();\n // \uC57D\uAC04\uC758 \uC9C0\uC5F0 \uD6C4\uC5D0\uB3C4 \uC5C5\uB370\uC774\uD2B8 (DOM\uC774 \uC644\uC804\uD788 \uB80C\uB354\uB9C1\uB41C \uD6C4)\n const timer = setTimeout(() => {\n updateScrollbar();\n }, 100);\n return () => clearTimeout(timer);\n }, [updateScrollbar]);\n\n // \uCEF4\uD3EC\uB10C\uD2B8 \uCD08\uAE30\uD654 \uC644\uB8CC \uD45C\uC2DC (hover \uC774\uBCA4\uD2B8 \uD65C\uC131\uD654\uC6A9)\n useLayoutEffect(() => {\n setIsInitialized(true);\n // \uCD08\uAE30\uD654 \uC9C1\uD6C4 \uC2A4\uD06C\uB864\uBC14 \uC5C5\uB370\uC774\uD2B8 (\uC378 \uB192\uC774 \uC815\uD655\uD558\uAC8C \uACC4\uC0B0)\n updateScrollbar();\n // \uC790\uB3D9 \uC228\uAE40\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4 \uC788\uC73C\uBA74 \uC2A4\uD06C\uB864\uBC14\uB97C \uD56D\uC0C1 \uD45C\uC2DC\n if (!finalAutoHideConfig.enabled && isScrollable()) {\n setScrollbarVisible(true);\n }\n }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);\n\n // Resize observer\uB85C \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n updateScrollbar();\n });\n\n const elementsToObserve: HTMLElement[] = [];\n\n // \uB0B4\uBD80 \uCEE8\uD14C\uC774\uB108\uB4E4 \uAD00\uCC30\n if (containerRef.current) {\n elementsToObserve.push(containerRef.current);\n }\n if (contentRef.current) {\n elementsToObserve.push(contentRef.current);\n }\n\n // \uCE90\uC2DC\uB41C \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108\uB3C4 \uAD00\uCC30\n if (\n cachedScrollContainerRef.current &&\n document.contains(cachedScrollContainerRef.current)\n ) {\n elementsToObserve.push(cachedScrollContainerRef.current);\n }\n\n // \uBAA8\uB4E0 \uC694\uC18C\uB4E4 \uAD00\uCC30 \uC2DC\uC791\n elementsToObserve.forEach((element) => {\n resizeObserver.observe(element);\n });\n\n return () => resizeObserver.disconnect();\n }, [updateScrollbar]);\n\n // MutationObserver\uB85C DOM \uBCC0\uACBD \uAC10\uC9C0\n useEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n // \uCE90\uC2DC \uCD08\uAE30\uD654\uD558\uC5EC \uC0C8\uB85C\uC6B4 \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 \uAC10\uC9C0\n cachedScrollContainerRef.current = null;\n updateScrollbar();\n });\n\n observer.observe(containerRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"style\"],\n });\n\n return () => observer.disconnect();\n }, [updateScrollbar]);\n\n // trackWidth\uAC00 thumbWidth\uBCF4\uB2E4 \uC791\uC73C\uBA74 thumbWidth\uC640 \uAC19\uAC8C \uC124\uC815\n const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);\n\n // \uC6F9\uD0B7 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30\uC6A9 CSS \uB3D9\uC801 \uC8FC\uC785\n useEffect(() => {\n const styleId = \"overlay-scrollbar-webkit-hide\";\n\n // \uC774\uBBF8 \uC2A4\uD0C0\uC77C\uC774 \uC788\uC73C\uBA74 \uC81C\uAC70\n const existingStyle = document.getElementById(styleId);\n if (existingStyle) {\n existingStyle.remove();\n }\n\n const style = document.createElement(\"style\");\n style.id = styleId;\n style.textContent = `\n .overlay-scrollbar-container::-webkit-scrollbar {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-track {\n display: none !important;\n }\n .overlay-scrollbar-container::-webkit-scrollbar-thumb {\n display: none !important;\n }\n .overlay-scrollbar-container:focus {\n outline: 2px solid rgba(0, 123, 255, 0.3);\n outline-offset: -2px;\n }\n .overlay-scrollbar-container:focus-visible {\n outline: 2px solid rgba(0, 123, 255, 0.5);\n outline-offset: -2px;\n }\n `;\n document.head.appendChild(style);\n\n return () => {\n const styleToRemove = document.getElementById(styleId);\n if (styleToRemove) {\n styleToRemove.remove();\n }\n };\n }, []);\n\n return (\n <div\n ref={wrapperRef}\n className={`overlay-scrollbar-wrapper ${className}`}\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n minHeight: 0, // shrink \uAC00\uB2A5\uD558\uB3C4\uB85D\n height: \"100%\", // \uBD80\uBAA8\uC758 \uC804\uCCB4 \uB192\uC774 \uC0AC\uC6A9\n flex: \"1 1 0%\", // \uAE30\uBCF8\uC801\uC73C\uB85C flex item\uC73C\uB85C \uB3D9\uC791\n ...style, // \uC0AC\uC6A9\uC790\uAC00 flex\uB97C override \uD560 \uC218 \uC788\uB3C4\uB85D style\uC744 \uB4A4\uC5D0 \uBC30\uCE58\n }}\n >\n {/* \uC2A4\uD06C\uB864 \uCEE8\uD14C\uC774\uB108 */}\n <div\n ref={containerRef}\n className=\"overlay-scrollbar-container\"\n tabIndex={-1} // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD558\uAC8C \uD568\n onMouseDown={handleDragScrollStart}\n style={{\n display: \"flex\",\n width: \"100%\", // \uBA85\uC2DC\uC801 \uB108\uBE44 \uC124\uC815\n flex: \"1 1 auto\", // flex item\uC73C\uB85C \uC124\uC815\uD558\uC5EC \uB192\uC774\uB97C \uC790\uB3D9\uC73C\uB85C \uACC4\uC0B0\n minHeight: 0, // \uCD5C\uC18C \uB192\uC774 \uBCF4\uC7A5\n overflow: \"auto\", // \uB124\uC774\uD2F0\uBE0C \uC2A4\uD06C\uB864 \uAE30\uB2A5 \uC720\uC9C0\n // \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8 \uC2A4\uD06C\uB864\uBC14\uB9CC \uC228\uAE30\uAE30\n scrollbarWidth: \"none\", // Firefox\n msOverflowStyle: \"none\", // IE/Edge\n // \uD0A4\uBCF4\uB4DC \uD3EC\uCEE4\uC2A4 \uC2A4\uD0C0\uC77C (\uC811\uADFC\uC131)\n outline: \"none\", // \uAE30\uBCF8 \uC544\uC6C3\uB77C\uC778 \uC81C\uAC70\n userSelect: isDragScrolling ? \"none\" : \"auto\", // \uB4DC\uB798\uADF8 \uC911 \uD14D\uC2A4\uD2B8 \uC120\uD0DD \uBC29\uC9C0\n ...containerStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n <div\n ref={contentRef}\n className=\"overlay-scrollbar-content\"\n style={{\n flex: \"1 1 0%\", // grow\uD558\uC5EC \uACF5\uAC04 \uCC44\uC6B0\uAE30\n minHeight: 0, // flex shrink \uD5C8\uC6A9\n display: \"flex\", // flex \uCEE8\uD14C\uC774\uB108\uB85C \uC124\uC815\n flexDirection: \"column\", // \uC138\uB85C \uBC29\uD5A5 \uC815\uB82C\n ...contentStyle, // \uC0AC\uC6A9\uC790 \uC815\uC758 \uC2A4\uD0C0\uC77C \uC801\uC6A9\n }}\n >\n {children}\n </div>\n </div>\n\n {/* \uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14 */}\n {showScrollbar && hasScrollableContent && (\n <div\n ref={scrollbarRef}\n className=\"overlay-scrollbar-track\"\n onMouseEnter={() => {\n // \uC228\uAE40 \uD0C0\uC774\uBA38\uB294 \uC989\uC2DC \uCDE8\uC18C\n clearHideTimer();\n\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uC124\uC815 (100ms \uD6C4 \uD45C\uC2DC)\n hoverEnterTimeoutRef.current = setTimeout(() => {\n setScrollbarVisible(true);\n hoverEnterTimeoutRef.current = null;\n }, 100);\n }}\n onMouseLeave={() => {\n // \uD638\uBC84 \uC9C4\uC785 \uD0C0\uC774\uBA38 \uCDE8\uC18C (\uC9C0\uB098\uAC00\uAE30\uB9CC \uD55C \uACBD\uC6B0)\n clearHoverEnterTimer();\n\n if (!isDragging) {\n setHideTimer(finalAutoHideConfig.delay);\n }\n }}\n style={{\n position: \"absolute\",\n top: 0,\n right: 0,\n width: `${adjustedTrackWidth}px`,\n height: \"100%\",\n opacity: scrollbarVisible ? 1 : 0,\n transition: \"opacity 0.2s ease-in-out\",\n cursor: \"pointer\",\n zIndex: 1000,\n pointerEvents: \"auto\",\n }}\n >\n {/* \uC2A4\uD06C\uB864\uBC14 \uD2B8\uB799 \uBC30\uACBD */}\n {finalTrackConfig.visible && (\n <div\n className=\"overlay-scrollbar-track-background\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleTrackClick(e);\n }}\n style={{\n position: \"absolute\",\n top: showArrows\n ? `${\n finalThumbConfig.width +\n finalTrackConfig.margin * 2\n }px`\n : `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbConfig.width) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbConfig.width}px`,\n height: showArrows\n ? `calc(100% - ${\n finalThumbConfig.width * 2 +\n finalTrackConfig.margin * 4\n }px)`\n : `calc(100% - ${\n finalTrackConfig.margin * 2\n }px)`,\n backgroundColor: finalTrackConfig.color,\n borderRadius: `${finalTrackConfig.radius}px`,\n cursor: \"pointer\",\n }}\n />\n )}\n\n {/* \uC2A4\uD06C\uB864\uBC14 \uC378 */}\n <div\n ref={thumbRef}\n className=\"overlay-scrollbar-thumb\"\n onMouseDown={handleThumbMouseDown}\n onMouseEnter={() => setIsThumbHovered(true)}\n onMouseLeave={() => setIsThumbHovered(false)}\n style={{\n position: \"absolute\",\n top: `${\n (showArrows\n ? finalThumbWidth +\n finalTrackConfig.margin * 2\n : finalTrackConfig.margin) + thumbTop\n }px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${Math.max(\n thumbHeight,\n thumbMinHeight\n )}px`,\n backgroundColor:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverColor\n : finalThumbConfig.color,\n opacity:\n isThumbHovered || isDragging\n ? finalThumbConfig.hoverOpacity\n : finalThumbConfig.opacity,\n borderRadius: `${finalThumbConfig.radius}px`,\n cursor: \"pointer\",\n transition:\n \"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out\",\n }}\n />\n </div>\n )}\n\n {/* \uC704\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-up-arrow\"\n onClick={handleUpArrowClick}\n onMouseEnter={() => setHoveredArrow(\"up\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n top: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"up\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25B2\n </div>\n )}\n\n {/* \uC544\uB798\uCABD \uD654\uC0B4\uD45C \uBC84\uD2BC */}\n {showScrollbar && hasScrollableContent && showArrows && (\n <div\n className=\"overlay-scrollbar-down-arrow\"\n onClick={handleDownArrowClick}\n onMouseEnter={() => setHoveredArrow(\"down\")}\n onMouseLeave={() => setHoveredArrow(null)}\n style={{\n position: \"absolute\",\n bottom: `${finalTrackConfig.margin}px`,\n right:\n finalTrackConfig.alignment === \"right\"\n ? \"0px\"\n : `${\n (adjustedTrackWidth -\n finalThumbWidth) /\n 2\n }px`, // \uD2B8\uB799 \uC815\uB82C\n width: `${finalThumbWidth}px`,\n height: `${finalThumbWidth}px`,\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${Math.max(\n finalThumbWidth * 0.75,\n 8\n )}px`,\n color:\n hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverColor\n : finalArrowsConfig.color,\n userSelect: \"none\",\n zIndex: 1001,\n opacity: scrollbarVisible\n ? hoveredArrow === \"down\"\n ? finalArrowsConfig.hoverOpacity\n : finalArrowsConfig.opacity\n : 0,\n transition:\n \"opacity 0.2s ease-in-out, color 0.15s ease-in-out\",\n }}\n >\n \u25BC\n </div>\n )}\n </div>\n );\n }\n);\n\nexport default OverlayScrollbar;\nexport { OverlayScrollbar };\n", "/**\n * MIT License\n *\n * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { DragScrollConfig } from \"../types\";\n\n// \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uD074\uB798\uC2A4\uB4E4 (\uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uC5D0\uC11C \uD655\uC778)\nconst DEFAULT_EXCLUDE_CLASSES = [\n // \uAE30\uBCF8 \uC785\uB825 \uC694\uC18C\uB4E4\n \"editor\",\n \"textarea\",\n \"input\",\n \"select\",\n \"textfield\",\n \"form-control\",\n \"contenteditable\",\n\n // Material-UI \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"MuiInputBase-input\",\n \"MuiSelect-select\",\n \"MuiOutlinedInput-input\",\n \"MuiFilledInput-input\",\n \"MuiInput-input\",\n \"MuiFormControl-root\",\n \"MuiTextField-root\",\n \"MuiSelect-root\",\n \"MuiOutlinedInput-root\",\n \"MuiFilledInput-root\",\n \"MuiInput-root\",\n \"MuiAutocomplete-input\",\n \"MuiDatePicker-input\",\n \"MuiSlider-thumb\",\n \"MuiSlider-rail\",\n \"MuiSlider-track\",\n \"MuiSlider-mark\",\n \"MuiSlider-markLabel\",\n \"MuiSlider-root\",\n \"MuiSlider-colorPrimary\",\n \"MuiSlider-sizeMedium\",\n \"MuiIconButton-root\",\n \"MuiButton-root\",\n \"MuiButtonBase-root\",\n \"MuiTouchRipple-root\",\n \"MuiCheckbox-root\",\n \"MuiRadio-root\",\n \"MuiSwitch-root\",\n \"PrivateSwitchBase-root\",\n\n // Ant Design \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ant-input\",\n \"ant-input-affix-wrapper\",\n \"ant-input-group-addon\",\n \"ant-input-number\",\n \"ant-input-number-handler\",\n \"ant-select\",\n \"ant-select-selector\",\n \"ant-select-selection-search\",\n \"ant-select-dropdown\",\n \"ant-cascader\",\n \"ant-cascader-input\",\n \"ant-picker\",\n \"ant-picker-input\",\n \"ant-time-picker\",\n \"ant-calendar-picker\",\n \"ant-slider\",\n \"ant-slider-track\",\n \"ant-slider-handle\",\n \"ant-switch\",\n \"ant-checkbox\",\n \"ant-checkbox-wrapper\",\n \"ant-radio\",\n \"ant-radio-wrapper\",\n \"ant-rate\",\n \"ant-upload\",\n \"ant-upload-drag\",\n \"ant-form-item\",\n \"ant-form-item-control\",\n \"ant-btn\",\n \"ant-dropdown\",\n \"ant-dropdown-trigger\",\n \"ant-menu\",\n \"ant-menu-item\",\n \"ant-tooltip\",\n \"ant-popover\",\n \"ant-modal\",\n \"ant-drawer\",\n \"ant-tree-select\",\n \"ant-auto-complete\",\n \"ant-mentions\",\n \"ant-transfer\",\n\n // Shadcn/ui \uCEF4\uD3EC\uB10C\uD2B8\uB4E4\n \"ui-input\",\n \"ui-textarea\",\n \"ui-select\",\n \"ui-select-trigger\",\n \"ui-select-content\",\n \"ui-select-item\",\n \"ui-button\",\n \"ui-checkbox\",\n \"ui-radio-group\",\n \"ui-switch\",\n \"ui-slider\",\n \"ui-range-slider\",\n \"ui-calendar\",\n \"ui-date-picker\",\n \"ui-combobox\",\n \"ui-command\",\n \"ui-command-input\",\n \"ui-popover\",\n \"ui-dialog\",\n \"ui-sheet\",\n \"ui-dropdown-menu\",\n \"ui-context-menu\",\n \"ui-menubar\",\n \"ui-navigation-menu\",\n \"ui-form\",\n \"ui-form-control\",\n \"ui-form-item\",\n \"ui-form-field\",\n \"ui-label\",\n // Radix UI \uAE30\uBCF8 \uD074\uB798\uC2A4\uB4E4 (Shadcn \uAE30\uBC18)\n \"radix-ui\",\n \"radix-select\",\n \"radix-dropdown\",\n \"radix-dialog\",\n \"radix-popover\",\n \"radix-accordion\",\n \"radix-tabs\",\n \"radix-slider\",\n \"radix-switch\",\n \"radix-checkbox\",\n \"radix-radio\",\n\n // Quill Editor\n \"ql-editor\",\n \"ql-container\",\n \"ql-toolbar\",\n \"ql-picker\",\n \"ql-picker-label\",\n \"ql-picker-options\",\n \"ql-formats\",\n \"ql-snow\",\n \"ql-bubble\",\n \"quill\",\n \"quilleditor\",\n\n // Monaco Editor\n \"monaco-editor\",\n \"monaco-editor-background\",\n \"view-lines\",\n \"decorationsOverviewRuler\",\n \"monaco-scrollable-element\",\n\n // CodeMirror\n \"CodeMirror\",\n \"CodeMirror-code\",\n \"CodeMirror-lines\",\n \"CodeMirror-scroll\",\n \"CodeMirror-sizer\",\n \"cm-editor\",\n \"cm-focused\",\n \"cm-content\",\n\n // TinyMCE\n \"tox-editor-container\",\n \"tox-editor-header\",\n \"tox-edit-area\",\n \"tox-tinymce\",\n \"mce-content-body\",\n\n // CKEditor\n \"ck-editor\",\n \"ck-content\",\n \"ck-toolbar\",\n \"ck-editor__editable\",\n \"ck-widget\",\n\n // Slate.js\n \"slate-editor\",\n \"slate-content\",\n\n // Draft.js\n \"DraftEditor-root\",\n \"DraftEditor-editorContainer\",\n \"public-DraftEditor-content\",\n\n // EhfuseEditor\n \"ehfuse-editor\",\n \"ehfuse-editor-wrapper\",\n \"ehfuse-editor-content\",\n \"ehfuse-toolbar\",\n \"ehfuse-toolbar-group\",\n \"ehfuse-cursor\",\n\n // \uAE30\uD0C0 \uC5D0\uB514\uD130\uB4E4\n \"text-editor\",\n \"rich-text-editor\",\n \"wysiwyg\",\n \"ace_editor\",\n \"ace_content\",\n];\n\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\n/**\n * \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC774 \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uC694\uC18C\uB4E4\uC778\uC9C0 \uD655\uC778\n */\nexport const isTextInputElement = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n const tagName = element.tagName.toLowerCase();\n const inputTypes = [\n \"text\",\n \"password\",\n \"email\",\n \"number\",\n \"search\",\n \"tel\",\n \"url\",\n \"checkbox\",\n \"radio\",\n ];\n\n // input \uD0DC\uADF8\uC774\uBA74\uC11C \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD0C0\uC785\uC774\uB098 \uCCB4\uD06C\uBC15\uC2A4/\uB77C\uB514\uC624\uC778 \uACBD\uC6B0\n if (tagName === \"input\") {\n const type = (element as HTMLInputElement).type;\n return inputTypes.includes(type);\n }\n\n // textarea, select, \uD3B8\uC9D1 \uAC00\uB2A5\uD55C \uC694\uC18C\uB4E4\n if ([\"textarea\", \"select\", \"button\"].includes(tagName)) {\n return true;\n }\n\n // SVG \uC694\uC18C\uB4E4 (\uC544\uC774\uCF58\uB4E4)\n if (\n [\n \"svg\",\n \"path\",\n \"circle\",\n \"rect\",\n \"line\",\n \"polygon\",\n \"polyline\",\n ].includes(tagName)\n ) {\n return true;\n }\n\n // contenteditable \uC18D\uC131\uC774 \uC788\uB294 \uC694\uC18C\n if (element.getAttribute(\"contenteditable\") === \"true\") {\n return true;\n }\n\n // \uCD94\uAC00 \uC140\uB809\uD130 \uCCB4\uD06C\n if (config?.excludeSelectors) {\n for (const selector of config.excludeSelectors) {\n if (element.matches(selector)) {\n return true;\n }\n }\n }\n\n return checkElementAndParents(element, config);\n};\n\n/**\n * \uC790\uC2E0 \uB610\uB294 \uBD80\uBAA8 \uC694\uC18C\uB4E4\uC744 \uD655\uC778\uD558\uC5EC \uB4DC\uB798\uADF8 \uC2A4\uD06C\uB864\uC744 \uC81C\uC678\uD560 \uC694\uC18C\uC778\uC9C0 \uD310\uB2E8\n */\nconst checkElementAndParents = (\n element: Element,\n config?: DragScrollConfig\n): boolean => {\n // \uBAA8\uB4E0 \uC81C\uC678 \uD074\uB798\uC2A4\uB4E4 \uD569\uCE58\uAE30 (\uAE30\uBCF8 \uD074\uB798\uC2A4 + \uC0AC\uC6A9\uC790 \uCD94\uAC00 \uD074\uB798\uC2A4)\n const allExcludeClasses = [\n ...DEFAULT_EXCLUDE_CLASSES,\n ...(config?.excludeClasses || []),\n ];\n\n let currentElement: Element | null = element;\n let depth = 0;\n const maxDepth = 5; // \uCD5C\uB300 5\uB2E8\uACC4\uAE4C\uC9C0 \uBD80\uBAA8 \uC694\uC18C \uD655\uC778\n\n while (currentElement && depth <= maxDepth) {\n // \uD604\uC7AC \uC694\uC18C\uAC00 \uC81C\uC678 \uD074\uB798\uC2A4\uB97C \uAC00\uC9C0\uACE0 \uC788\uB294\uC9C0 \uD655\uC778\n if (\n allExcludeClasses.some((cls) =>\n currentElement!.classList.contains(cls)\n )\n ) {\n return true;\n }\n\n // \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB8E8\uD2B8\uC5D0 \uB3C4\uB2EC\uD558\uBA74 \uC911\uB2E8\n if (currentElement.classList.contains(\"MuiDialogContent-root\")) {\n break;\n }\n\n currentElement = currentElement.parentElement;\n depth++;\n }\n\n return false;\n};\n\n/**\n * \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB098 \uBAA8\uB2EC\uC774 \uC0C1\uC704\uC5D0 \uC788\uB294\uC9C0 \uD655\uC778\n */\nexport const hasUpperModal = (scrollContainer: Element): boolean => {\n const currentDialog = scrollContainer.closest(\n \".MuiDialog-root\"\n ) as HTMLElement;\n if (!currentDialog) return false;\n\n const allModals = document.querySelectorAll(\n \".MuiDialog-root, .MuiModal-root, .MuiPopover-root\"\n );\n const currentZIndex = parseInt(\n window.getComputedStyle(currentDialog).zIndex || \"0\"\n );\n\n for (const modal of allModals) {\n if (modal !== currentDialog) {\n const modalElement = modal as HTMLElement;\n const modalZIndex = parseInt(\n window.getComputedStyle(modalElement).zIndex || \"0\"\n );\n\n if (\n modalZIndex > currentZIndex &&\n modalElement.style.display !== \"none\"\n ) {\n return true;\n }\n }\n }\n\n return false;\n};\n\n/**\n * \uD074\uB9AD\uD55C \uC694\uC18C\uAC00 \uB2E4\uB978 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB0B4\uBD80\uC778\uC9C0 \uD655\uC778\n */\nexport const isClickInOtherDialog = (\n clickedElement: Element,\n currentDialog: Element | null\n): boolean => {\n const parentDialog = clickedElement.closest(\n \".MuiDialog-root, .MuiPopover-root, .MuiModal-root\"\n );\n return parentDialog !== null && parentDialog !== currentDialog;\n};\n"],
|
|
5
|
+
"mappings": "ubAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,sBAAAE,GAAA,YAAAA,KAAA,eAAAC,GAAAH,ICwBA,IAAAI,EAUO,iBCPP,IAAMC,GAA0B,CAE5B,SACA,WACA,QACA,SACA,YACA,eACA,kBAGA,qBACA,mBACA,yBACA,uBACA,iBACA,sBACA,oBACA,iBACA,wBACA,sBACA,gBACA,wBACA,sBACA,kBACA,iBACA,kBACA,iBACA,sBACA,iBACA,yBACA,uBACA,qBACA,iBACA,qBACA,sBACA,mBACA,gBACA,iBACA,yBAGA,YACA,0BACA,wBACA,mBACA,2BACA,aACA,sBACA,8BACA,sBACA,eACA,qBACA,aACA,mBACA,kBACA,sBACA,aACA,mBACA,oBACA,aACA,eACA,uBACA,YACA,oBACA,WACA,aACA,kBACA,gBACA,wBACA,UACA,eACA,uBACA,WACA,gBACA,cACA,cACA,YACA,aACA,kBACA,oBACA,eACA,eAGA,WACA,cACA,YACA,oBACA,oBACA,iBACA,YACA,cACA,iBACA,YACA,YACA,kBACA,cACA,iBACA,cACA,aACA,mBACA,aACA,YACA,WACA,mBACA,kBACA,aACA,qBACA,UACA,kBACA,eACA,gBACA,WAEA,WACA,eACA,iBACA,eACA,gBACA,kBACA,aACA,eACA,eACA,iBACA,cAGA,YACA,eACA,aACA,YACA,kBACA,oBACA,aACA,UACA,YACA,QACA,cAGA,gBACA,2BACA,aACA,2BACA,4BAGA,aACA,kBACA,mBACA,oBACA,mBACA,YACA,aACA,aAGA,uBACA,oBACA,gBACA,cACA,mBAGA,YACA,aACA,aACA,sBACA,YAGA,eACA,gBAGA,mBACA,8BACA,6BAGA,gBACA,wBACA,wBACA,iBACA,uBACA,gBAGA,cACA,mBACA,UACA,aACA,aACJ,EAQaC,GAAqB,CAC9BC,EACAC,IACU,CACV,IAAMC,EAAUF,EAAQ,QAAQ,YAAY,EACtCG,EAAa,CACf,OACA,WACA,QACA,SACA,SACA,MACA,MACA,WACA,OACJ,EAGA,GAAID,IAAY,QAAS,CACrB,IAAME,EAAQ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",
|
|
6
6
|
"names": ["index_exports", "__export", "OverlayScrollbar_default", "__toCommonJS", "import_react", "DEFAULT_EXCLUDE_CLASSES", "isTextInputElement", "element", "config", "tagName", "inputTypes", "type", "selector", "checkElementAndParents", "allExcludeClasses", "currentElement", "depth", "maxDepth", "cls", "import_jsx_runtime", "DEFAULT_THUMB_CONFIG", "DEFAULT_TRACK_CONFIG", "DEFAULT_ARROWS_CONFIG", "DEFAULT_DRAG_SCROLL_CONFIG", "DEFAULT_AUTO_HIDE_CONFIG", "OverlayScrollbar", "className", "style", "containerStyle", "contentStyle", "children", "onScroll", "thumb", "track", "arrows", "dragScroll", "autoHide", "showScrollbar", "detectInnerScroll", "ref", "prevPropsRef", "wrapperRef", "containerRef", "contentRef", "scrollbarRef", "thumbRef", "cachedScrollContainerRef", "scrollbarVisible", "setScrollbarVisible", "isDragging", "setIsDragging", "isThumbHovered", "setIsThumbHovered", "dragStart", "setDragStart", "thumbHeight", "setThumbHeight", "thumbTop", "setThumbTop", "hasScrollableContent", "setHasScrollableContent", "isDragScrolling", "setIsDragScrolling", "dragScrollStart", "setDragScrollStart", "activeArrow", "setActiveArrow", "hoveredArrow", "setHoveredArrow", "isInitialized", "setIsInitialized", "wheelTimeoutRef", "isWheelScrolling", "setIsWheelScrolling", "hideTimeoutRef", "hoverEnterTimeoutRef", "wheelShowTimeoutRef", "finalThumbConfig", "baseColor", "finalTrackConfig", "finalArrowsConfig", "finalDragScrollConfig", "finalAutoHideConfig", "finalThumbWidth", "finalTrackWidth", "thumbMinHeight", "showArrows", "arrowStep", "maintainFocus", "activeElement", "options", "findScrollableElement", "cached", "childScrollableElements", "child", "element", "parent", "isNestedInAnotherScrollbar", "isScrollable", "clearHideTimer", "clearHoverEnterTimer", "clearWheelShowTimer", "setHideTimer", "delay", "updateScrollbar", "scrollableElement", "containerHeight", "contentHeight", "scrollTop", "wrapperPaddingTopBottom", "computedStyle", "paddingTop", "paddingBottom", "arrowSpace", "availableHeight", "scrollRatio", "calculatedThumbHeight", "scrollableHeight", "thumbScrollableHeight", "calculatedThumbTop", "handleThumbMouseDown", "event", "actualScrollContainer", "handleMouseMove", "deltaY", "scrollDelta", "newScrollTop", "handleMouseUp", "handleTrackClick", "rect", "clickY", "handleUpArrowClick", "handleDownArrowClick", "container", "maxScrollTop", "handleDragScrollStart", "target", "isTextInputElement", "handleDragScrollMove", "deltaX", "handleDragScrollEnd", "handleScroll", "handleWheel", "elementsToWatch", "handleKeyDown", "key", "scrollHeight", "clientHeight", "lineScrollStep", "newThumbTop", "timer", "resizeObserver", "elementsToObserve", "observer", "adjustedTrackWidth", "styleId", "existingStyle", "styleToRemove", "e", "OverlayScrollbar_default"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGlC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAG1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAGD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AASD,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGlC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAG1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAGD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AASD,QAAA,MAAM,gBAAgB,mGA4yCrB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
package/package.json
CHANGED