@anoki/fse-ui
Version:
FSE UI components library
3 lines (2 loc) • 13.6 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const le=require("react"),j=require("./index.cjs474.js"),N=require("./index.cjs489.js"),se=require("./index.cjs472.js"),A=require("./index.cjs471.js"),g=require("./index.cjs480.js"),ce=require("./index.cjs483.js"),ie=require("./index.cjs493.js"),ae=require("./index.cjs580.js"),E=require("./index.cjs470.js"),m=require("./index.cjs244.js");function ue(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const s=ue(le);function de(e,o){return s.useReducer((r,n)=>o[r][n]??r,e)}var Y="ScrollArea",[K,fe]=se.createContextScope(Y),[he,v]=K(Y),V=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,type:n="hover",dir:t,scrollHideDelay:l=600,...c}=e,[i,a]=s.useState(null),[f,u]=s.useState(null),[h,d]=s.useState(null),[b,S]=s.useState(null),[T,M]=s.useState(null),[R,_]=s.useState(0),[X,L]=s.useState(0),[D,y]=s.useState(!1),[H,O]=s.useState(!1),p=A.useComposedRefs(o,P=>a(P)),x=ce.useDirection(t);return m.jsxRuntimeExports.jsx(he,{scope:r,type:n,dir:x,scrollHideDelay:l,scrollArea:i,viewport:f,onViewportChange:u,content:h,onContentChange:d,scrollbarX:b,onScrollbarXChange:S,scrollbarXEnabled:D,onScrollbarXEnabledChange:y,scrollbarY:T,onScrollbarYChange:M,scrollbarYEnabled:H,onScrollbarYEnabledChange:O,onCornerWidthChange:_,onCornerHeightChange:L,children:m.jsxRuntimeExports.jsx(j.Primitive.div,{dir:x,...c,ref:p,style:{position:"relative","--radix-scroll-area-corner-width":R+"px","--radix-scroll-area-corner-height":X+"px",...e.style}})})});V.displayName=Y;var Q="ScrollAreaViewport",U=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,children:n,nonce:t,...l}=e,c=v(Q,r),i=s.useRef(null),a=A.useComposedRefs(o,i,c.onViewportChange);return m.jsxRuntimeExports.jsxs(m.jsxRuntimeExports.Fragment,{children:[m.jsxRuntimeExports.jsx("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}"},nonce:t}),m.jsxRuntimeExports.jsx(j.Primitive.div,{"data-radix-scroll-area-viewport":"",...l,ref:a,style:{overflowX:c.scrollbarXEnabled?"scroll":"hidden",overflowY:c.scrollbarYEnabled?"scroll":"hidden",...e.style},children:m.jsxRuntimeExports.jsx("div",{ref:c.onContentChange,style:{minWidth:"100%",display:"table"},children:n})})]})});U.displayName=Q;var w="ScrollAreaScrollbar",q=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=v(w,e.__scopeScrollArea),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:c}=t,i=e.orientation==="horizontal";return s.useEffect(()=>(i?l(!0):c(!0),()=>{i?l(!1):c(!1)}),[i,l,c]),t.type==="hover"?m.jsxRuntimeExports.jsx(me,{...n,ref:o,forceMount:r}):t.type==="scroll"?m.jsxRuntimeExports.jsx(be,{...n,ref:o,forceMount:r}):t.type==="auto"?m.jsxRuntimeExports.jsx(Z,{...n,ref:o,forceMount:r}):t.type==="always"?m.jsxRuntimeExports.jsx(B,{...n,ref:o}):null});q.displayName=w;var me=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=v(w,e.__scopeScrollArea),[l,c]=s.useState(!1);return s.useEffect(()=>{const i=t.scrollArea;let a=0;if(i){const f=()=>{window.clearTimeout(a),c(!0)},u=()=>{a=window.setTimeout(()=>c(!1),t.scrollHideDelay)};return i.addEventListener("pointerenter",f),i.addEventListener("pointerleave",u),()=>{window.clearTimeout(a),i.removeEventListener("pointerenter",f),i.removeEventListener("pointerleave",u)}}},[t.scrollArea,t.scrollHideDelay]),m.jsxRuntimeExports.jsx(N.Presence,{present:r||l,children:m.jsxRuntimeExports.jsx(Z,{"data-state":l?"visible":"hidden",...n,ref:o})})}),be=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=v(w,e.__scopeScrollArea),l=e.orientation==="horizontal",c=I(()=>a("SCROLL_END"),100),[i,a]=de("hidden",{hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}});return s.useEffect(()=>{if(i==="idle"){const f=window.setTimeout(()=>a("HIDE"),t.scrollHideDelay);return()=>window.clearTimeout(f)}},[i,t.scrollHideDelay,a]),s.useEffect(()=>{const f=t.viewport,u=l?"scrollLeft":"scrollTop";if(f){let h=f[u];const d=()=>{const b=f[u];h!==b&&(a("SCROLL"),c()),h=b};return f.addEventListener("scroll",d),()=>f.removeEventListener("scroll",d)}},[t.viewport,l,a,c]),m.jsxRuntimeExports.jsx(N.Presence,{present:r||i!=="hidden",children:m.jsxRuntimeExports.jsx(B,{"data-state":i==="hidden"?"hidden":"visible",...n,ref:o,onPointerEnter:E.composeEventHandlers(e.onPointerEnter,()=>a("POINTER_ENTER")),onPointerLeave:E.composeEventHandlers(e.onPointerLeave,()=>a("POINTER_LEAVE"))})})}),Z=s.forwardRef((e,o)=>{const r=v(w,e.__scopeScrollArea),{forceMount:n,...t}=e,[l,c]=s.useState(!1),i=e.orientation==="horizontal",a=I(()=>{if(r.viewport){const f=r.viewport.offsetWidth<r.viewport.scrollWidth,u=r.viewport.offsetHeight<r.viewport.scrollHeight;c(i?f:u)}},10);return C(r.viewport,a),C(r.content,a),m.jsxRuntimeExports.jsx(N.Presence,{present:n||l,children:m.jsxRuntimeExports.jsx(B,{"data-state":l?"visible":"hidden",...t,ref:o})})}),B=s.forwardRef((e,o)=>{const{orientation:r="vertical",...n}=e,t=v(w,e.__scopeScrollArea),l=s.useRef(null),c=s.useRef(0),[i,a]=s.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),f=te(i.viewport,i.content),u={...n,sizes:i,onSizesChange:a,hasThumb:f>0&&f<1,onThumbChange:d=>l.current=d,onThumbPointerUp:()=>c.current=0,onThumbPointerDown:d=>c.current=d};function h(d,b){return Re(d,c.current,i,b)}return r==="horizontal"?m.jsxRuntimeExports.jsx(pe,{...u,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const d=t.viewport.scrollLeft,b=J(d,i,t.dir);l.current.style.transform=`translate3d(${b}px, 0, 0)`}},onWheelScroll:d=>{t.viewport&&(t.viewport.scrollLeft=d)},onDragScroll:d=>{t.viewport&&(t.viewport.scrollLeft=h(d,t.dir))}}):r==="vertical"?m.jsxRuntimeExports.jsx(Se,{...u,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const d=t.viewport.scrollTop,b=J(d,i);l.current.style.transform=`translate3d(0, ${b}px, 0)`}},onWheelScroll:d=>{t.viewport&&(t.viewport.scrollTop=d)},onDragScroll:d=>{t.viewport&&(t.viewport.scrollTop=h(d))}}):null}),pe=s.forwardRef((e,o)=>{const{sizes:r,onSizesChange:n,...t}=e,l=v(w,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=A.useComposedRefs(o,a,l.onScrollbarXChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),m.jsxRuntimeExports.jsx(re,{"data-orientation":"horizontal",...t,ref:f,sizes:r,style:{bottom:0,left:l.dir==="rtl"?"var(--radix-scroll-area-corner-width)":0,right:l.dir==="ltr"?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":k(r)+"px",...e.style},onThumbPointerDown:u=>e.onThumbPointerDown(u.x),onDragScroll:u=>e.onDragScroll(u.x),onWheelScroll:(u,h)=>{if(l.viewport){const d=l.viewport.scrollLeft+u.deltaX;e.onWheelScroll(d),ne(d,h)&&u.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:a.current.clientWidth,paddingStart:z(c.paddingLeft),paddingEnd:z(c.paddingRight)}})}})}),Se=s.forwardRef((e,o)=>{const{sizes:r,onSizesChange:n,...t}=e,l=v(w,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=A.useComposedRefs(o,a,l.onScrollbarYChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),m.jsxRuntimeExports.jsx(re,{"data-orientation":"vertical",...t,ref:f,sizes:r,style:{top:0,right:l.dir==="ltr"?0:void 0,left:l.dir==="rtl"?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":k(r)+"px",...e.style},onThumbPointerDown:u=>e.onThumbPointerDown(u.y),onDragScroll:u=>e.onDragScroll(u.y),onWheelScroll:(u,h)=>{if(l.viewport){const d=l.viewport.scrollTop+u.deltaY;e.onWheelScroll(d),ne(d,h)&&u.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:a.current.clientHeight,paddingStart:z(c.paddingTop),paddingEnd:z(c.paddingBottom)}})}})}),[ve,ee]=K(w),re=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,sizes:n,hasThumb:t,onThumbChange:l,onThumbPointerUp:c,onThumbPointerDown:i,onThumbPositionChange:a,onDragScroll:f,onWheelScroll:u,onResize:h,...d}=e,b=v(w,r),[S,T]=s.useState(null),M=A.useComposedRefs(o,p=>T(p)),R=s.useRef(null),_=s.useRef(""),X=b.viewport,L=n.content-n.viewport,D=g.useCallbackRef(u),y=g.useCallbackRef(a),H=I(h,10);function O(p){if(R.current){const x=p.clientX-R.current.left,P=p.clientY-R.current.top;f({x,y:P})}}return s.useEffect(()=>{const p=x=>{const P=x.target;(S==null?void 0:S.contains(P))&&D(x,L)};return document.addEventListener("wheel",p,{passive:!1}),()=>document.removeEventListener("wheel",p,{passive:!1})},[X,S,L,D]),s.useEffect(y,[n,y]),C(S,H),C(b.content,H),m.jsxRuntimeExports.jsx(ve,{scope:r,scrollbar:S,hasThumb:t,onThumbChange:g.useCallbackRef(l),onThumbPointerUp:g.useCallbackRef(c),onThumbPositionChange:y,onThumbPointerDown:g.useCallbackRef(i),children:m.jsxRuntimeExports.jsx(j.Primitive.div,{...d,ref:M,style:{position:"absolute",...d.style},onPointerDown:E.composeEventHandlers(e.onPointerDown,p=>{p.button===0&&(p.target.setPointerCapture(p.pointerId),R.current=S.getBoundingClientRect(),_.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",b.viewport&&(b.viewport.style.scrollBehavior="auto"),O(p))}),onPointerMove:E.composeEventHandlers(e.onPointerMove,O),onPointerUp:E.composeEventHandlers(e.onPointerUp,p=>{const x=p.target;x.hasPointerCapture(p.pointerId)&&x.releasePointerCapture(p.pointerId),document.body.style.webkitUserSelect=_.current,b.viewport&&(b.viewport.style.scrollBehavior=""),R.current=null})})})}),W="ScrollAreaThumb",F=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=ee(W,e.__scopeScrollArea);return m.jsxRuntimeExports.jsx(N.Presence,{present:r||t.hasThumb,children:m.jsxRuntimeExports.jsx(xe,{ref:o,...n})})}),xe=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,style:n,...t}=e,l=v(W,r),c=ee(W,r),{onThumbPositionChange:i}=c,a=A.useComposedRefs(o,h=>c.onThumbChange(h)),f=s.useRef(void 0),u=I(()=>{f.current&&(f.current(),f.current=void 0)},100);return s.useEffect(()=>{const h=l.viewport;if(h){const d=()=>{if(u(),!f.current){const b=ge(h,i);f.current=b,i()}};return i(),h.addEventListener("scroll",d),()=>h.removeEventListener("scroll",d)}},[l.viewport,u,i]),m.jsxRuntimeExports.jsx(j.Primitive.div,{"data-state":c.hasThumb?"visible":"hidden",...t,ref:a,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...n},onPointerDownCapture:E.composeEventHandlers(e.onPointerDownCapture,h=>{const b=h.target.getBoundingClientRect(),S=h.clientX-b.left,T=h.clientY-b.top;c.onThumbPointerDown({x:S,y:T})}),onPointerUp:E.composeEventHandlers(e.onPointerUp,c.onThumbPointerUp)})});F.displayName=W;var $="ScrollAreaCorner",G=s.forwardRef((e,o)=>{const r=v($,e.__scopeScrollArea),n=!!(r.scrollbarX&&r.scrollbarY);return r.type!=="scroll"&&n?m.jsxRuntimeExports.jsx(we,{...e,ref:o}):null});G.displayName=$;var we=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,...n}=e,t=v($,r),[l,c]=s.useState(0),[i,a]=s.useState(0),f=!!(l&&i);return C(t.scrollbarX,()=>{var h;const u=((h=t.scrollbarX)==null?void 0:h.offsetHeight)||0;t.onCornerHeightChange(u),a(u)}),C(t.scrollbarY,()=>{var h;const u=((h=t.scrollbarY)==null?void 0:h.offsetWidth)||0;t.onCornerWidthChange(u),c(u)}),f?m.jsxRuntimeExports.jsx(j.Primitive.div,{...n,ref:o,style:{width:l,height:i,position:"absolute",right:t.dir==="ltr"?0:void 0,left:t.dir==="rtl"?0:void 0,bottom:0,...e.style}}):null});function z(e){return e?parseInt(e,10):0}function te(e,o){const r=e/o;return isNaN(r)?0:r}function k(e){const o=te(e.viewport,e.content),r=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,n=(e.scrollbar.size-r)*o;return Math.max(n,18)}function Re(e,o,r,n="ltr"){const t=k(r),l=t/2,c=o||l,i=t-c,a=r.scrollbar.paddingStart+c,f=r.scrollbar.size-r.scrollbar.paddingEnd-i,u=r.content-r.viewport,h=n==="ltr"?[0,u]:[u*-1,0];return oe([a,f],h)(e)}function J(e,o,r="ltr"){const n=k(o),t=o.scrollbar.paddingStart+o.scrollbar.paddingEnd,l=o.scrollbar.size-t,c=o.content-o.viewport,i=l-n,a=r==="ltr"?[0,c]:[c*-1,0],f=ae.clamp(e,a);return oe([0,c],[0,i])(f)}function oe(e,o){return r=>{if(e[0]===e[1]||o[0]===o[1])return o[0];const n=(o[1]-o[0])/(e[1]-e[0]);return o[0]+n*(r-e[0])}}function ne(e,o){return e>0&&e<o}var ge=(e,o=()=>{})=>{let r={left:e.scrollLeft,top:e.scrollTop},n=0;return function t(){const l={left:e.scrollLeft,top:e.scrollTop},c=r.left!==l.left,i=r.top!==l.top;(c||i)&&o(),r=l,n=window.requestAnimationFrame(t)}(),()=>window.cancelAnimationFrame(n)};function I(e,o){const r=g.useCallbackRef(e),n=s.useRef(0);return s.useEffect(()=>()=>window.clearTimeout(n.current),[]),s.useCallback(()=>{window.clearTimeout(n.current),n.current=window.setTimeout(r,o)},[r,o])}function C(e,o){const r=g.useCallbackRef(o);ie.useLayoutEffect(()=>{let n=0;if(e){const t=new ResizeObserver(()=>{cancelAnimationFrame(n),n=window.requestAnimationFrame(r)});return t.observe(e),()=>{window.cancelAnimationFrame(n),t.unobserve(e)}}},[e,r])}var Ee=V,Pe=U,Ce=q,Ae=F,Te=G;exports.Corner=Te;exports.Root=Ee;exports.ScrollArea=V;exports.ScrollAreaCorner=G;exports.ScrollAreaScrollbar=q;exports.ScrollAreaThumb=F;exports.ScrollAreaViewport=U;exports.Scrollbar=Ce;exports.Thumb=Ae;exports.Viewport=Pe;exports.createScrollAreaScope=fe;
//# sourceMappingURL=index.cjs559.js.map