@radix-ui/react-scroll-area - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

dist/index.js

		@@ -1,2 +0,2 @@
		var e,r,t,o=require("@radix-ui/primitive").composeEventHandlers,n=require("@radix-ui/number").clamp,l=require("@radix-ui/react-use-layout-effect").useLayoutEffect,i=require("@radix-ui/react-use-direction").useDirection,a=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-compose-refs").useComposedRefs,s=require("@radix-ui/react-context").createContext,u=require("@radix-ui/react-presence").Presence,d=require("@radix-ui/react-primitive").Primitive,f=(e={},r=require("react"),Object.keys(r).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})),e),p=(t=require("@babel/runtime/helpers/extends"))&&t.__esModule?t.default:t;const[h,w]=s("ScrollArea"),b=/#__PURE__/f.forwardRef(((e,r)=>{const{type:t="hover",scrollHideDelay:o=600,...n}=e,[l,a]=f.useState(null),[s,u]=f.useState(null),[w,b]=f.useState(null),[m,v]=f.useState(null),[S,g]=f.useState(null),[E,C]=f.useState(0),[T,y]=f.useState(0),[R,x]=f.useState(!1),[P,L]=f.useState(!1),D=c(r,(e=>a(e))),A=i(l,n.dir);/#__PURE__/return f.createElement(h,{type:t,dir:A,scrollHideDelay:o,scrollArea:l,viewport:s,onViewportChange:u,content:w,onContentChange:b,scrollbarX:m,onScrollbarXChange:v,scrollbarXEnabled:R,onScrollbarXEnabledChange:x,scrollbarY:S,onScrollbarYChange:g,scrollbarYEnabled:P,onScrollbarYEnabledChange:L,onCornerWidthChange:C,onCornerHeightChange:y},/#__PURE__/f.createElement(d,p({},n,{ref:D,style:{position:"relative","--radix-scroll-area-corner-width":E+"px","--radix-scroll-area-corner-height":T+"px",...e.style}})))}));exports.ScrollArea=b;const m=/#__PURE__/f.forwardRef(((e,r)=>{const{children:t,...o}=e,n=w("ScrollAreaViewport"),l=f.useRef(null),i=c(r,l,n.onViewportChange);/#__PURE__/return f.createElement(f.Fragment,null,/#__PURE__/f.createElement("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"}}),/#__PURE__/f.createElement(d,p({"data-radix-scroll-area-viewport":""},o,{ref:i,style:{overflowX:n.scrollbarXEnabled?"scroll":"hidden",overflowY:n.scrollbarYEnabled?"scroll":"hidden",...e.style}}),/#__PURE__/f.createElement("div",{ref:n.onContentChange,style:{minWidth:"100%",display:"table"}},t)))}));exports.ScrollAreaViewport=m;const v=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=w("ScrollAreaScrollbar"),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:i}=n,a="horizontal"===e.orientation;return f.useEffect((()=>(a?l(!0):i(!0),()=>{a?l(!1):i(!1)})),[a,l,i]),"hover"===n.type?/#__PURE__/f.createElement(S,p({},o,{ref:r,forceMount:t})):"scroll"===n.type?/#__PURE__/f.createElement(g,p({},o,{ref:r,forceMount:t})):"auto"===n.type?/#__PURE__/f.createElement(E,p({},o,{ref:r,forceMount:t})):"always"===n.type?/#__PURE__/f.createElement(C,p({},o,{ref:r})):null}));exports.ScrollAreaScrollbar=v;const S=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=w("ScrollAreaScrollbar"),[l,i]=f.useState(!1);return f.useEffect((()=>{const e=n.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),i(!0)},o=()=>{r=window.setTimeout((()=>i(!1)),n.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[n.scrollArea,n.scrollHideDelay]),/#__PURE__/f.createElement(u,{present:t\|\|l},/#__PURE__/f.createElement(E,p({},o,{ref:r})))})),g=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...n}=e,l=w("ScrollAreaScrollbar"),i="horizontal"===e.orientation,a=M((()=>s("SCROLL_END")),100),[c,s]=(d="hidden",h={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},f.useReducer(((e,r)=>{const t=h[e][r];return null!=t?t:e}),d));var d,h;return f.useEffect((()=>{if("idle"===c){const e=window.setTimeout((()=>s("HIDE")),l.scrollHideDelay);return()=>window.clearTimeout(e)}}),[c,l.scrollHideDelay,s]),f.useEffect((()=>{const e=l.viewport,r=i?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(s("SCROLL"),a()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[l.viewport,i,s,a]),/#__PURE__/f.createElement(u,{present:t\|\|"hidden"!==c},/#__PURE__/f.createElement(C,p({},n,{ref:r,onPointerEnter:o(e.onPointerEnter,(()=>s("POINTER_ENTER"))),onPointerLeave:o(e.onPointerLeave,(()=>s("POINTER_LEAVE")))})))})),E=/#__PURE__/f.forwardRef(((e,r)=>{const t=w("ScrollAreaScrollbar"),{forceMount:o,...n}=e,[l,i]=f.useState(!1),a="horizontal"===e.orientation,c=M((()=>{if(t.viewport){const e=t.viewport.offsetWidth<t.viewport.scrollWidth,r=t.viewport.offsetHeight<t.viewport.scrollHeight;i(a?e:r)}}),10);return _(t.viewport,c),_(t.content,c),/#__PURE__/f.createElement(u,{present:o\|\|l},/#__PURE__/f.createElement(C,p({},n,{ref:r})))})),C=/#__PURE__/f.forwardRef(((e,r)=>{const{orientation:t="vertical",...o}=e,n=w("ScrollAreaScrollbar"),l=f.useRef(null),i=f.useRef(0),[a,c]=f.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),s=H(a.viewport,a.content),u={...o,sizes:a,onSizesChange:c,hasThumb:Boolean(s>0&&s<1),onThumbChange:e=>l.current=e,onThumbPointerUp:()=>i.current=0,onThumbPointerDown:e=>i.current=e};function d(e,r){return function(e,r,t,o="ltr"){const n=W(t),l=n/2,i=r\|\|l,a=n-i,c=t.scrollbar.paddingStart+i,s=t.scrollbar.size-t.scrollbar.paddingEnd-a,u=t.content-t.viewport;return X([c,s],"ltr"===o?[0,u]:[-1u,0])(e)}(e,i.current,a,r)}return"horizontal"===t?/#__PURE__/f.createElement(T,p({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=O(n.viewport.scrollLeft,a,n.dir);l.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollLeft=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollLeft=d(e,n.dir))}})):"vertical"===t?/#__PURE__/f.createElement(y,p({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=O(n.viewport.scrollTop,a);l.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollTop=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollTop=d(e))}})):null})),T=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=w("ScrollAreaScrollbar"),[i,a]=f.useState(),s=f.useRef(null),u=c(r,s,l.onScrollbarXChange);return f.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/#__PURE__/f.createElement(P,p({"data-orientation":"horizontal"},n,{ref:u,sizes:t,style:{bottom:0,left:"rtl"===l.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===l.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":W(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),Y(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:s.current.clientWidth,paddingStart:z(i.paddingLeft),paddingEnd:z(i.paddingRight)}})}}))})),y=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=w("ScrollAreaScrollbar"),[i,a]=f.useState(),s=f.useRef(null),u=c(r,s,l.onScrollbarYChange);return f.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/#__PURE__/f.createElement(P,p({"data-orientation":"vertical"},n,{ref:u,sizes:t,style:{top:0,right:"ltr"===l.dir?0:void 0,left:"rtl"===l.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":W(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),Y(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:s.current.clientHeight,paddingStart:z(i.paddingTop),paddingEnd:z(i.paddingBottom)}})}}))})),[R,x]=s("ScrollAreaScrollbar"),P=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,hasThumb:n,onThumbChange:l,onThumbPointerUp:i,onThumbPointerDown:s,onThumbPositionChange:u,onDragScroll:h,onWheelScroll:b,onResize:m,...v}=e,S=w("ScrollAreaScrollbar"),[g,E]=f.useState(null),C=c(r,(e=>E(e))),T=f.useRef(null),y=f.useRef(""),x=S.viewport,P=t.content-t.viewport,L=a(b),D=a(u),A=M(m,10);function z(e){if(T.current){const r=e.clientX-T.current.left,t=e.clientY-T.current.top;h({x:r,y:t})}}return f.useEffect((()=>{const e=e=>{const r=e.target;(null==g?void 0:g.contains(r))&&L(e,P)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,g,P,L]),f.useEffect(D,[t,D]),_(g,A),_(S.content,A),/#__PURE__/f.createElement(R,{scrollbar:g,hasThumb:n,onThumbChange:a(l),onThumbPointerUp:a(i),onThumbPositionChange:D,onThumbPointerDown:a(s)},/#__PURE__/f.createElement(d,p({},v,{ref:C,style:{position:"absolute",...v.style},onPointerDown:o(e.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),T.current=g.getBoundingClientRect(),y.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",z(e)}})),onPointerMove:o(e.onPointerMove,z),onPointerUp:o(e.onPointerUp,(e=>{e.target.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=y.current,T.current=null}))})))})),L=/#__PURE__/f.forwardRef(((e,r)=>{const{style:t,...n}=e,l=w("ScrollbarThumb"),i=x("ScrollbarThumb"),{onThumbPositionChange:a}=i,s=c(r,(e=>i.onThumbChange(e))),u=f.useRef(),h=M((()=>{u.current&&(u.current(),u.current=void 0)}),100);return f.useEffect((()=>{const e=l.viewport;if(e){const r=()=>{if(h(),!u.current){const r=q(e,a);u.current=r,a()}};return a(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[l.viewport,h,a]),i.hasThumb?/#__PURE__/f.createElement(d,p({},n,{ref:s,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...t},onPointerDownCapture:o(e.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;i.onThumbPointerDown({x:t,y:o})})),onPointerUp:o(e.onPointerUp,i.onThumbPointerUp)})):null}));exports.ScrollAreaThumb=L;const D=/#__PURE__/f.forwardRef(((e,r)=>{const t=w("ScrollAreaCorner"),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?/#__PURE__/f.createElement(A,p({},e,{ref:r})):null}));exports.ScrollAreaCorner=D;const A=/#__PURE__/f.forwardRef(((e,r)=>{const t=w("ScrollAreaCorner"),[o,n]=f.useState(0),[l,i]=f.useState(0),a=Boolean(o&&l);return _(t.scrollbarX,(()=>{var e;const r=(null===(e=t.scrollbarX)\|\|void 0===e?void 0:e.offsetHeight)\|\|0;t.onCornerHeightChange(r),i(r)})),_(t.scrollbarY,(()=>{var e;const r=(null===(e=t.scrollbarY)\|\|void 0===e?void 0:e.offsetWidth)\|\|0;t.onCornerWidthChange(r),n(r)})),a?/#__PURE__/f.createElement(d,p({},e,{ref:r,style:{width:o,height:l,position:"absolute",right:"ltr"===t.dir?0:void 0,left:"rtl"===t.dir?0:void 0,bottom:0,...e.style}})):null}));function z(e){return e?parseInt(e,10):0}function H(e,r){const t=e/r;return isNaN(t)?0:t}function W(e){const r=H(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)r;return Math.max(o,18)}function O(e,r,t="ltr"){const o=W(r),l=r.scrollbar.paddingStart+r.scrollbar.paddingEnd,i=r.scrollbar.size-l,a=r.content-r.viewport,c=i-o,s=n(e,"ltr"===t?[0,a]:[-1a,0]);return X([0,a],[0,c])(s)}function X(e,r){return t=>{if(e[0]===e[1]\|\|r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o(t-e[0])}}function Y(e,r){return e>0&&e<r}const q=(e,r=(()=>{}))=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i\|\|a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function M(e,r){const t=a(e),o=f.useRef(0);return f.useEffect((()=>()=>window.clearTimeout(o.current)),[]),f.useCallback((()=>{window.clearTimeout(o.current),o.current=window.setTimeout(t,r)}),[t,r])}function _(e,r){const t=a(r);l((()=>{let r=0;if(e){const o=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(t)}));return o.observe(e),()=>{window.cancelAnimationFrame(r),o.unobserve(e)}}}),[e,t])}const N=b;exports.Root=N;const I=m;exports.Viewport=I;const U=v;exports.Scrollbar=U;const k=L;exports.Thumb=k;const V=D;exports.Corner=V;
		var e,r,t,o=require("@radix-ui/primitive").composeEventHandlers,n=require("@radix-ui/number").clamp,l=require("@radix-ui/react-use-layout-effect").useLayoutEffect,i=require("@radix-ui/react-use-direction").useDirection,a=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-compose-refs").useComposedRefs,s=require("@radix-ui/react-context").createContext,u=require("@radix-ui/react-presence").Presence,d=require("@radix-ui/react-primitive").Primitive,f=(e={},r=require("react"),Object.keys(r).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})),e),p=(t=require("@babel/runtime/helpers/extends"))&&t.__esModule?t.default:t;const[h,b]=s("ScrollArea"),w=/#__PURE__/f.forwardRef(((e,r)=>{const{type:t="hover",scrollHideDelay:o=600,...n}=e,[l,a]=f.useState(null),[s,u]=f.useState(null),[b,w]=f.useState(null),[v,m]=f.useState(null),[S,g]=f.useState(null),[E,C]=f.useState(0),[T,y]=f.useState(0),[R,x]=f.useState(!1),[P,L]=f.useState(!1),D=c(r,(e=>a(e))),A=i(l,n.dir);/#__PURE__/return f.createElement(h,{type:t,dir:A,scrollHideDelay:o,scrollArea:l,viewport:s,onViewportChange:u,content:b,onContentChange:w,scrollbarX:v,onScrollbarXChange:m,scrollbarXEnabled:R,onScrollbarXEnabledChange:x,scrollbarY:S,onScrollbarYChange:g,scrollbarYEnabled:P,onScrollbarYEnabledChange:L,onCornerWidthChange:C,onCornerHeightChange:y},/#__PURE__/f.createElement(d,p({},n,{ref:D,style:{position:"relative","--radix-scroll-area-corner-width":E+"px","--radix-scroll-area-corner-height":T+"px",...e.style}})))}));exports.ScrollArea=w;const v=/#__PURE__/f.forwardRef(((e,r)=>{const{children:t,...o}=e,n=b("ScrollAreaViewport"),l=f.useRef(null),i=c(r,l,n.onViewportChange);/#__PURE__/return f.createElement(f.Fragment,null,/#__PURE__/f.createElement("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"}}),/#__PURE__/f.createElement(d,p({"data-radix-scroll-area-viewport":""},o,{ref:i,style:{overflowX:n.scrollbarXEnabled?"scroll":"hidden",overflowY:n.scrollbarYEnabled?"scroll":"hidden",...e.style}}),/#__PURE__/f.createElement("div",{ref:n.onContentChange,style:{minWidth:"100%",display:"table"}},t)))}));exports.ScrollAreaViewport=v;const m=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=b("ScrollAreaScrollbar"),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:i}=n,a="horizontal"===e.orientation;return f.useEffect((()=>(a?l(!0):i(!0),()=>{a?l(!1):i(!1)})),[a,l,i]),"hover"===n.type?/#__PURE__/f.createElement(S,p({},o,{ref:r,forceMount:t})):"scroll"===n.type?/#__PURE__/f.createElement(g,p({},o,{ref:r,forceMount:t})):"auto"===n.type?/#__PURE__/f.createElement(E,p({},o,{ref:r,forceMount:t})):"always"===n.type?/#__PURE__/f.createElement(C,p({},o,{ref:r})):null}));exports.ScrollAreaScrollbar=m;const S=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=b("ScrollAreaScrollbar"),[l,i]=f.useState(!1);return f.useEffect((()=>{const e=n.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),i(!0)},o=()=>{r=window.setTimeout((()=>i(!1)),n.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[n.scrollArea,n.scrollHideDelay]),/#__PURE__/f.createElement(u,{present:t\|\|l},/#__PURE__/f.createElement(E,p({"data-state":l?"visible":"hidden"},o,{ref:r})))})),g=/#__PURE__/f.forwardRef(((e,r)=>{const{forceMount:t,...n}=e,l=b("ScrollAreaScrollbar"),i="horizontal"===e.orientation,a=M((()=>s("SCROLL_END")),100),[c,s]=(d="hidden",h={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},f.useReducer(((e,r)=>{const t=h[e][r];return null!=t?t:e}),d));var d,h;return f.useEffect((()=>{if("idle"===c){const e=window.setTimeout((()=>s("HIDE")),l.scrollHideDelay);return()=>window.clearTimeout(e)}}),[c,l.scrollHideDelay,s]),f.useEffect((()=>{const e=l.viewport,r=i?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(s("SCROLL"),a()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[l.viewport,i,s,a]),/#__PURE__/f.createElement(u,{present:t\|\|"hidden"!==c},/#__PURE__/f.createElement(C,p({"data-state":"hidden"===c?"hidden":"visible"},n,{ref:r,onPointerEnter:o(e.onPointerEnter,(()=>s("POINTER_ENTER"))),onPointerLeave:o(e.onPointerLeave,(()=>s("POINTER_LEAVE")))})))})),E=/#__PURE__/f.forwardRef(((e,r)=>{const t=b("ScrollAreaScrollbar"),{forceMount:o,...n}=e,[l,i]=f.useState(!1),a="horizontal"===e.orientation,c=M((()=>{if(t.viewport){const e=t.viewport.offsetWidth<t.viewport.scrollWidth,r=t.viewport.offsetHeight<t.viewport.scrollHeight;i(a?e:r)}}),10);return _(t.viewport,c),_(t.content,c),/#__PURE__/f.createElement(u,{present:o\|\|l},/#__PURE__/f.createElement(C,p({"data-state":l?"visible":"hidden"},n,{ref:r})))})),C=/#__PURE__/f.forwardRef(((e,r)=>{const{orientation:t="vertical",...o}=e,n=b("ScrollAreaScrollbar"),l=f.useRef(null),i=f.useRef(0),[a,c]=f.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),s=H(a.viewport,a.content),u={...o,sizes:a,onSizesChange:c,hasThumb:Boolean(s>0&&s<1),onThumbChange:e=>l.current=e,onThumbPointerUp:()=>i.current=0,onThumbPointerDown:e=>i.current=e};function d(e,r){return function(e,r,t,o="ltr"){const n=W(t),l=n/2,i=r\|\|l,a=n-i,c=t.scrollbar.paddingStart+i,s=t.scrollbar.size-t.scrollbar.paddingEnd-a,u=t.content-t.viewport;return X([c,s],"ltr"===o?[0,u]:[-1u,0])(e)}(e,i.current,a,r)}return"horizontal"===t?/#__PURE__/f.createElement(T,p({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=O(n.viewport.scrollLeft,a,n.dir);l.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollLeft=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollLeft=d(e,n.dir))}})):"vertical"===t?/#__PURE__/f.createElement(y,p({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=O(n.viewport.scrollTop,a);l.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollTop=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollTop=d(e))}})):null})),T=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=b("ScrollAreaScrollbar"),[i,a]=f.useState(),s=f.useRef(null),u=c(r,s,l.onScrollbarXChange);return f.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/#__PURE__/f.createElement(P,p({"data-orientation":"horizontal"},n,{ref:u,sizes:t,style:{bottom:0,left:"rtl"===l.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===l.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":W(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),Y(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:s.current.clientWidth,paddingStart:z(i.paddingLeft),paddingEnd:z(i.paddingRight)}})}}))})),y=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=b("ScrollAreaScrollbar"),[i,a]=f.useState(),s=f.useRef(null),u=c(r,s,l.onScrollbarYChange);return f.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/#__PURE__/f.createElement(P,p({"data-orientation":"vertical"},n,{ref:u,sizes:t,style:{top:0,right:"ltr"===l.dir?0:void 0,left:"rtl"===l.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":W(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),Y(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:s.current.clientHeight,paddingStart:z(i.paddingTop),paddingEnd:z(i.paddingBottom)}})}}))})),[R,x]=s("ScrollAreaScrollbar"),P=/#__PURE__/f.forwardRef(((e,r)=>{const{sizes:t,hasThumb:n,onThumbChange:l,onThumbPointerUp:i,onThumbPointerDown:s,onThumbPositionChange:u,onDragScroll:h,onWheelScroll:w,onResize:v,...m}=e,S=b("ScrollAreaScrollbar"),[g,E]=f.useState(null),C=c(r,(e=>E(e))),T=f.useRef(null),y=f.useRef(""),x=S.viewport,P=t.content-t.viewport,L=a(w),D=a(u),A=M(v,10);function z(e){if(T.current){const r=e.clientX-T.current.left,t=e.clientY-T.current.top;h({x:r,y:t})}}return f.useEffect((()=>{const e=e=>{const r=e.target;(null==g?void 0:g.contains(r))&&L(e,P)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,g,P,L]),f.useEffect(D,[t,D]),_(g,A),_(S.content,A),/#__PURE__/f.createElement(R,{scrollbar:g,hasThumb:n,onThumbChange:a(l),onThumbPointerUp:a(i),onThumbPositionChange:D,onThumbPointerDown:a(s)},/#__PURE__/f.createElement(d,p({},m,{ref:C,style:{position:"absolute",...m.style},onPointerDown:o(e.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),T.current=g.getBoundingClientRect(),y.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",z(e)}})),onPointerMove:o(e.onPointerMove,z),onPointerUp:o(e.onPointerUp,(e=>{e.target.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=y.current,T.current=null}))})))})),L=/#__PURE__/f.forwardRef(((e,r)=>{const{style:t,...n}=e,l=b("ScrollbarThumb"),i=x("ScrollbarThumb"),{onThumbPositionChange:a}=i,s=c(r,(e=>i.onThumbChange(e))),u=f.useRef(),h=M((()=>{u.current&&(u.current(),u.current=void 0)}),100);return f.useEffect((()=>{const e=l.viewport;if(e){const r=()=>{if(h(),!u.current){const r=q(e,a);u.current=r,a()}};return a(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[l.viewport,h,a]),i.hasThumb?/#__PURE__/f.createElement(d,p({},n,{ref:s,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...t},onPointerDownCapture:o(e.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;i.onThumbPointerDown({x:t,y:o})})),onPointerUp:o(e.onPointerUp,i.onThumbPointerUp)})):null}));exports.ScrollAreaThumb=L;const D=/#__PURE__/f.forwardRef(((e,r)=>{const t=b("ScrollAreaCorner"),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?/#__PURE__/f.createElement(A,p({},e,{ref:r})):null}));exports.ScrollAreaCorner=D;const A=/#__PURE__/f.forwardRef(((e,r)=>{const t=b("ScrollAreaCorner"),[o,n]=f.useState(0),[l,i]=f.useState(0),a=Boolean(o&&l);return _(t.scrollbarX,(()=>{var e;const r=(null===(e=t.scrollbarX)\|\|void 0===e?void 0:e.offsetHeight)\|\|0;t.onCornerHeightChange(r),i(r)})),_(t.scrollbarY,(()=>{var e;const r=(null===(e=t.scrollbarY)\|\|void 0===e?void 0:e.offsetWidth)\|\|0;t.onCornerWidthChange(r),n(r)})),a?/#__PURE__/f.createElement(d,p({},e,{ref:r,style:{width:o,height:l,position:"absolute",right:"ltr"===t.dir?0:void 0,left:"rtl"===t.dir?0:void 0,bottom:0,...e.style}})):null}));function z(e){return e?parseInt(e,10):0}function H(e,r){const t=e/r;return isNaN(t)?0:t}function W(e){const r=H(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)r;return Math.max(o,18)}function O(e,r,t="ltr"){const o=W(r),l=r.scrollbar.paddingStart+r.scrollbar.paddingEnd,i=r.scrollbar.size-l,a=r.content-r.viewport,c=i-o,s=n(e,"ltr"===t?[0,a]:[-1a,0]);return X([0,a],[0,c])(s)}function X(e,r){return t=>{if(e[0]===e[1]\|\|r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o(t-e[0])}}function Y(e,r){return e>0&&e<r}const q=(e,r=(()=>{}))=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i\|\|a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function M(e,r){const t=a(e),o=f.useRef(0);return f.useEffect((()=>()=>window.clearTimeout(o.current)),[]),f.useCallback((()=>{window.clearTimeout(o.current),o.current=window.setTimeout(t,r)}),[t,r])}function _(e,r){const t=a(r);l((()=>{let r=0;if(e){const o=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(t)}));return o.observe(e),()=>{window.cancelAnimationFrame(r),o.unobserve(e)}}}),[e,t])}const N=w;exports.Root=N;const I=v;exports.Viewport=I;const U=m;exports.Scrollbar=U;const k=L;exports.Thumb=k;const V=D;exports.Corner=V;
		//# sourceMappingURL=index.js.map

