@ehfuse/overlay-scrollbar 1.5.10 → 1.5.12
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/README.md +1 -0
- package/dist/OverlayScrollbar.d.ts +86 -0
- package/dist/OverlayScrollbar.d.ts.map +1 -0
- package/dist/components/ScrollbarArrows.d.ts +29 -0
- package/dist/components/ScrollbarArrows.d.ts.map +1 -0
- package/dist/components/ScrollbarThumb.d.ts +35 -0
- package/dist/components/ScrollbarThumb.d.ts.map +1 -0
- package/dist/components/ScrollbarTrack.d.ts +32 -0
- package/dist/components/ScrollbarTrack.d.ts.map +1 -0
- package/dist/hooks/useArrowNavigation.d.ts +27 -0
- package/dist/hooks/useArrowNavigation.d.ts.map +1 -0
- package/dist/hooks/useAutoHide.d.ts +19 -0
- package/dist/hooks/useAutoHide.d.ts.map +1 -0
- package/dist/hooks/useDragScroll.d.ts +23 -0
- package/dist/hooks/useDragScroll.d.ts.map +1 -0
- package/dist/hooks/useKeyboardNavigation.d.ts +18 -0
- package/dist/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/dist/hooks/useScrollEvents.d.ts +20 -0
- package/dist/hooks/useScrollEvents.d.ts.map +1 -0
- package/dist/hooks/useScrollbarConfig.d.ts +53 -0
- package/dist/hooks/useScrollbarConfig.d.ts.map +1 -0
- package/dist/hooks/useScrollbarInitialization.d.ts +21 -0
- package/dist/hooks/useScrollbarInitialization.d.ts.map +1 -0
- package/dist/hooks/useScrollbarUpdate.d.ts +27 -0
- package/dist/hooks/useScrollbarUpdate.d.ts.map +1 -0
- package/dist/hooks/useThumbDrag.d.ts +25 -0
- package/dist/hooks/useThumbDrag.d.ts.map +1 -0
- package/dist/hooks/useTrackClick.d.ts +20 -0
- package/dist/hooks/useTrackClick.d.ts.map +1 -0
- package/dist/index.d.ts +8 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +3 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +4 -4
- package/dist/src/OverlayScrollbar.d.ts +1 -0
- package/dist/src/OverlayScrollbar.d.ts.map +1 -1
- package/dist/types.d.ts +70 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/utils/dragScrollUtils.d.ts +40 -0
- package/dist/utils/dragScrollUtils.d.ts.map +1 -0
- 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,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=`
|
|
1
|
+
import{useRef as S,useEffect as E,useState as b,useCallback as p,useMemo as V,forwardRef as je,useImperativeHandle as Ve,useLayoutEffect as Qe}from"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"],be=(C,N)=>{let $=C.tagName.toLowerCase(),H=["text","password","email","number","search","tel","url","checkbox","radio"];if($==="input"){let D=C.type;return H.includes(D)}if(["textarea","select","button"].includes($)||["svg","path","circle","rect","line","polygon","polyline"].includes($)||C.getAttribute("contenteditable")==="true")return!0;if(N?.excludeSelectors){for(let D of N.excludeSelectors)if(C.matches(D))return!0}return Ze(C,N)},Ze=(C,N)=>{let $=[...Ke,...N?.excludeClasses||[]],H=C,D=0,I=5;for(;H&&D<=I;){if($.some(x=>H.classList.contains(x)))return!0;if(H.classList.contains("MuiDialogContent-root"))break;H=H.parentElement,D++}return!1};import{jsx as z,jsxs as ke}from"react/jsx-runtime";var et={},tt={},rt={},ot={},nt={},lt=je(({className:C="",style:N={},containerStyle:$={},contentStyle:H={},children:D,onScroll:I,thumb:x=et,track:R=tt,arrows:A=rt,dragScroll:B=ot,autoHide:P=nt,showScrollbar:Q=!0,detectInnerScroll:Ie=!1},Re)=>{let Ae=S({});E(()=>{Ae.current={children:D,onScroll:I,showScrollbar:Q,thumb:x,track:R,arrows:A,dragScroll:B,autoHide:P}});let ie=S(null),o=S(null),F=S(null),ee=S(null),Oe=S(null),k=S(null),[ae,v]=b(!1),[_,ve]=b(!1),[ye,Te]=b(!1),[ce,Ne]=b({y:0,scrollTop:0}),[Y,$e]=b(0),[Pe,xe]=b(0),[se,we]=b(!1),[G,Se]=b(!1),[te,Fe]=b({x:0,y:0,scrollTop:0,scrollLeft:0}),[it,at]=b(null),[re,oe]=b(null),[ct,_e]=b(!1),J=S(null),[Me,Ee]=b(!1),X=S(null),K=S(null),W=S(null),y=V(()=>{let e=x.color??"#606060";return{width:x.width??8,minHeight:x.minHeight??50,radius:x.radius??(x.width??8)/2,color:e,opacity:x.opacity??.6,hoverColor:x.hoverColor??e,hoverOpacity:x.hoverOpacity??1}},[x]),c=V(()=>({width:R.width??16,color:R.color??"rgba(128, 128, 128, 0.1)",visible:R.visible??!0,alignment:R.alignment??"center",radius:R.radius??y.radius??4,margin:R.margin??4}),[R,y.radius]),M=V(()=>{let e=A.color??"#808080";return{visible:A.visible??!1,step:A.step??50,color:e,opacity:A.opacity??.6,hoverColor:A.hoverColor??e,hoverOpacity:A.hoverOpacity??1}},[A]),ue=V(()=>({enabled:B.enabled??!0,excludeClasses:B.excludeClasses??[],excludeSelectors:B.excludeSelectors??[]}),[B]),l=V(()=>({enabled:P.enabled??!0,delay:P.delay??1500,delayOnWheel:P.delayOnWheel??700,initialDelay:P.initialDelay??200}),[P]),[q,We]=b(()=>(P.initialDelay??200)>0),m=y.width,qe=c.width,de=y.minHeight,L=M.visible,ne=M.step,O=p(()=>{if(!o.current)return;let e=document.activeElement;e&&o.current.contains(e)&&e!==o.current||o.current.focus()},[]);Ve(Re,()=>({getScrollContainer:()=>o.current,scrollTo:e=>{o.current&&o.current.scrollTo(e)},get scrollTop(){return o.current?.scrollTop||0},get scrollHeight(){return o.current?.scrollHeight||0},get clientHeight(){return o.current?.clientHeight||0}}),[]);let u=p(()=>{if(k.current){let t=k.current;if(document.contains(t)&&t.scrollHeight>t.clientHeight+2)return t;k.current=null}if(!o.current)return null;if(F.current&&F.current.scrollHeight>o.current.clientHeight+2)return k.current=o.current,o.current;if(!Ie)return null;let e=o.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let r=t;if(r!==o.current&&r.classList.contains("overlay-scrollbar-container"))continue;let n=r.parentElement,i=!1;for(;n&&n!==o.current;){if(n.classList.contains("overlay-scrollbar-container")&&n!==o.current){i=!0;break}n=n.parentElement}if(!i&&r.scrollHeight>r.clientHeight+2)return k.current=r,r}return null},[]),U=p(()=>u()!==null,[u]),h=p(()=>{X.current&&(clearTimeout(X.current),X.current=null)},[]),Ue=p(()=>{K.current&&(clearTimeout(K.current),K.current=null)},[]),Ce=p(()=>{W.current&&(clearTimeout(W.current),W.current=null)},[]),f=p(e=>{l.enabled&&(h(),X.current=setTimeout(()=>{v(!1),X.current=null},e))},[h,l.enabled]),s=p(()=>{let e=u();if(!e){v(!1),we(!1),h();return}if(we(!0),!ee.current)return;!l.enabled&&!q&&(v(!0),h());let t=e.clientHeight,r=e.scrollHeight,n=e.scrollTop,i=0;if(ie.current){let le=window.getComputedStyle(ie.current),He=parseFloat(le.paddingTop)||0,De=parseFloat(le.paddingBottom)||0;i=He+De}let a=L?m*2+c.margin*4:c.margin*2,T=t-a+i,g=t/r,d=Math.max(T*g,de),j=r-t,w=T-d,ge=j>0?n/j*w:0;$e(d),xe(ge)},[u,h,L,m,de,l.enabled,q]),ze=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(ve(!0),Ne({y:e.clientY,scrollTop:t.scrollTop}),h(),v(!0),O())},[u,h,O]),pe=p(e=>{if(!_)return;let t=u();if(!t)return;let r=t.clientHeight,i=t.scrollHeight-r,a=e.clientY-ce.y,T=r-Y,g=a/T*i,d=Math.max(0,Math.min(i,ce.scrollTop+g));t.scrollTop=d,s()},[_,ce,Y,s,u]),me=p(()=>{ve(!1),U()&&f(l.delay)},[U,f,l.delay]),Be=p(e=>{if(!ee.current)return;let r=ee.current.getBoundingClientRect(),n=e.clientY-r.top,i=u();if(!i)return;let a=i.clientHeight,T=i.scrollHeight,d=n/a*(T-a);i.scrollTop=Math.max(0,Math.min(T-a,d)),s(),v(!0),f(l.delay),O()},[s,f,l.delay,u,O]),Ye=p(e=>{if(e.preventDefault(),e.stopPropagation(),!o.current)return;let t=Math.max(0,o.current.scrollTop-ne);o.current.scrollTop=t,s(),v(!0),f(l.delay),O()},[s,f,ne,l.delay,O]),Ge=p(e=>{if(e.preventDefault(),e.stopPropagation(),!o.current||!F.current)return;let t=o.current,n=F.current.scrollHeight-t.clientHeight,i=Math.min(n,t.scrollTop+ne);t.scrollTop=i,s(),v(!0),f(l.delay),O()},[s,f,ne,l.delay,O]),Je=p(e=>{if(!ue.enabled)return;let t=e.target;if(be(t,ue)||e.button!==0)return;let r=u();r&&(r.scrollHeight<=r.clientHeight||(e.preventDefault(),Se(!0),Fe({x:e.clientX,y:e.clientY,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft||0}),h()))},[ue,be,u,h]),fe=p(e=>{if(!G)return;let t=u();if(!t)return;let r=te.x-e.clientX,n=te.y-e.clientY;if(Math.abs(n)<3&&Math.abs(r)<3)return;v(!0);let i=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,te.scrollTop+n));t.scrollTop=i,s()},[G,te,u,s]),he=p(()=>{Se(!1),U()&&f(l.delay)},[U,f,l.delay]);E(()=>{let e=a=>{if(s(),q){I&&I(a);return}h(),v(!0),Ce();let T=Me?l.delayOnWheel:l.delay;f(T),I&&I(a)},t=()=>{Ee(!0),J.current&&clearTimeout(J.current),J.current=setTimeout(()=>{Ee(!1)},300),Ce(),W.current=setTimeout(()=>{v(!0),W.current=null,f(l.delayOnWheel)},50)},r=[],n=u();n&&r.push(n);let i=o.current;return i&&!n&&(r.push(i),i.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(T=>{let g=T;if(g!==i&&g.classList.contains("overlay-scrollbar-container"))return;let d=g.parentElement;for(;d&&d!==i;){if(d.classList.contains("overlay-scrollbar-container")&&d!==i)return;d=d.parentElement}r.push(g)})),r.forEach(a=>{a.addEventListener("scroll",e,{passive:!0}),a.addEventListener("wheel",t,{passive:!0})}),()=>{r.forEach(a=>{a.removeEventListener("scroll",e),a.removeEventListener("wheel",t)}),J.current&&clearTimeout(J.current),W.current&&clearTimeout(W.current)}},[u,s,I,h,f,l,Me,q]),E(()=>{let e=r=>{let n=u();if(!n)return;let{key:i}=r,{scrollTop:a,scrollHeight:T,clientHeight:g}=n,d=T-g,j=50,w=null;switch(i){case"ArrowUp":r.preventDefault(),w=Math.max(0,a-j);break;case"ArrowDown":r.preventDefault(),w=Math.min(d,a+j);break;case"PageUp":r.preventDefault(),w=Math.max(0,a-g);break;case"PageDown":r.preventDefault(),w=Math.min(d,a+g);break;case"Home":r.preventDefault(),w=0;break;case"End":r.preventDefault(),w=d;break;default:return}if(w!==null){let ge=w/d,le=L?m*2+c.margin*4:c.margin*2,Xe=(g-le-Y)*ge;xe(Xe),n.scrollTop=w,h(),v(!0),f(l.delay)}},t=o.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[u,L,m,c.margin,Y,h,f,l.delay]),E(()=>{if(G)return document.addEventListener("mousemove",fe),document.addEventListener("mouseup",he),()=>{document.removeEventListener("mousemove",fe),document.removeEventListener("mouseup",he)}},[G,fe,he]),E(()=>{if(_)return document.addEventListener("mousemove",pe),document.addEventListener("mouseup",me),()=>{document.removeEventListener("mousemove",pe),document.removeEventListener("mouseup",me)}},[_,pe,me]),E(()=>{s();let e=setTimeout(()=>{s()},100);return()=>clearTimeout(e)},[s]),Qe(()=>{_e(!0),s(),!l.enabled&&!q&&U()&&v(!0)},[U,s,l.enabled,q]),E(()=>{if(l.initialDelay>0){let e=setTimeout(()=>{We(!1)},l.initialDelay);return()=>clearTimeout(e)}},[l.initialDelay]),E(()=>{let e=new ResizeObserver(()=>{s()}),t=[];return o.current&&t.push(o.current),F.current&&t.push(F.current),k.current&&document.contains(k.current)&&t.push(k.current),t.forEach(r=>{e.observe(r)}),()=>e.disconnect()},[s]),E(()=>{if(!o.current)return;let e=new MutationObserver(()=>{k.current=null,s()});return e.observe(o.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[s]);let Z=Math.max(qe,m);return E(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let r=document.createElement("style");return r.id=e,r.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(
|
|
21
|
+
`,document.head.appendChild(r),()=>{let n=document.getElementById(e);n&&n.remove()}},[]),ke("div",{ref:ie,className:`overlay-scrollbar-wrapper ${C}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...N},children:[z("div",{ref:o,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:Je,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:G?"none":"auto",...$},children:z("div",{ref:F,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...H},children:D})}),Q&&se&&ke("div",{ref:ee,className:"overlay-scrollbar-track",onMouseEnter:()=>{h(),K.current=setTimeout(()=>{v(!0),K.current=null},100)},onMouseLeave:()=>{Ue(),_||f(l.delay)},style:{position:"absolute",top:0,right:0,width:`${Z}px`,height:"100%",opacity:ae?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[c.visible&&z("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Be(e)},style:{position:"absolute",top:L?`${y.width+c.margin*2}px`:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(Z-y.width)/2}px`,width:`${y.width}px`,height:L?`calc(100% - ${y.width*2+c.margin*4}px)`:`calc(100% - ${c.margin*2}px)`,backgroundColor:c.color,borderRadius:`${c.radius}px`,cursor:"pointer"}}),z("div",{ref:Oe,className:"overlay-scrollbar-thumb",onMouseDown:ze,onMouseEnter:()=>Te(!0),onMouseLeave:()=>Te(!1),style:{position:"absolute",top:`${(L?m+c.margin*2:c.margin)+Pe}px`,right:c.alignment==="right"?"0px":`${(Z-m)/2}px`,width:`${m}px`,height:`${Math.max(Y,de)}px`,backgroundColor:ye||_?y.hoverColor:y.color,opacity:ye||_?y.hoverOpacity:y.opacity,borderRadius:`${y.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),Q&&se&&L&&z("div",{className:"overlay-scrollbar-up-arrow",onClick:Ye,onMouseEnter:()=>oe("up"),onMouseLeave:()=>oe(null),style:{position:"absolute",top:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(Z-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:re==="up"?M.hoverColor:M.color,userSelect:"none",zIndex:1001,opacity:ae?re==="up"?M.hoverOpacity:M.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),Q&&se&&L&&z("div",{className:"overlay-scrollbar-down-arrow",onClick:Ge,onMouseEnter:()=>oe("down"),onMouseLeave:()=>oe(null),style:{position:"absolute",bottom:`${c.margin}px`,right:c.alignment==="right"?"0px":`${(Z-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:re==="down"?M.hoverColor:M.color,userSelect:"none",zIndex:1001,opacity:ae?re==="down"?M.hoverOpacity:M.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),Le=lt;export{Le as OverlayScrollbar,Le as default};
|
|
22
22
|
//# sourceMappingURL=index.esm.js.map
|