@infinityfx/fluid/dist/components/layout/scrollarea.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{combineClasses as r,classes as n,combineRefs as o}from"../../core/utils.js";import{useRef as a,useState as i,useLayoutEffect as l,useId as c}from"react";import{createStyles as s}from"../../core/style.js";const d=s("scrollarea",{".area":{position:"relative",overflow:"hidden"},".track":{position:"absolute",userSelect:"none",zIndex:99,transition:"opacity .2s"},".v__hover > .track":{opacity:0},".v__hover:hover > .track":{opacity:1},".handle":{width:".5rem",height:".5rem",backgroundColor:"var(--f-clr-grey-500)",opacity:.35,borderRadius:"99px",transition:"opacity .2s"},".track:hover .handle":{opacity:.8},'.area[data-horizontal="false"] > .track':{top:0,right:0,height:"100%"},'.area[data-horizontal="true"] > .track':{bottom:0,left:0,width:"100%"},'.v__permanent[data-horizontal="false"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingInline:"2px"},'.v__permanent[data-horizontal="true"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingBlock:"2px"},'.v__permanent[data-horizontal="false"]':{paddingRight:"calc(.5rem + 4px)"},'.v__permanent[data-horizontal="true"]':{paddingBottom:"calc(.5rem + 4px)"},'.area[data-scrollable="false"] > .track, .area[data-disabled="true"] > .track':{display:"none"},"@media (pointer: coarse)":{".track":{display:"none"},".area":{overflow:"auto"}}});function u({children:s,cc:u={},horizontal:h=!1,variant:p="hover",behavior:f="normal",disabled:m=!1,ref:v,...g}){const x=r(d,u),y=a(!1),w=a(0),b=a(null),k=a(null),_=a(null),H=a(null),[W,z]=i(!1);function L(t){const e=b.current;if(!e||!t.shiftKey&&"shift"===f)return;const r=100*Math.sign(t.deltaY),n=e[h?"scrollLeft":"scrollTop"],o=e[h?"scrollWidth":"scrollHeight"]-e[h?"offsetWidth":"offsetHeight"];((r>0?n<o:n>0)||t.timeStamp-w.current<350)&&(t.stopPropagation(),t.preventDefault(),w.current=t.timeStamp),M(r)}function E(t){if("mouseup"===t.type)return H.current=null;if("mousedown"===t.type)return t.stopPropagation(),H.current=t;const e=b.current;if(!e||!H.current)return;M(h?(t.x-H.current.x)/((1-e.clientWidth/e.scrollWidth)*e.clientWidth)*(e.scrollWidth-e.clientWidth):(t.y-H.current.y)/((1-e.clientHeight/e.scrollHeight)*e.clientHeight)*(e.scrollHeight-e.clientHeight)),H.current=t}function M(t){const e=b.current;if(!e||!_.current||!k.current||matchMedia("(pointer: coarse)").matches||m)return;const r=h?"offsetWidth":"offsetHeight",n=h?"scrollLeft":"scrollTop",o=Math.max(e[h?"scrollWidth":"scrollHeight"]-e[r],1),a=Math.max(Math.min(e[n]+Math.round(t),o),0);e[n]!==a&&(e[n]=a,y.current=!0);const i=a/o*(e[r]-_.current[r]);_.current.style.translate=h?`${i}px 0px`:`0px ${i}px`,_.current.setAttribute("aria-valuenow",(a/o*100).toString()),k.current.style.translate=`${h?a:e.scrollLeft}px ${h?e.scrollTop:a}px`}function S(){const t=b.current;if(!t||!_.current||!k.current)return;k.current.style.translate="0px 0px",_.current.style.translate="0px 0px";const e=h?t.offsetWidth/t.scrollWidth:t.offsetHeight/t.scrollHeight;_.current.style[h?"width":"height"]=100*e+"%",_.current.style[h?"height":"width"]="",z(e<1),M(0)}l((()=>{S();const t=new ResizeObserver(S),e=b.current;if(e)return t.observe(e),e.children.length&&t.observe(e.children[0]),e.addEventListener("wheel",L),window.addEventListener("mousemove",E),window.addEventListener("mouseup",E),()=>{t.disconnect(),window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",E),e.removeEventListener("wheel",L)}}),[m,h,f]);const $=c();return t("div",{...g,ref:o(v,b),id:$,className:n(x.area,x[`v__${p}`],g.className),onScroll:t=>{if(g.onScroll?.(t),y.current)return y.current=!1;M(0)},"data-horizontal":h,"data-scrollable":W,"data-disabled":m,children:[s,e("div",{ref:k,className:x.track,children:e("div",{ref:_,className:x.handle,onMouseDown:t=>E(t.nativeEvent),role:"scrollbar","aria-controls":$})})]})}export{u as default};
//# sourceMappingURL=scrollarea.js.map