dist/index.module.js

		@@ -1,2 +0,2 @@
		import{composeEventHandlers as e}from"@radix-ui/primitive";import{clamp as r}from"@radix-ui/number";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useDirection as o}from"@radix-ui/react-use-direction";import{useCallbackRef as n}from"@radix-ui/react-use-callback-ref";import{useComposedRefs as l}from"@radix-ui/react-compose-refs";import{createContext as i}from"@radix-ui/react-context";import{Presence as a}from"@radix-ui/react-presence";import{Primitive as c}from"@radix-ui/react-primitive";importas s from"react";import u from"@babel/runtime/helpers/esm/extends";const[d,f]=i("ScrollArea");export const ScrollArea=/#__PURE__/s.forwardRef(((e,r)=>{const{type:t="hover",scrollHideDelay:n=600,...i}=e,[a,f]=s.useState(null),[p,h]=s.useState(null),[m,w]=s.useState(null),[b,v]=s.useState(null),[S,g]=s.useState(null),[E,C]=s.useState(0),[T,y]=s.useState(0),[R,x]=s.useState(!1),[P,L]=s.useState(!1),A=l(r,(e=>f(e))),D=o(a,i.dir);/#__PURE__/return s.createElement(d,{type:t,dir:D,scrollHideDelay:n,scrollArea:a,viewport:p,onViewportChange:h,content:m,onContentChange:w,scrollbarX:b,onScrollbarXChange:v,scrollbarXEnabled:R,onScrollbarXEnabledChange:x,scrollbarY:S,onScrollbarYChange:g,scrollbarYEnabled:P,onScrollbarYEnabledChange:L,onCornerWidthChange:C,onCornerHeightChange:y},/#__PURE__/s.createElement(c,u({},i,{ref:A,style:{position:"relative","--radix-scroll-area-corner-width":E+"px","--radix-scroll-area-corner-height":T+"px",...e.style}})))}));/#__PURE__/export const ScrollAreaViewport=/#__PURE__/s.forwardRef(((e,r)=>{const{children:t,...o}=e,n=f("ScrollAreaViewport"),i=s.useRef(null),a=l(r,i,n.onViewportChange);/#__PURE__/return s.createElement(s.Fragment,null,/#__PURE__/s.createElement("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"}}),/#__PURE__/s.createElement(c,u({"data-radix-scroll-area-viewport":""},o,{ref:a,style:{overflowX:n.scrollbarXEnabled?"scroll":"hidden",overflowY:n.scrollbarYEnabled?"scroll":"hidden",...e.style}}),/#__PURE__/s.createElement("div",{ref:n.onContentChange,style:{minWidth:"100%",display:"table"}},t)))}));/#__PURE__/export const ScrollAreaScrollbar=/#__PURE__/s.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=f("ScrollAreaScrollbar"),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:i}=n,a="horizontal"===e.orientation;return s.useEffect((()=>(a?l(!0):i(!0),()=>{a?l(!1):i(!1)})),[a,l,i]),"hover"===n.type?/#__PURE__/s.createElement(p,u({},o,{ref:r,forceMount:t})):"scroll"===n.type?/#__PURE__/s.createElement(h,u({},o,{ref:r,forceMount:t})):"auto"===n.type?/#__PURE__/s.createElement(m,u({},o,{ref:r,forceMount:t})):"always"===n.type?/#__PURE__/s.createElement(w,u({},o,{ref:r})):null}));/#__PURE__/const p=/#__PURE__/s.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=f("ScrollAreaScrollbar"),[l,i]=s.useState(!1);return s.useEffect((()=>{const e=n.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),i(!0)},o=()=>{r=window.setTimeout((()=>i(!1)),n.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[n.scrollArea,n.scrollHideDelay]),/#__PURE__/s.createElement(a,{present:t\|\|l},/#__PURE__/s.createElement(m,u({},o,{ref:r})))})),h=/#__PURE__/s.forwardRef(((r,t)=>{const{forceMount:o,...n}=r,l=f("ScrollAreaScrollbar"),i="horizontal"===r.orientation,c=D((()=>p("SCROLL_END")),100),[d,p]=(h="hidden",m={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},s.useReducer(((e,r)=>{const t=m[e][r];return null!=t?t:e}),h));var h,m;return s.useEffect((()=>{if("idle"===d){const e=window.setTimeout((()=>p("HIDE")),l.scrollHideDelay);return()=>window.clearTimeout(e)}}),[d,l.scrollHideDelay,p]),s.useEffect((()=>{const e=l.viewport,r=i?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(p("SCROLL"),c()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[l.viewport,i,p,c]),/#__PURE__/s.createElement(a,{present:o\|\|"hidden"!==d},/#__PURE__/s.createElement(w,u({},n,{ref:t,onPointerEnter:e(r.onPointerEnter,(()=>p("POINTER_ENTER"))),onPointerLeave:e(r.onPointerLeave,(()=>p("POINTER_LEAVE")))})))})),m=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaScrollbar"),{forceMount:o,...n}=e,[l,i]=s.useState(!1),c="horizontal"===e.orientation,d=D((()=>{if(t.viewport){const e=t.viewport.offsetWidth<t.viewport.scrollWidth,r=t.viewport.offsetHeight<t.viewport.scrollHeight;i(c?e:r)}}),10);return z(t.viewport,d),z(t.content,d),/#__PURE__/s.createElement(a,{present:o\|\|l},/#__PURE__/s.createElement(w,u({},n,{ref:r})))})),w=/#__PURE__/s.forwardRef(((e,r)=>{const{orientation:t="vertical",...o}=e,n=f("ScrollAreaScrollbar"),l=s.useRef(null),i=s.useRef(0),[a,c]=s.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),d=y(a.viewport,a.content),p={...o,sizes:a,onSizesChange:c,hasThumb:Boolean(d>0&&d<1),onThumbChange:e=>l.current=e,onThumbPointerUp:()=>i.current=0,onThumbPointerDown:e=>i.current=e};function h(e,r){return function(e,r,t,o="ltr"){const n=R(t),l=n/2,i=r\|\|l,a=n-i,c=t.scrollbar.paddingStart+i,s=t.scrollbar.size-t.scrollbar.paddingEnd-a,u=t.content-t.viewport;return P([c,s],"ltr"===o?[0,u]:[-1u,0])(e)}(e,i.current,a,r)}return"horizontal"===t?/#__PURE__/s.createElement(b,u({},p,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=x(n.viewport.scrollLeft,a,n.dir);l.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollLeft=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollLeft=h(e,n.dir))}})):"vertical"===t?/#__PURE__/s.createElement(v,u({},p,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=x(n.viewport.scrollTop,a);l.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollTop=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollTop=h(e))}})):null})),b=/#__PURE__/s.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,i=f("ScrollAreaScrollbar"),[a,c]=s.useState(),d=s.useRef(null),p=l(r,d,i.onScrollbarXChange);return s.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),/#__PURE__/s.createElement(E,u({"data-orientation":"horizontal"},n,{ref:p,sizes:t,style:{bottom:0,left:"rtl"===i.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===i.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":R(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(i.viewport){const o=i.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),L(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&i.viewport&&a&&o({content:i.viewport.scrollWidth,viewport:i.viewport.offsetWidth,scrollbar:{size:d.current.clientWidth,paddingStart:T(a.paddingLeft),paddingEnd:T(a.paddingRight)}})}}))})),v=/#__PURE__/s.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,i=f("ScrollAreaScrollbar"),[a,c]=s.useState(),d=s.useRef(null),p=l(r,d,i.onScrollbarYChange);return s.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),/#__PURE__/s.createElement(E,u({"data-orientation":"vertical"},n,{ref:p,sizes:t,style:{top:0,right:"ltr"===i.dir?0:void 0,left:"rtl"===i.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":R(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(i.viewport){const o=i.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),L(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&i.viewport&&a&&o({content:i.viewport.scrollHeight,viewport:i.viewport.offsetHeight,scrollbar:{size:d.current.clientHeight,paddingStart:T(a.paddingTop),paddingEnd:T(a.paddingBottom)}})}}))})),[S,g]=i("ScrollAreaScrollbar"),E=/#__PURE__/s.forwardRef(((r,t)=>{const{sizes:o,hasThumb:i,onThumbChange:a,onThumbPointerUp:d,onThumbPointerDown:p,onThumbPositionChange:h,onDragScroll:m,onWheelScroll:w,onResize:b,...v}=r,g=f("ScrollAreaScrollbar"),[E,C]=s.useState(null),T=l(t,(e=>C(e))),y=s.useRef(null),R=s.useRef(""),x=g.viewport,P=o.content-o.viewport,L=n(w),A=n(h),H=D(b,10);function W(e){if(y.current){const r=e.clientX-y.current.left,t=e.clientY-y.current.top;m({x:r,y:t})}}return s.useEffect((()=>{const e=e=>{const r=e.target;(null==E?void 0:E.contains(r))&&L(e,P)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,E,P,L]),s.useEffect(A,[o,A]),z(E,H),z(g.content,H),/#__PURE__/s.createElement(S,{scrollbar:E,hasThumb:i,onThumbChange:n(a),onThumbPointerUp:n(d),onThumbPositionChange:A,onThumbPointerDown:n(p)},/#__PURE__/s.createElement(c,u({},v,{ref:T,style:{position:"absolute",...v.style},onPointerDown:e(r.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),y.current=E.getBoundingClientRect(),R.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",W(e)}})),onPointerMove:e(r.onPointerMove,W),onPointerUp:e(r.onPointerUp,(e=>{e.target.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=R.current,y.current=null}))})))}));export const ScrollAreaThumb=/#__PURE__/s.forwardRef(((r,t)=>{const{style:o,...n}=r,i=f("ScrollbarThumb"),a=g("ScrollbarThumb"),{onThumbPositionChange:d}=a,p=l(t,(e=>a.onThumbChange(e))),h=s.useRef(),m=D((()=>{h.current&&(h.current(),h.current=void 0)}),100);return s.useEffect((()=>{const e=i.viewport;if(e){const r=()=>{if(m(),!h.current){const r=A(e,d);h.current=r,d()}};return d(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[i.viewport,m,d]),a.hasThumb?/#__PURE__/s.createElement(c,u({},n,{ref:p,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...o},onPointerDownCapture:e(r.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;a.onThumbPointerDown({x:t,y:o})})),onPointerUp:e(r.onPointerUp,a.onThumbPointerUp)})):null}));/#__PURE__/export const ScrollAreaCorner=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaCorner"),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?/#__PURE__/s.createElement(C,u({},e,{ref:r})):null}));/#__PURE__/const C=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaCorner"),[o,n]=s.useState(0),[l,i]=s.useState(0),a=Boolean(o&&l);return z(t.scrollbarX,(()=>{var e;const r=(null===(e=t.scrollbarX)\|\|void 0===e?void 0:e.offsetHeight)\|\|0;t.onCornerHeightChange(r),i(r)})),z(t.scrollbarY,(()=>{var e;const r=(null===(e=t.scrollbarY)\|\|void 0===e?void 0:e.offsetWidth)\|\|0;t.onCornerWidthChange(r),n(r)})),a?/#__PURE__/s.createElement(c,u({},e,{ref:r,style:{width:o,height:l,position:"absolute",right:"ltr"===t.dir?0:void 0,left:"rtl"===t.dir?0:void 0,bottom:0,...e.style}})):null}));function T(e){return e?parseInt(e,10):0}function y(e,r){const t=e/r;return isNaN(t)?0:t}function R(e){const r=y(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)r;return Math.max(o,18)}function x(e,t,o="ltr"){const n=R(t),l=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-l,a=t.content-t.viewport,c=i-n,s=r(e,"ltr"===o?[0,a]:[-1a,0]);return P([0,a],[0,c])(s)}function P(e,r){return t=>{if(e[0]===e[1]\|\|r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o*(t-e[0])}}function L(e,r){return e>0&&e<r}const A=(e,r=(()=>{}))=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i\|\|a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function D(e,r){const t=n(e),o=s.useRef(0);return s.useEffect((()=>()=>window.clearTimeout(o.current)),[]),s.useCallback((()=>{window.clearTimeout(o.current),o.current=window.setTimeout(t,r)}),[t,r])}function z(e,r){const o=n(r);t((()=>{let r=0;if(e){const t=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(o)}));return t.observe(e),()=>{window.cancelAnimationFrame(r),t.unobserve(e)}}}),[e,o])}export const Root=ScrollArea;export const Viewport=ScrollAreaViewport;export const Scrollbar=ScrollAreaScrollbar;export const Thumb=ScrollAreaThumb;export const Corner=ScrollAreaCorner;
		import{composeEventHandlers as e}from"@radix-ui/primitive";import{clamp as r}from"@radix-ui/number";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useDirection as o}from"@radix-ui/react-use-direction";import{useCallbackRef as n}from"@radix-ui/react-use-callback-ref";import{useComposedRefs as l}from"@radix-ui/react-compose-refs";import{createContext as i}from"@radix-ui/react-context";import{Presence as a}from"@radix-ui/react-presence";import{Primitive as c}from"@radix-ui/react-primitive";importas s from"react";import u from"@babel/runtime/helpers/esm/extends";const[d,f]=i("ScrollArea");export const ScrollArea=/#__PURE__/s.forwardRef(((e,r)=>{const{type:t="hover",scrollHideDelay:n=600,...i}=e,[a,f]=s.useState(null),[p,h]=s.useState(null),[m,w]=s.useState(null),[b,v]=s.useState(null),[S,g]=s.useState(null),[E,C]=s.useState(0),[T,y]=s.useState(0),[R,x]=s.useState(!1),[P,L]=s.useState(!1),A=l(r,(e=>f(e))),D=o(a,i.dir);/#__PURE__/return s.createElement(d,{type:t,dir:D,scrollHideDelay:n,scrollArea:a,viewport:p,onViewportChange:h,content:m,onContentChange:w,scrollbarX:b,onScrollbarXChange:v,scrollbarXEnabled:R,onScrollbarXEnabledChange:x,scrollbarY:S,onScrollbarYChange:g,scrollbarYEnabled:P,onScrollbarYEnabledChange:L,onCornerWidthChange:C,onCornerHeightChange:y},/#__PURE__/s.createElement(c,u({},i,{ref:A,style:{position:"relative","--radix-scroll-area-corner-width":E+"px","--radix-scroll-area-corner-height":T+"px",...e.style}})))}));/#__PURE__/export const ScrollAreaViewport=/#__PURE__/s.forwardRef(((e,r)=>{const{children:t,...o}=e,n=f("ScrollAreaViewport"),i=s.useRef(null),a=l(r,i,n.onViewportChange);/#__PURE__/return s.createElement(s.Fragment,null,/#__PURE__/s.createElement("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"}}),/#__PURE__/s.createElement(c,u({"data-radix-scroll-area-viewport":""},o,{ref:a,style:{overflowX:n.scrollbarXEnabled?"scroll":"hidden",overflowY:n.scrollbarYEnabled?"scroll":"hidden",...e.style}}),/#__PURE__/s.createElement("div",{ref:n.onContentChange,style:{minWidth:"100%",display:"table"}},t)))}));/#__PURE__/export const ScrollAreaScrollbar=/#__PURE__/s.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=f("ScrollAreaScrollbar"),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:i}=n,a="horizontal"===e.orientation;return s.useEffect((()=>(a?l(!0):i(!0),()=>{a?l(!1):i(!1)})),[a,l,i]),"hover"===n.type?/#__PURE__/s.createElement(p,u({},o,{ref:r,forceMount:t})):"scroll"===n.type?/#__PURE__/s.createElement(h,u({},o,{ref:r,forceMount:t})):"auto"===n.type?/#__PURE__/s.createElement(m,u({},o,{ref:r,forceMount:t})):"always"===n.type?/#__PURE__/s.createElement(w,u({},o,{ref:r})):null}));/#__PURE__/const p=/#__PURE__/s.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=f("ScrollAreaScrollbar"),[l,i]=s.useState(!1);return s.useEffect((()=>{const e=n.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),i(!0)},o=()=>{r=window.setTimeout((()=>i(!1)),n.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[n.scrollArea,n.scrollHideDelay]),/#__PURE__/s.createElement(a,{present:t\|\|l},/#__PURE__/s.createElement(m,u({"data-state":l?"visible":"hidden"},o,{ref:r})))})),h=/#__PURE__/s.forwardRef(((r,t)=>{const{forceMount:o,...n}=r,l=f("ScrollAreaScrollbar"),i="horizontal"===r.orientation,c=D((()=>p("SCROLL_END")),100),[d,p]=(h="hidden",m={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},s.useReducer(((e,r)=>{const t=m[e][r];return null!=t?t:e}),h));var h,m;return s.useEffect((()=>{if("idle"===d){const e=window.setTimeout((()=>p("HIDE")),l.scrollHideDelay);return()=>window.clearTimeout(e)}}),[d,l.scrollHideDelay,p]),s.useEffect((()=>{const e=l.viewport,r=i?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(p("SCROLL"),c()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[l.viewport,i,p,c]),/#__PURE__/s.createElement(a,{present:o\|\|"hidden"!==d},/#__PURE__/s.createElement(w,u({"data-state":"hidden"===d?"hidden":"visible"},n,{ref:t,onPointerEnter:e(r.onPointerEnter,(()=>p("POINTER_ENTER"))),onPointerLeave:e(r.onPointerLeave,(()=>p("POINTER_LEAVE")))})))})),m=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaScrollbar"),{forceMount:o,...n}=e,[l,i]=s.useState(!1),c="horizontal"===e.orientation,d=D((()=>{if(t.viewport){const e=t.viewport.offsetWidth<t.viewport.scrollWidth,r=t.viewport.offsetHeight<t.viewport.scrollHeight;i(c?e:r)}}),10);return z(t.viewport,d),z(t.content,d),/#__PURE__/s.createElement(a,{present:o\|\|l},/#__PURE__/s.createElement(w,u({"data-state":l?"visible":"hidden"},n,{ref:r})))})),w=/#__PURE__/s.forwardRef(((e,r)=>{const{orientation:t="vertical",...o}=e,n=f("ScrollAreaScrollbar"),l=s.useRef(null),i=s.useRef(0),[a,c]=s.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),d=y(a.viewport,a.content),p={...o,sizes:a,onSizesChange:c,hasThumb:Boolean(d>0&&d<1),onThumbChange:e=>l.current=e,onThumbPointerUp:()=>i.current=0,onThumbPointerDown:e=>i.current=e};function h(e,r){return function(e,r,t,o="ltr"){const n=R(t),l=n/2,i=r\|\|l,a=n-i,c=t.scrollbar.paddingStart+i,s=t.scrollbar.size-t.scrollbar.paddingEnd-a,u=t.content-t.viewport;return P([c,s],"ltr"===o?[0,u]:[-1u,0])(e)}(e,i.current,a,r)}return"horizontal"===t?/#__PURE__/s.createElement(b,u({},p,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=x(n.viewport.scrollLeft,a,n.dir);l.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollLeft=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollLeft=h(e,n.dir))}})):"vertical"===t?/#__PURE__/s.createElement(v,u({},p,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=x(n.viewport.scrollTop,a);l.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollTop=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollTop=h(e))}})):null})),b=/#__PURE__/s.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,i=f("ScrollAreaScrollbar"),[a,c]=s.useState(),d=s.useRef(null),p=l(r,d,i.onScrollbarXChange);return s.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),/#__PURE__/s.createElement(E,u({"data-orientation":"horizontal"},n,{ref:p,sizes:t,style:{bottom:0,left:"rtl"===i.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===i.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":R(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(i.viewport){const o=i.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),L(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&i.viewport&&a&&o({content:i.viewport.scrollWidth,viewport:i.viewport.offsetWidth,scrollbar:{size:d.current.clientWidth,paddingStart:T(a.paddingLeft),paddingEnd:T(a.paddingRight)}})}}))})),v=/#__PURE__/s.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,i=f("ScrollAreaScrollbar"),[a,c]=s.useState(),d=s.useRef(null),p=l(r,d,i.onScrollbarYChange);return s.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),/#__PURE__/s.createElement(E,u({"data-orientation":"vertical"},n,{ref:p,sizes:t,style:{top:0,right:"ltr"===i.dir?0:void 0,left:"rtl"===i.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":R(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(i.viewport){const o=i.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),L(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&i.viewport&&a&&o({content:i.viewport.scrollHeight,viewport:i.viewport.offsetHeight,scrollbar:{size:d.current.clientHeight,paddingStart:T(a.paddingTop),paddingEnd:T(a.paddingBottom)}})}}))})),[S,g]=i("ScrollAreaScrollbar"),E=/#__PURE__/s.forwardRef(((r,t)=>{const{sizes:o,hasThumb:i,onThumbChange:a,onThumbPointerUp:d,onThumbPointerDown:p,onThumbPositionChange:h,onDragScroll:m,onWheelScroll:w,onResize:b,...v}=r,g=f("ScrollAreaScrollbar"),[E,C]=s.useState(null),T=l(t,(e=>C(e))),y=s.useRef(null),R=s.useRef(""),x=g.viewport,P=o.content-o.viewport,L=n(w),A=n(h),H=D(b,10);function W(e){if(y.current){const r=e.clientX-y.current.left,t=e.clientY-y.current.top;m({x:r,y:t})}}return s.useEffect((()=>{const e=e=>{const r=e.target;(null==E?void 0:E.contains(r))&&L(e,P)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,E,P,L]),s.useEffect(A,[o,A]),z(E,H),z(g.content,H),/#__PURE__/s.createElement(S,{scrollbar:E,hasThumb:i,onThumbChange:n(a),onThumbPointerUp:n(d),onThumbPositionChange:A,onThumbPointerDown:n(p)},/#__PURE__/s.createElement(c,u({},v,{ref:T,style:{position:"absolute",...v.style},onPointerDown:e(r.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),y.current=E.getBoundingClientRect(),R.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",W(e)}})),onPointerMove:e(r.onPointerMove,W),onPointerUp:e(r.onPointerUp,(e=>{e.target.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=R.current,y.current=null}))})))}));export const ScrollAreaThumb=/#__PURE__/s.forwardRef(((r,t)=>{const{style:o,...n}=r,i=f("ScrollbarThumb"),a=g("ScrollbarThumb"),{onThumbPositionChange:d}=a,p=l(t,(e=>a.onThumbChange(e))),h=s.useRef(),m=D((()=>{h.current&&(h.current(),h.current=void 0)}),100);return s.useEffect((()=>{const e=i.viewport;if(e){const r=()=>{if(m(),!h.current){const r=A(e,d);h.current=r,d()}};return d(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[i.viewport,m,d]),a.hasThumb?/#__PURE__/s.createElement(c,u({},n,{ref:p,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...o},onPointerDownCapture:e(r.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;a.onThumbPointerDown({x:t,y:o})})),onPointerUp:e(r.onPointerUp,a.onThumbPointerUp)})):null}));/#__PURE__/export const ScrollAreaCorner=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaCorner"),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?/#__PURE__/s.createElement(C,u({},e,{ref:r})):null}));/#__PURE__/const C=/#__PURE__/s.forwardRef(((e,r)=>{const t=f("ScrollAreaCorner"),[o,n]=s.useState(0),[l,i]=s.useState(0),a=Boolean(o&&l);return z(t.scrollbarX,(()=>{var e;const r=(null===(e=t.scrollbarX)\|\|void 0===e?void 0:e.offsetHeight)\|\|0;t.onCornerHeightChange(r),i(r)})),z(t.scrollbarY,(()=>{var e;const r=(null===(e=t.scrollbarY)\|\|void 0===e?void 0:e.offsetWidth)\|\|0;t.onCornerWidthChange(r),n(r)})),a?/#__PURE__/s.createElement(c,u({},e,{ref:r,style:{width:o,height:l,position:"absolute",right:"ltr"===t.dir?0:void 0,left:"rtl"===t.dir?0:void 0,bottom:0,...e.style}})):null}));function T(e){return e?parseInt(e,10):0}function y(e,r){const t=e/r;return isNaN(t)?0:t}function R(e){const r=y(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)r;return Math.max(o,18)}function x(e,t,o="ltr"){const n=R(t),l=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-l,a=t.content-t.viewport,c=i-n,s=r(e,"ltr"===o?[0,a]:[-1a,0]);return P([0,a],[0,c])(s)}function P(e,r){return t=>{if(e[0]===e[1]\|\|r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o*(t-e[0])}}function L(e,r){return e>0&&e<r}const A=(e,r=(()=>{}))=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i\|\|a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function D(e,r){const t=n(e),o=s.useRef(0);return s.useEffect((()=>()=>window.clearTimeout(o.current)),[]),s.useCallback((()=>{window.clearTimeout(o.current),o.current=window.setTimeout(t,r)}),[t,r])}function z(e,r){const o=n(r);t((()=>{let r=0;if(e){const t=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(o)}));return t.observe(e),()=>{window.cancelAnimationFrame(r),t.unobserve(e)}}}),[e,o])}export const Root=ScrollArea;export const Viewport=ScrollAreaViewport;export const Scrollbar=ScrollAreaScrollbar;export const Thumb=ScrollAreaThumb;export const Corner=ScrollAreaCorner;
		//# sourceMappingURL=index.module.js.map

package.json

		{
		"name": "@radix-ui/react-scroll-area",
		"version": "0.0.15",
		"version": "0.0.16",
		"license": "MIT",
		@@ -25,5 +25,5 @@ "source": "src/index.ts",
		"@radix-ui/react-context": "0.0.5",
		"@radix-ui/react-polymorphic": "0.0.12",
		"@radix-ui/react-presence": "0.0.14",
		"@radix-ui/react-primitive": "0.0.14",
		"@radix-ui/react-polymorphic": "0.0.13",
		"@radix-ui/react-presence": "0.0.15",
		"@radix-ui/react-primitive": "0.0.15",
		"@radix-ui/react-use-callback-ref": "0.0.5",
		@@ -30,0 +30,0 @@ "@radix-ui/react-use-direction": "0.0.1",

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.module.js.map

Sorry, the diff of this file is not supported yet

@radix-ui/react-scroll-area - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes