dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
2 lines (1 loc) • 14.1 kB
JavaScript
"use strict";const h=require("./jsx-runtime-DUiatUiq.cjs"),ae=require("react"),T=require("./index-CMmIsz5H.cjs"),w=require("./index-Ch6ABCiC.cjs"),F=require("./index-DcWZbXs6.cjs"),j=require("./index-t1JFNXJ1.cjs"),E=require("./index-hwV4SK1V.cjs"),ue=require("./index-C3BrtnXJ.cjs"),de=require("./index-C8ni3LLa.cjs"),$=require("./utils-C1Nf1RtL.cjs");function fe(e){const t=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(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=fe(ae);function he(e,t){return s.useReducer((r,n)=>t[r][n]??r,e)}var X="ScrollArea",[G,ye]=F.createContextScope(X),[me,S]=G(X),J=s.forwardRef((e,t)=>{const{__scopeScrollArea:r,type:n="hover",dir:o,scrollHideDelay:l=600,...c}=e,[i,a]=s.useState(null),[f,u]=s.useState(null),[m,d]=s.useState(null),[p,x]=s.useState(null),[y,I]=s.useState(null),[g,_]=s.useState(0),[M,L]=s.useState(0),[D,A]=s.useState(!1),[H,N]=s.useState(!1),b=j.useComposedRefs(t,P=>a(P)),v=ue.useDirection(o);return h.jsxRuntimeExports.jsx(me,{scope:r,type:n,dir:v,scrollHideDelay:l,scrollArea:i,viewport:f,onViewportChange:u,content:m,onContentChange:d,scrollbarX:p,onScrollbarXChange:x,scrollbarXEnabled:D,onScrollbarXEnabledChange:A,scrollbarY:y,onScrollbarYChange:I,scrollbarYEnabled:H,onScrollbarYEnabledChange:N,onCornerWidthChange:_,onCornerHeightChange:L,children:h.jsxRuntimeExports.jsx(T.Primitive.div,{dir:v,...c,ref:b,style:{position:"relative","--radix-scroll-area-corner-width":g+"px","--radix-scroll-area-corner-height":M+"px",...e.style}})})});J.displayName=X;var K="ScrollAreaViewport",Q=s.forwardRef((e,t)=>{const{__scopeScrollArea:r,children:n,nonce:o,...l}=e,c=S(K,r),i=s.useRef(null),a=j.useComposedRefs(t,i,c.onViewportChange);return h.jsxRuntimeExports.jsxs(h.jsxRuntimeExports.Fragment,{children:[h.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:o}),h.jsxRuntimeExports.jsx(T.Primitive.div,{"data-radix-scroll-area-viewport":"",...l,ref:a,style:{overflowX:c.scrollbarXEnabled?"scroll":"hidden",overflowY:c.scrollbarYEnabled?"scroll":"hidden",...e.style},children:h.jsxRuntimeExports.jsx("div",{ref:c.onContentChange,style:{minWidth:"100%",display:"table"},children:n})})]})});Q.displayName=K;var R="ScrollAreaScrollbar",Y=s.forwardRef((e,t)=>{const{forceMount:r,...n}=e,o=S(R,e.__scopeScrollArea),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:c}=o,i=e.orientation==="horizontal";return s.useEffect(()=>(i?l(!0):c(!0),()=>{i?l(!1):c(!1)}),[i,l,c]),o.type==="hover"?h.jsxRuntimeExports.jsx(pe,{...n,ref:t,forceMount:r}):o.type==="scroll"?h.jsxRuntimeExports.jsx(be,{...n,ref:t,forceMount:r}):o.type==="auto"?h.jsxRuntimeExports.jsx(Z,{...n,ref:t,forceMount:r}):o.type==="always"?h.jsxRuntimeExports.jsx(U,{...n,ref:t}):null});Y.displayName=R;var pe=s.forwardRef((e,t)=>{const{forceMount:r,...n}=e,o=S(R,e.__scopeScrollArea),[l,c]=s.useState(!1);return s.useEffect(()=>{const i=o.scrollArea;let a=0;if(i){const f=()=>{window.clearTimeout(a),c(!0)},u=()=>{a=window.setTimeout(()=>c(!1),o.scrollHideDelay)};return i.addEventListener("pointerenter",f),i.addEventListener("pointerleave",u),()=>{window.clearTimeout(a),i.removeEventListener("pointerenter",f),i.removeEventListener("pointerleave",u)}}},[o.scrollArea,o.scrollHideDelay]),h.jsxRuntimeExports.jsx(w.Presence,{present:r||l,children:h.jsxRuntimeExports.jsx(Z,{"data-state":l?"visible":"hidden",...n,ref:t})})}),be=s.forwardRef((e,t)=>{const{forceMount:r,...n}=e,o=S(R,e.__scopeScrollArea),l=e.orientation==="horizontal",c=k(()=>a("SCROLL_END"),100),[i,a]=he("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"),o.scrollHideDelay);return()=>window.clearTimeout(f)}},[i,o.scrollHideDelay,a]),s.useEffect(()=>{const f=o.viewport,u=l?"scrollLeft":"scrollTop";if(f){let m=f[u];const d=()=>{const p=f[u];m!==p&&(a("SCROLL"),c()),m=p};return f.addEventListener("scroll",d),()=>f.removeEventListener("scroll",d)}},[o.viewport,l,a,c]),h.jsxRuntimeExports.jsx(w.Presence,{present:r||i!=="hidden",children:h.jsxRuntimeExports.jsx(U,{"data-state":i==="hidden"?"hidden":"visible",...n,ref:t,onPointerEnter:w.composeEventHandlers(e.onPointerEnter,()=>a("POINTER_ENTER")),onPointerLeave:w.composeEventHandlers(e.onPointerLeave,()=>a("POINTER_LEAVE"))})})}),Z=s.forwardRef((e,t)=>{const r=S(R,e.__scopeScrollArea),{forceMount:n,...o}=e,[l,c]=s.useState(!1),i=e.orientation==="horizontal",a=k(()=>{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),h.jsxRuntimeExports.jsx(w.Presence,{present:n||l,children:h.jsxRuntimeExports.jsx(U,{"data-state":l?"visible":"hidden",...o,ref:t})})}),U=s.forwardRef((e,t)=>{const{orientation:r="vertical",...n}=e,o=S(R,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=ne(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 m(d,p){return ge(d,c.current,i,p)}return r==="horizontal"?h.jsxRuntimeExports.jsx(xe,{...u,ref:t,onThumbPositionChange:()=>{if(o.viewport&&l.current){const d=o.viewport.scrollLeft,p=q(d,i,o.dir);l.current.style.transform=`translate3d(${p}px, 0, 0)`}},onWheelScroll:d=>{o.viewport&&(o.viewport.scrollLeft=d)},onDragScroll:d=>{o.viewport&&(o.viewport.scrollLeft=m(d,o.dir))}}):r==="vertical"?h.jsxRuntimeExports.jsx(Se,{...u,ref:t,onThumbPositionChange:()=>{if(o.viewport&&l.current){const d=o.viewport.scrollTop,p=q(d,i);l.current.style.transform=`translate3d(0, ${p}px, 0)`}},onWheelScroll:d=>{o.viewport&&(o.viewport.scrollTop=d)},onDragScroll:d=>{o.viewport&&(o.viewport.scrollTop=m(d))}}):null}),xe=s.forwardRef((e,t)=>{const{sizes:r,onSizesChange:n,...o}=e,l=S(R,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=j.useComposedRefs(t,a,l.onScrollbarXChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),h.jsxRuntimeExports.jsx(re,{"data-orientation":"horizontal",...o,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":z(r)+"px",...e.style},onThumbPointerDown:u=>e.onThumbPointerDown(u.x),onDragScroll:u=>e.onDragScroll(u.x),onWheelScroll:(u,m)=>{if(l.viewport){const d=l.viewport.scrollLeft+u.deltaX;e.onWheelScroll(d),se(d,m)&&u.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:a.current.clientWidth,paddingStart:W(c.paddingLeft),paddingEnd:W(c.paddingRight)}})}})}),Se=s.forwardRef((e,t)=>{const{sizes:r,onSizesChange:n,...o}=e,l=S(R,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=j.useComposedRefs(t,a,l.onScrollbarYChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),h.jsxRuntimeExports.jsx(re,{"data-orientation":"vertical",...o,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":z(r)+"px",...e.style},onThumbPointerDown:u=>e.onThumbPointerDown(u.y),onDragScroll:u=>e.onDragScroll(u.y),onWheelScroll:(u,m)=>{if(l.viewport){const d=l.viewport.scrollTop+u.deltaY;e.onWheelScroll(d),se(d,m)&&u.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:a.current.clientHeight,paddingStart:W(c.paddingTop),paddingEnd:W(c.paddingBottom)}})}})}),[ve,ee]=G(R),re=s.forwardRef((e,t)=>{const{__scopeScrollArea:r,sizes:n,hasThumb:o,onThumbChange:l,onThumbPointerUp:c,onThumbPointerDown:i,onThumbPositionChange:a,onDragScroll:f,onWheelScroll:u,onResize:m,...d}=e,p=S(R,r),[x,y]=s.useState(null),I=j.useComposedRefs(t,b=>y(b)),g=s.useRef(null),_=s.useRef(""),M=p.viewport,L=n.content-n.viewport,D=E.useCallbackRef(u),A=E.useCallbackRef(a),H=k(m,10);function N(b){if(g.current){const v=b.clientX-g.current.left,P=b.clientY-g.current.top;f({x:v,y:P})}}return s.useEffect(()=>{const b=v=>{const P=v.target;(x==null?void 0:x.contains(P))&&D(v,L)};return document.addEventListener("wheel",b,{passive:!1}),()=>document.removeEventListener("wheel",b,{passive:!1})},[M,x,L,D]),s.useEffect(A,[n,A]),C(x,H),C(p.content,H),h.jsxRuntimeExports.jsx(ve,{scope:r,scrollbar:x,hasThumb:o,onThumbChange:E.useCallbackRef(l),onThumbPointerUp:E.useCallbackRef(c),onThumbPositionChange:A,onThumbPointerDown:E.useCallbackRef(i),children:h.jsxRuntimeExports.jsx(T.Primitive.div,{...d,ref:I,style:{position:"absolute",...d.style},onPointerDown:w.composeEventHandlers(e.onPointerDown,b=>{b.button===0&&(b.target.setPointerCapture(b.pointerId),g.current=x.getBoundingClientRect(),_.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",p.viewport&&(p.viewport.style.scrollBehavior="auto"),N(b))}),onPointerMove:w.composeEventHandlers(e.onPointerMove,N),onPointerUp:w.composeEventHandlers(e.onPointerUp,b=>{const v=b.target;v.hasPointerCapture(b.pointerId)&&v.releasePointerCapture(b.pointerId),document.body.style.webkitUserSelect=_.current,p.viewport&&(p.viewport.style.scrollBehavior=""),g.current=null})})})}),O="ScrollAreaThumb",te=s.forwardRef((e,t)=>{const{forceMount:r,...n}=e,o=ee(O,e.__scopeScrollArea);return h.jsxRuntimeExports.jsx(w.Presence,{present:r||o.hasThumb,children:h.jsxRuntimeExports.jsx(we,{ref:t,...n})})}),we=s.forwardRef((e,t)=>{const{__scopeScrollArea:r,style:n,...o}=e,l=S(O,r),c=ee(O,r),{onThumbPositionChange:i}=c,a=j.useComposedRefs(t,m=>c.onThumbChange(m)),f=s.useRef(void 0),u=k(()=>{f.current&&(f.current(),f.current=void 0)},100);return s.useEffect(()=>{const m=l.viewport;if(m){const d=()=>{if(u(),!f.current){const p=Ee(m,i);f.current=p,i()}};return i(),m.addEventListener("scroll",d),()=>m.removeEventListener("scroll",d)}},[l.viewport,u,i]),h.jsxRuntimeExports.jsx(T.Primitive.div,{"data-state":c.hasThumb?"visible":"hidden",...o,ref:a,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...n},onPointerDownCapture:w.composeEventHandlers(e.onPointerDownCapture,m=>{const p=m.target.getBoundingClientRect(),x=m.clientX-p.left,y=m.clientY-p.top;c.onThumbPointerDown({x,y})}),onPointerUp:w.composeEventHandlers(e.onPointerUp,c.onThumbPointerUp)})});te.displayName=O;var B="ScrollAreaCorner",oe=s.forwardRef((e,t)=>{const r=S(B,e.__scopeScrollArea),n=!!(r.scrollbarX&&r.scrollbarY);return r.type!=="scroll"&&n?h.jsxRuntimeExports.jsx(Re,{...e,ref:t}):null});oe.displayName=B;var Re=s.forwardRef((e,t)=>{const{__scopeScrollArea:r,...n}=e,o=S(B,r),[l,c]=s.useState(0),[i,a]=s.useState(0),f=!!(l&&i);return C(o.scrollbarX,()=>{var m;const u=((m=o.scrollbarX)==null?void 0:m.offsetHeight)||0;o.onCornerHeightChange(u),a(u)}),C(o.scrollbarY,()=>{var m;const u=((m=o.scrollbarY)==null?void 0:m.offsetWidth)||0;o.onCornerWidthChange(u),c(u)}),f?h.jsxRuntimeExports.jsx(T.Primitive.div,{...n,ref:t,style:{width:l,height:i,position:"absolute",right:o.dir==="ltr"?0:void 0,left:o.dir==="rtl"?0:void 0,bottom:0,...e.style}}):null});function W(e){return e?parseInt(e,10):0}function ne(e,t){const r=e/t;return isNaN(r)?0:r}function z(e){const t=ne(e.viewport,e.content),r=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,n=(e.scrollbar.size-r)*t;return Math.max(n,18)}function ge(e,t,r,n="ltr"){const o=z(r),l=o/2,c=t||l,i=o-c,a=r.scrollbar.paddingStart+c,f=r.scrollbar.size-r.scrollbar.paddingEnd-i,u=r.content-r.viewport,m=n==="ltr"?[0,u]:[u*-1,0];return le([a,f],m)(e)}function q(e,t,r="ltr"){const n=z(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,l=t.scrollbar.size-o,c=t.content-t.viewport,i=l-n,a=r==="ltr"?[0,c]:[c*-1,0],f=de.clamp(e,a);return le([0,c],[0,i])(f)}function le(e,t){return r=>{if(e[0]===e[1]||t[0]===t[1])return t[0];const n=(t[1]-t[0])/(e[1]-e[0]);return t[0]+n*(r-e[0])}}function se(e,t){return e>0&&e<t}var Ee=(e,t=()=>{})=>{let r={left:e.scrollLeft,top:e.scrollTop},n=0;return function o(){const l={left:e.scrollLeft,top:e.scrollTop},c=r.left!==l.left,i=r.top!==l.top;(c||i)&&t(),r=l,n=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(n)};function k(e,t){const r=E.useCallbackRef(e),n=s.useRef(0);return s.useEffect(()=>()=>window.clearTimeout(n.current),[]),s.useCallback(()=>{window.clearTimeout(n.current),n.current=window.setTimeout(r,t)},[r,t])}function C(e,t){const r=E.useCallbackRef(t);F.useLayoutEffect2(()=>{let n=0;if(e){const o=new ResizeObserver(()=>{cancelAnimationFrame(n),n=window.requestAnimationFrame(r)});return o.observe(e),()=>{window.cancelAnimationFrame(n),o.unobserve(e)}}},[e,r])}var ce=J,Pe=Q,Ce=oe;const ie=s.forwardRef(({className:e,children:t,...r},n)=>h.jsxRuntimeExports.jsxs(ce,{ref:n,className:$.cn("relative overflow-auto",e),...r,children:[h.jsxRuntimeExports.jsx(Pe,{className:"h-full w-full rounded-[inherit]",children:t}),h.jsxRuntimeExports.jsx(V,{}),h.jsxRuntimeExports.jsx(Ce,{})]}));ie.displayName=ce.displayName;const V=s.forwardRef(({className:e,orientation:t="vertical",...r},n)=>h.jsxRuntimeExports.jsx(Y,{ref:n,orientation:t,className:$.cn("flex touch-none select-none transition-colors",t==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",t==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",e),...r,children:h.jsxRuntimeExports.jsx(te,{className:"relative flex-1 rounded-full bg-border"})}));V.displayName=Y.displayName;exports.ScrollArea=ie;exports.ScrollBar=V;