@ehfuse/overlay-scrollbar 1.5.11 → 1.5.13
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 +14 -2
- package/dist/index.esm.js.map +2 -2
- package/dist/index.js +14 -2
- package/dist/index.js.map +3 -3
- 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 E,useState as b,useCallback as p,useMemo as j,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"],ge=(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 U,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:z=ot,autoHide:P=nt,showScrollbar:V=!0,detectInnerScroll:Ie=!1},Re)=>{let Ae=S({});E(()=>{Ae.current={children:D,onScroll:I,showScrollbar:V,thumb:x,track:R,arrows:A,dragScroll:z,autoHide:P}});let le=S(null),o=S(null),F=S(null),Q=S(null),Oe=S(null),k=S(null),[ie,v]=b(!1),[_,be]=b(!1),[ve,ye]=b(!1),[ae,Ne]=b({y:0,scrollTop:0}),[B,$e]=b(0),[Pe,Te]=b(0),[ce,xe]=b(!1),[Y,we]=b(!1),[ee,Fe]=b({x:0,y:0,scrollTop:0,scrollLeft:0}),[it,at]=b(null),[te,re]=b(null),[ct,_e]=b(!1),G=S(null),[Se,Me]=b(!1),J=S(null),X=S(null),W=S(null),y=j(()=>{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=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??y.radius??4,margin:R.margin??4}),[R,y.radius]),M=j(()=>{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]),se=j(()=>({enabled:z.enabled??!0,excludeClasses:z.excludeClasses??[],excludeSelectors:z.excludeSelectors??[]}),[z]),l=j(()=>({enabled:P.enabled??!0,delay:P.delay??1500,delayOnWheel:P.delayOnWheel??700,initialDelay:P.initialDelay??0}),[P]),[Ee,We]=b(()=>(P.initialDelay??0)>0),m=y.width,qe=c.width,ue=y.minHeight,L=M.visible,oe=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},[]),q=p(()=>u()!==null,[u]),h=p(()=>{J.current&&(clearTimeout(J.current),J.current=null)},[]),Ue=p(()=>{X.current&&(clearTimeout(X.current),X.current=null)},[]),Ce=p(()=>{W.current&&(clearTimeout(W.current),W.current=null)},[]),f=p(e=>{l.enabled&&(h(),J.current=setTimeout(()=>{v(!1),J.current=null},e))},[h,l.enabled]),s=p(()=>{let e=u();if(!e){v(!1),xe(!1),h();return}if(xe(!0),!Q.current)return;l.enabled||(v(!0),h());let t=e.clientHeight,r=e.scrollHeight,n=e.scrollTop,i=0;if(le.current){let ne=window.getComputedStyle(le.current),He=parseFloat(ne.paddingTop)||0,De=parseFloat(ne.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,ue),Z=r-t,w=T-d,he=Z>0?n/Z*w:0;$e(d),Te(he)},[u,h,L,m,ue,l.enabled]),ze=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(be(!0),Ne({y:e.clientY,scrollTop:t.scrollTop}),h(),v(!0),O())},[u,h,O]),de=p(e=>{if(!_)return;let t=u();if(!t)return;let r=t.clientHeight,i=t.scrollHeight-r,a=e.clientY-ae.y,T=r-B,g=a/T*i,d=Math.max(0,Math.min(i,ae.scrollTop+g));t.scrollTop=d,s()},[_,ae,B,s,u]),pe=p(()=>{be(!1),q()&&f(l.delay)},[q,f,l.delay]),Be=p(e=>{if(!Q.current)return;let r=Q.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-oe);o.current.scrollTop=t,s(),v(!0),f(l.delay),O()},[s,f,oe,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+oe);t.scrollTop=i,s(),v(!0),f(l.delay),O()},[s,f,oe,l.delay,O]),Je=p(e=>{if(!se.enabled)return;let t=e.target;if(ge(t,se)||e.button!==0)return;let r=u();r&&(r.scrollHeight<=r.clientHeight||(e.preventDefault(),we(!0),Fe({x:e.clientX,y:e.clientY,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft||0}),h()))},[se,ge,u,h]),me=p(e=>{if(!Y)return;let t=u();if(!t)return;let r=ee.x-e.clientX,n=ee.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,ee.scrollTop+n));t.scrollTop=i,s()},[Y,ee,u,s]),fe=p(()=>{we(!1),q()&&f(l.delay)},[q,f,l.delay]);E(()=>{let e=a=>{if(s(),Ee){I&&I(a);return}h(),v(!0),Ce();let T=Se?l.delayOnWheel:l.delay;f(T),I&&I(a)},t=()=>{Me(!0),G.current&&clearTimeout(G.current),G.current=setTimeout(()=>{Me(!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)}),G.current&&clearTimeout(G.current),W.current&&clearTimeout(W.current)}},[u,s,I,h,f,l,Se,Ee]),E(()=>{let e=r=>{let n=u();if(!n)return;let{key:i}=r,{scrollTop:a,scrollHeight:T,clientHeight:g}=n,d=T-g,Z=50,w=null;switch(i){case"ArrowUp":r.preventDefault(),w=Math.max(0,a-Z);break;case"ArrowDown":r.preventDefault(),w=Math.min(d,a+Z);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 he=w/d,ne=L?m*2+c.margin*4:c.margin*2,Xe=(g-ne-B)*he;Te(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,B,h,f,l.delay]),E(()=>{if(Y)return document.addEventListener("mousemove",me),document.addEventListener("mouseup",fe),()=>{document.removeEventListener("mousemove",me),document.removeEventListener("mouseup",fe)}},[Y,me,fe]),E(()=>{if(_)return document.addEventListener("mousemove",de),document.addEventListener("mouseup",pe),()=>{document.removeEventListener("mousemove",de),document.removeEventListener("mouseup",pe)}},[_,de,pe]),E(()=>{s();let e=setTimeout(()=>{s()},100);return()=>clearTimeout(e)},[s]),Qe(()=>{_e(!0),s(),!l.enabled&&q()&&v(!0)},[q,s,l.enabled]),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 K=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=`
|
|
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;
|
|
@@ -10,6 +10,18 @@ import{useRef as S,useEffect as E,useState as b,useCallback as p,useMemo as j,fo
|
|
|
10
10
|
.overlay-scrollbar-container::-webkit-scrollbar-thumb {
|
|
11
11
|
display: none !important;
|
|
12
12
|
}
|
|
13
|
+
/* ehfuse-editor \uB0B4\uC758 ehfuse-editor-content\uB294 \uC2A4\uD06C\uB864\uBC14 \uC720\uC9C0 */
|
|
14
|
+
.ehfuse-editor .ehfuse-editor-content::-webkit-scrollbar {
|
|
15
|
+
display: initial !important;
|
|
16
|
+
width: initial !important;
|
|
17
|
+
height: initial !important;
|
|
18
|
+
}
|
|
19
|
+
.ehfuse-editor .ehfuse-editor-content::-webkit-scrollbar-track {
|
|
20
|
+
display: initial !important;
|
|
21
|
+
}
|
|
22
|
+
.ehfuse-editor .ehfuse-editor-content::-webkit-scrollbar-thumb {
|
|
23
|
+
display: initial !important;
|
|
24
|
+
}
|
|
13
25
|
.overlay-scrollbar-container:focus {
|
|
14
26
|
outline: 2px solid rgba(0, 123, 255, 0.3);
|
|
15
27
|
outline-offset: -2px;
|
|
@@ -18,5 +30,5 @@ import{useRef as S,useEffect as E,useState as b,useCallback as p,useMemo as j,fo
|
|
|
18
30
|
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
19
31
|
outline-offset: -2px;
|
|
20
32
|
}
|
|
21
|
-
`,document.head.appendChild(r),()=>{let n=document.getElementById(e);n&&n.remove()}},[]),ke("div",{ref:
|
|
33
|
+
`,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
34
|
//# sourceMappingURL=index.esm.js.map
|