Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vaul

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vaul - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

4

dist/index.js
"use client"
"use client";var je=Object.create;var K=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var We=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var qe=(e,t)=>{for(var n in t)K(e,n,{get:t[n],enumerable:!0})},de=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ke(t))!ze.call(e,r)&&r!==n&&K(e,r,{get:()=>t[r],enumerable:!(o=Ue(t,r))||o.enumerable});return e};var j=(e,t,n)=>(n=e!=null?je(We(e)):{},de(t||!e||!e.__esModule?K(n,"default",{value:e,enumerable:!0}):n,e)),Ge=e=>de(K({},"__esModule",{value:!0}),e);var Tt={};qe(Tt,{Drawer:()=>ht});module.exports=Ge(Tt);var v=j(require("@radix-ui/react-dialog"));var P=j(require("react"));function fe(e){let t=P.default.useRef(e);return P.default.useEffect(()=>{t.current=e}),P.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function _e({defaultProp:e,onChange:t}){let n=P.default.useState(e),[o]=n,r=P.default.useRef(o),i=fe(t);return P.default.useEffect(()=>{r.current!==o&&(i(o),r.current=o)},[o,r,i]),n}function pe({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,r]=_e({defaultProp:t,onChange:n}),i=e!==void 0,a=i?e:o,w=fe(n),x=P.default.useCallback(C=>{if(i){let m=typeof C=="function"?C(e):C;m!==e&&w(m)}else r(C)},[i,e,r,w]);return[a,x]}var ee=j(require("react")),te=ee.default.createContext(void 0),X=()=>ee.default.useContext(te);var p=j(require("react"));function ne(e,{insertAt:t}={}){if(!e||typeof document=="undefined")return;let n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}ne(`[vaul-drawer]{will-change:transform;touch-action:none;animation:show-dialog .5s cubic-bezier(.32,.72,0,1)}[vaul-drawer]:after{content:"";position:absolute;top:100%;background:inherit;background-color:inherit;left:0;right:0;height:200%}[vaul-drawer][data-state=closed]{animation:hide-dialog .5s cubic-bezier(.32,.72,0,1) forwards}[vaul-overlay]{animation:show-overlay .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][data-state=closed]{animation:hide-overlay .5s cubic-bezier(.32,.72,0,1) forwards}@keyframes show-dialog{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes hide-dialog{0%{transform:translateY(var(--hide-from, 0))}to{transform:translateY(var(--hide-to, 100%))}}@keyframes show-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-overlay{0%{opacity:var(--opacity-from, 1)}to{opacity:0}}@media (hover: hover) and (pointer: fine){[vaul-drawer]{user-select:none}}
`);var Z=require("react"),Ke=typeof window!="undefined"?Z.useLayoutEffect:Z.useEffect;function ie(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Xe(){return ae(/^Mac/)}function Je(){return ae(/^iPhone/)}function he(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function Qe(){return ae(/^iPad/)||Xe()&&navigator.maxTouchPoints>1}function W(){return Je()||Qe()}function ae(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var oe=typeof document!="undefined"&&window.visualViewport;function ge(e){let t=window.getComputedStyle(e);return/(auto|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function Te(e){for(ge(e)&&(e=e.parentElement);e&&!ge(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}var Ze=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),J=0,re;function ve(e={}){let{isDisabled:t}=e;Ke(()=>{if(!t)return J++,J===1&&(W()?re=tt():re=et()),()=>{J--,J===0&&re()}},[t])}function et(){return ie(k(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),k(document.documentElement,"overflow","hidden"))}function tt(){let e,t=0,n=m=>{e=Te(m.target),!(e===document.documentElement&&e===document.body)&&(t=m.changedTouches[0].pageY)},o=m=>{if(!e||e===document.documentElement||e===document.body){m.preventDefault();return}let d=m.changedTouches[0].pageY,T=e.scrollTop,M=e.scrollHeight-e.clientHeight;M!==0&&((T<=0&&d>t||T>=M&&d<t)&&m.preventDefault(),t=d)},r=m=>{let d=m.target;Q(d)&&d!==document.activeElement&&(m.preventDefault(),d.style.transform="translateY(-2000px)",d.focus(),requestAnimationFrame(()=>{d.style.transform=""}))},i=m=>{let d=m.target;Q(d)&&(d.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{d.style.transform="",oe&&(oe.height<window.innerHeight?requestAnimationFrame(()=>{be(d)}):oe.addEventListener("resize",()=>be(d),{once:!0}))}))},a=()=>{window.scrollTo(0,0)},w=window.pageXOffset,x=window.pageYOffset,C=ie(k(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),k(document.documentElement,"overflow","hidden"),k(document.body,"marginTop",`-${x}px`));window.scrollTo(0,0);let E=ie(U(document,"touchstart",n,{passive:!1,capture:!0}),U(document,"touchmove",o,{passive:!1,capture:!0}),U(document,"touchend",r,{passive:!1,capture:!0}),U(document,"focus",i,!0),U(window,"scroll",a));return()=>{C(),E(),window.scrollTo(w,x)}}function k(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function U(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function be(e){let t=document.scrollingElement||document.documentElement;for(;e&&e!==t;){let n=Te(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,r=e.getBoundingClientRect().top,i=n.getBoundingClientRect().bottom;r>i&&(n.scrollTop+=r-o)}e=n.parentElement}}function Q(e){return e instanceof HTMLInputElement&&!Ze.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}var we=j(require("react"));function nt(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function ot(...e){return t=>e.forEach(n=>nt(n,t))}function se(...e){return we.useCallback(ot(...e),e)}var N=j(require("react"));function rt(e){let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*(\d*(?:\.\d+)?)\)/);if(!t)throw new Error("Invalid color string");return[Number(t[1]),Number(t[2]),Number(t[3]),Number(t[4])]}function it(e,t){let[n,o,r,i]=rt(e);return[Math.round(i*n+(1-i)*Number(t[0])),Math.round(i*o+(1-i)*Number(t[1])),Math.round(i*r+(1-i)*Number(t[2]))]}function at(e){return e===1?1:1-Math.pow(2,-10*e)}function st(e,t,n,o){arguments.length<3&&(n=.5);let r=e.slice();for(let i=0;i<3;i++){let a=t[i]-e[i],w=o?e[i]+n*a:e[i]+at(n)*a;r[i]=Math.round(w),r[i]<0&&(r[i]=0),r[i]>255&&(r[i]=255)}return r}function z(e,t,n,o){let r=1/(n-1),i=[];for(let a=0;a<n;a++)i.push(st(e,t,r*a,o));return i}function ye(e,t,n,o){let[r,i]=N.default.useState(null),[a,w]=N.default.useState(null),[x,C]=N.default.useState(!1),[E,m]=N.default.useState(null),d=N.default.useMemo(()=>W()&&he()&&o,[o]),T=N.default.useMemo(()=>r&&a?z(r,a,50):null,[a,r]),M=N.default.useMemo(()=>r&&a?z(a,r,50):null,[a,r]),I=N.default.useMemo(()=>r&&a?z(a,r,50,!0):null,[a,r]);N.default.useEffect(()=>{d&&requestAnimationFrame(()=>{if(t.current){let h=getComputedStyle(t.current).getPropertyValue("background-color"),y=getComputedStyle(document.documentElement).getPropertyValue("--vaul-theme-color").split(",").map(H=>Number(H)),f=it(h,y);i(y),w(f)}})},[n,d,t]),N.default.useEffect(()=>{if(d){if(t.current&&T&&M&&!x){let h=document.querySelector('meta[name="theme-color"]');if(e.current.style.transform==="translateY(0px)"&&e.current.getAttribute("vaul-clicked-outside")!=="true")return;h?E||m(h.getAttribute("content")):(h=document.createElement("meta"),h.name="theme-color",document.getElementsByTagName("head")[0].appendChild(h));let y=n?10.5:8;for(let f=0;f<T.length;f++)setTimeout(()=>{let H=n?T[f]:M[f];h.setAttribute("content",`rgb(${H.join(",")})`),f===T.length-1&&E&&!n&&h.setAttribute("content",E)},f*y)}n&&C(!1)}},[n,T,M,x,e,t,d]);function B(h){let y=document.querySelector('meta[name="theme-color"]');if(!d||!y)return;let f=Math.floor(h*I.length);f=Math.max(0,Math.min(I.length-1,f));let H=I[f];y.setAttribute("content",`rgb(${H.join(",")})`)}function b(h){let y=document.querySelector('meta[name="theme-color"]');if(!y||!d)return;C(!0);let f=y.getAttribute("content").match(/\d+/g).map(Number),H=z(f,a,50);h||(H=z(f,r,50));for(let O=0;O<T.length;O++)setTimeout(()=>{let F=H[O];y.setAttribute("content",`rgb(${F.join(",")})`),O===T.length-1&&E&&!h&&y.setAttribute("content",E)},O*10.5)}return{onDrag:B,onRelease:b}}var Ee=require("react");var $=null;function lt(){if($===null){$={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};let{scrollY:e,scrollX:t,innerHeight:n}=window;document.body.style.setProperty("position","fixed","important"),document.body.style.top=`${-e}px`,document.body.style.left=`${-t}px`,document.body.style.right="0px",setTimeout(()=>requestAnimationFrame(()=>{let o=n-window.innerHeight;o&&e>=n&&(document.body.style.top=`${-(e+o)}px`)}),300)}}function ut(){if($!==null){let e=-parseInt(document.body.style.top,10),t=-parseInt(document.body.style.left,10);document.body.style.position=$.position,document.body.style.top=$.top,document.body.style.left=$.left,document.body.style.right="unset",requestAnimationFrame(()=>{window.scrollTo(t,e)}),$=null}}function Re(e){(0,Ee.useEffect)(()=>{e&&W()?lt():ut()},[e])}var ct=.25,mt=500,S={DURATION:.5,EASE:[.32,.72,0,1]},dt=501,De=8,ft=.4,Y=16,pt=26,Se=new WeakMap;function gt(e){let t=e.getBoundingClientRect();return window.visualViewport?t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width:!1}function g(e,t,n=!1){if(!e||!(e instanceof HTMLElement)||!t)return;let o={};Object.entries(t).forEach(([r,i])=>{if(r.startsWith("--")){e.style.setProperty(r,i);return}o[r]=e.style[r],e.style[r]=i}),!n&&Se.set(e,o)}function le(e,t){if(!e||!(e instanceof HTMLElement))return;let n=Se.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,r])=>{e.style[o]=r})}function q(e){let t=window.getComputedStyle(e),n=t.transform||t.webkitTransform||t.mozTransform,o=n.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=n.match(/^matrix\((.+)\)$/),o?parseFloat(o[1].split(", ")[5]):null)}function Ce({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:r,onDrag:i,onRelease:a,experimentalSafariThemeAnimation:w,closeThreshold:x=ct,scrollLockTimeout:C=mt,dismissible:E=!0}){let[m=!1,d]=pe({prop:e,defaultProp:t,onChange:n}),[T,M]=p.default.useState(!1),[I,B]=p.default.useState(!0),b=p.default.useRef(null),h=p.default.useRef(null),y=p.default.useRef(null),f=p.default.useRef(null),H=p.default.useRef(null),O=p.default.useRef(0),F=p.default.useRef(!1),u=p.default.useRef(null),{onDrag:He,onRelease:G}=ye(u,b,m,w);ve({isDisabled:!m||T||I}),Re(m);function _(){return(window.innerWidth-pt)/window.innerWidth}function Le(s){E&&(u.current&&!u.current.contains(s.target)||s.target.tagName==="BUTTON"||(M(!0),h.current=new Date,s.target.setPointerCapture(s.pointerId),O.current=s.clientY))}function ue(s,l){let c=s,R=new Date,D=window.getSelection().toString(),A=u.current?q(u.current):null;if(D.length>0)return!1;if(f.current&&R.getTime()-f.current.getTime()<C&&A===0)return f.current=new Date,!1;for(;c;){if(c.scrollHeight>c.clientHeight){if(c.role==="dialog"||c.getAttribute("vaul-drawer"))return!0;if(c.scrollTop>0)return f.current=new Date,!1;if(l&&c!==document.body&&!A)return f.current=new Date,!1}c=c.parentNode}return!0}function Ne(s){var l;if(T){let c=O.current-s.clientY,R=c>0;if(!ue(s.target,R))return;let D=((l=u.current)==null?void 0:l.getBoundingClientRect().height)||0;if(g(u.current,{transition:"none"}),g(b.current,{transition:"none"}),c>0){g(u.current,{transform:`translateY(${Math.max(c*-1,-40)}px)`});return}let A=Math.abs(c),V=document.querySelector("[vaul-drawer-wrapper]"),L=A/D,Ye=1-L;if(He(L),i==null||i(s,L),g(b.current,{opacity:`${Ye}`},!0),V&&b.current&&r){let Be=Math.min(_()+L*(1-_()),1),Fe=8-L*8,Ve=Math.max(0,14-L*14);g(V,{borderRadius:`${Fe}px`,transform:`scale(${Be}) translateY(${Ve}px)`,transition:"none"},!0)}g(u.current,{transform:`translateY(${A}px)`})}}p.default.useEffect(()=>{function s(){var c,R;if(!u.current)return;let l=document.activeElement;if(!gt(l)&&Q(l)||F.current){let D=window.visualViewport.height,A=window.innerHeight-D,V=((c=u.current)==null?void 0:c.getBoundingClientRect().height)||0,L=(R=u.current)==null?void 0:R.getBoundingClientRect().top;F.current=!F.current,V>D?u.current.style.height=`${D-L}px`:u.current.style.height="initial",u.current.style.bottom=`${Math.max(A,0)}px`}}return window.visualViewport.addEventListener("resize",s),()=>window.visualViewport.removeEventListener("resize",s)},[]);function ce(){var l,c;if(!E)return;d(!1);let s=((l=u.current)==null?void 0:l.getBoundingClientRect().height)||0;if(u.current){let R=q(u.current);g(u.current,{"--hide-from":`${Number(R).toFixed()}px`,"--hide-to":`${s.toFixed()}px`});let D=((c=b.current)==null?void 0:c.style.opacity)||1;g(b.current,{"--opacity-from":`${D}`})}}p.default.useEffect(()=>{if(!m&&r){let s=setTimeout(()=>{le(document.body)},200);return()=>clearTimeout(s)}},[m,r]);function me(){let s=document.querySelector("[vaul-drawer-wrapper]"),l=q(u.current);g(u.current,{transform:"translateY(0px)",transition:`transform ${S.DURATION}s cubic-bezier(${S.EASE.join(",")})`}),g(b.current,{transition:`opacity ${S.DURATION}s cubic-bezier(${S.EASE.join(",")})`,opacity:"1"}),r&&l>0&&m&&g(s,{borderRadius:`${De}px`,overflow:"hidden",transform:`scale(${_()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${S.DURATION}s`,transitionTimingFunction:`cubic-bezier(${S.EASE.join(",")})`},!0)}function Oe(s){var L;if(s.target.tagName==="BUTTON"||!T)return;M(!1),y.current=new Date;let l=q(u.current);if(!ue(s.target,!1)||!l||Number.isNaN(l)||h.current===null)return;let c=s.clientY,R=y.current.getTime()-h.current.getTime(),D=O.current-c,A=Math.abs(D)/R;if(D>0){me(),a==null||a(s,!0),G(!0);return}if(A>ft){ce(),a==null||a(s,!1),G(!1);return}let V=Math.min(((L=u.current)==null?void 0:L.getBoundingClientRect().height)||0,window.innerHeight);if(l>=V*x){ce(),a==null||a(s,!1),G(!1);return}a==null||a(s,!0),G(!0),me()}function Ae(s){let l=document.querySelector("[vaul-drawer-wrapper]");!l||!r||(s.animationName==="show-dialog"?(g(document.body,{background:"black"},!0),g(l,{borderRadius:`${De}px`,overflow:"hidden",transform:`scale(${_()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${S.DURATION}s`,transitionTimingFunction:`cubic-bezier(${S.EASE.join(",")})`})):s.animationName==="hide-dialog"&&(le(l,"transform"),le(l,"borderRadius"),g(l,{transitionProperty:"transform, border-radius",transitionDuration:`${S.DURATION}s`,transitionTimingFunction:`cubic-bezier(${S.EASE.join(",")})`})))}function Pe(s){let l=s?(window.innerWidth-Y)/window.innerWidth:1,c=s?-Y:0;window.clearTimeout(H.current),g(u.current,{transition:`transform ${S.DURATION}s cubic-bezier(${S.EASE.join(",")})`,transform:`scale(${l}) translateY(${c}px)`}),s||(H.current=setTimeout(()=>{g(u.current,{transition:"none",transform:`translateY(${q(u.current)}px)`})},500))}function Ie(s,l){if(l<0)return;let c=(window.innerWidth-Y)/window.innerWidth,R=c+l*(1-c),D=-Y+l*Y;g(u.current,{transform:`scale(${R}) translateY(${D}px)`,transition:"none"})}function $e(s,l){let c=l?(window.innerWidth-Y)/window.innerWidth:1,R=l?-Y:0;l&&g(u.current,{transition:`transform ${S.DURATION}s cubic-bezier(${S.EASE.join(",")})`,transform:`scale(${c}) translateY(${R}px)`})}return p.default.createElement(v.Root,{open:m,onOpenChange:s=>{d(s)}},p.default.createElement(te.Provider,{value:{drawerRef:u,overlayRef:b,onAnimationStart:Ae,onPress:Le,onRelease:Oe,onDrag:Ne,dismissible:E,isOpen:m,onNestedDrag:Ie,onNestedOpenChange:Pe,onNestedRelease:$e,keyboardIsOpen:F,setIsAnimating:B}},o))}var Me=p.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:r}=X(),i=se(n,o);return p.default.createElement(v.Overlay,{onMouseUp:r,ref:i,"vaul-overlay":"",...t})});Me.displayName="Drawer.Overlay";var xe=p.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...r},i){let{drawerRef:a,onPress:w,onRelease:x,onAnimationStart:C,onDrag:E,dismissible:m,isOpen:d,keyboardIsOpen:T,setIsAnimating:M}=X(),I=se(i,a),B=p.default.useRef(null);return p.default.createElement(v.Content,{onAnimationStart:b=>{window.clearTimeout(B.current),M(!0),B.current=setTimeout(()=>{M(!1),o==null||o(d)},dt),C(b)},onPointerDown:w,onPointerUp:x,onPointerMove:E,onOpenAutoFocus:b=>{t?t(b):b.preventDefault()},onPointerDownOutside:b=>{T.current&&(T.current=!1,g(a.current,{"--hide-to":"200%"})),m||b.preventDefault(),a.current.setAttribute("vaul-clicked-outside","true"),n==null||n(b)},ref:I,...r,"vaul-drawer":""},e)});xe.displayName="Drawer.Content";function bt({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:r,onNestedRelease:i}=X();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return p.default.createElement(Ce,{onDrag:(a,w)=>{o(a,w),t==null||t(a,w)},onOpenChange:a=>{r(a),n==null||n(a)},onRelease:i},e)}var ht=Object.assign({},{Root:Ce,NestedRoot:bt,Content:xe,Overlay:Me,Trigger:v.Trigger,Portal:v.Portal,Close:v.Close,Title:v.Title,Description:v.Description});0&&(module.exports={Drawer});
"use client";var Ve=Object.create;var _=Object.defineProperty;var je=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var We=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var qe=(e,t)=>{for(var n in t)_(e,n,{get:t[n],enumerable:!0})},de=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Ue(t))!ze.call(e,r)&&r!==n&&_(e,r,{get:()=>t[r],enumerable:!(o=je(t,r))||o.enumerable});return e};var V=(e,t,n)=>(n=e!=null?Ve(We(e)):{},de(t||!e||!e.__esModule?_(n,"default",{value:e,enumerable:!0}):n,e)),Ge=e=>de(_({},"__esModule",{value:!0}),e);var Tt={};qe(Tt,{Drawer:()=>ht});module.exports=Ge(Tt);var w=V(require("@radix-ui/react-dialog"));var P=V(require("react"));function fe(e){let t=P.default.useRef(e);return P.default.useEffect(()=>{t.current=e}),P.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function _e({defaultProp:e,onChange:t}){let n=P.default.useState(e),[o]=n,r=P.default.useRef(o),i=fe(t);return P.default.useEffect(()=>{r.current!==o&&(i(o),r.current=o)},[o,r,i]),n}function pe({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,r]=_e({defaultProp:t,onChange:n}),i=e!==void 0,a=i?e:o,y=fe(n),x=P.default.useCallback(D=>{if(i){let c=typeof D=="function"?D(e):D;c!==e&&y(c)}else r(D)},[i,e,r,y]);return[a,x]}var ee=V(require("react")),te=ee.default.createContext(void 0),K=()=>ee.default.useContext(te);var p=V(require("react"));function ne(e,{insertAt:t}={}){if(!e||typeof document=="undefined")return;let n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}ne(`[vaul-drawer]{will-change:transform;touch-action:none;animation:show-dialog .5s cubic-bezier(.32,.72,0,1)}[vaul-drawer]:after{content:"";position:absolute;top:100%;background:inherit;background-color:inherit;left:0;right:0;height:200%}[vaul-drawer][data-state=closed]{animation:hide-dialog .5s cubic-bezier(.32,.72,0,1) forwards}[vaul-drawer][vaul-closed-by-dragging=true]{animation:fake-animation .5s cubic-bezier(.32,.72,0,1) forwards}[vaul-overlay]{animation:show-overlay .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][data-state=closed]{animation:hide-overlay .5s cubic-bezier(.32,.72,0,1) forwards}@keyframes fake-animation{0%{opacity:1}to{opacity:1}}@keyframes show-dialog{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes hide-dialog{0%{transform:translateY(var(--hide-from, 0))}to{transform:translateY(var(--hide-to, 100%))}}@keyframes show-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-overlay{0%{opacity:var(--opacity-from, 1)}to{opacity:0}}@media (hover: hover) and (pointer: fine){[vaul-drawer]{user-select:none}}
`);var Q=require("react"),Ke=typeof window!="undefined"?Q.useLayoutEffect:Q.useEffect;function ie(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Xe(){return ae(/^Mac/)}function Je(){return ae(/^iPhone/)}function he(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function Qe(){return ae(/^iPad/)||Xe()&&navigator.maxTouchPoints>1}function W(){return Je()||Qe()}function ae(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var oe=typeof document!="undefined"&&window.visualViewport;function ge(e){let t=window.getComputedStyle(e);return/(auto|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function Te(e){for(ge(e)&&(e=e.parentElement);e&&!ge(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}var Ze=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),X=0,re;function ve(e={}){let{isDisabled:t}=e;Ke(()=>{if(!t)return X++,X===1&&(W()?re=tt():re=et()),()=>{X--,X===0&&re()}},[t])}function et(){return ie(U(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),U(document.documentElement,"overflow","hidden"))}function tt(){let e,t=0,n=c=>{e=Te(c.target),!(e===document.documentElement&&e===document.body)&&(t=c.changedTouches[0].pageY)},o=c=>{if(!e||e===document.documentElement||e===document.body){c.preventDefault();return}let m=c.changedTouches[0].pageY,T=e.scrollTop,S=e.scrollHeight-e.clientHeight;S!==0&&((T<=0&&m>t||T>=S&&m<t)&&c.preventDefault(),t=m)},r=c=>{let m=c.target;J(m)&&m!==document.activeElement&&(c.preventDefault(),m.style.transform="translateY(-2000px)",m.focus(),requestAnimationFrame(()=>{m.style.transform=""}))},i=c=>{let m=c.target;J(m)&&(m.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{m.style.transform="",oe&&(oe.height<window.innerHeight?requestAnimationFrame(()=>{be(m)}):oe.addEventListener("resize",()=>be(m),{once:!0}))}))},a=()=>{window.scrollTo(0,0)},y=window.pageXOffset,x=window.pageYOffset,D=ie(U(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),U(document.documentElement,"overflow","hidden"),U(document.body,"marginTop",`-${x}px`));window.scrollTo(0,0);let R=ie(j(document,"touchstart",n,{passive:!1,capture:!0}),j(document,"touchmove",o,{passive:!1,capture:!0}),j(document,"touchend",r,{passive:!1,capture:!0}),j(document,"focus",i,!0),j(window,"scroll",a));return()=>{D(),R(),window.scrollTo(y,x)}}function U(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function j(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function be(e){let t=document.scrollingElement||document.documentElement;for(;e&&e!==t;){let n=Te(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,r=e.getBoundingClientRect().top,i=n.getBoundingClientRect().bottom;r>i&&(n.scrollTop+=r-o)}e=n.parentElement}}function J(e){return e instanceof HTMLInputElement&&!Ze.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}var we=V(require("react"));function nt(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function ot(...e){return t=>e.forEach(n=>nt(n,t))}function se(...e){return we.useCallback(ot(...e),e)}var N=V(require("react"));function rt(e){let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*(\d*(?:\.\d+)?)\)/);if(!t)throw new Error("Invalid color string");return[Number(t[1]),Number(t[2]),Number(t[3]),Number(t[4])]}function it(e,t){let[n,o,r,i]=rt(e);return[Math.round(i*n+(1-i)*Number(t[0])),Math.round(i*o+(1-i)*Number(t[1])),Math.round(i*r+(1-i)*Number(t[2]))]}function at(e){return e===1?1:1-Math.pow(2,-10*e)}function st(e,t,n,o){arguments.length<3&&(n=.5);let r=e.slice();for(let i=0;i<3;i++){let a=t[i]-e[i],y=o?e[i]+n*a:e[i]+at(n)*a;r[i]=Math.round(y),r[i]<0&&(r[i]=0),r[i]>255&&(r[i]=255)}return r}function z(e,t,n,o){let r=1/(n-1),i=[];for(let a=0;a<n;a++)i.push(st(e,t,r*a,o));return i}function ye(e,t,n,o){let[r,i]=N.default.useState(null),[a,y]=N.default.useState(null),[x,D]=N.default.useState(!1),[R,c]=N.default.useState(null),m=N.default.useMemo(()=>W()&&he()&&o,[o]),T=N.default.useMemo(()=>r&&a?z(r,a,50):null,[a,r]),S=N.default.useMemo(()=>r&&a?z(a,r,50):null,[a,r]),I=N.default.useMemo(()=>r&&a?z(a,r,50,!0):null,[a,r]);N.default.useEffect(()=>{m&&requestAnimationFrame(()=>{if(t.current){let h=getComputedStyle(t.current).getPropertyValue("background-color"),E=getComputedStyle(document.documentElement).getPropertyValue("--vaul-theme-color").split(",").map(H=>Number(H)),f=it(h,E);i(E),y(f)}})},[n,m,t]),N.default.useEffect(()=>{if(m){if(t.current&&T&&S&&!x){let h=document.querySelector('meta[name="theme-color"]');if(e.current.style.transform==="translateY(0px)"&&e.current.getAttribute("vaul-clicked-outside")!=="true")return;h?R||c(h.getAttribute("content")):(h=document.createElement("meta"),h.name="theme-color",document.getElementsByTagName("head")[0].appendChild(h));let E=n?10.5:8;for(let f=0;f<T.length;f++)setTimeout(()=>{let H=n?T[f]:S[f];h.setAttribute("content",`rgb(${H.join(",")})`),f===T.length-1&&R&&!n&&h.setAttribute("content",R)},f*E)}n&&D(!1)}},[n,T,S,x,e,t,m]);function B(h){let E=document.querySelector('meta[name="theme-color"]');if(!m||!E)return;let f=Math.floor(h*I.length);f=Math.max(0,Math.min(I.length-1,f));let H=I[f];E.setAttribute("content",`rgb(${H.join(",")})`)}function b(h){let E=document.querySelector('meta[name="theme-color"]');if(!E||!m)return;D(!0);let f=E.getAttribute("content").match(/\d+/g).map(Number),H=z(f,a,50);h||(H=z(f,r,50));for(let A=0;A<T.length;A++)setTimeout(()=>{let k=H[A];E.setAttribute("content",`rgb(${k.join(",")})`),A===T.length-1&&R&&!h&&E.setAttribute("content",R)},A*10.5)}return{onDrag:B,onRelease:b}}var Ee=require("react");var $=null;function lt(){if($===null){$={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};let{scrollY:e,scrollX:t,innerHeight:n}=window;document.body.style.setProperty("position","fixed","important"),document.body.style.top=`${-e}px`,document.body.style.left=`${-t}px`,document.body.style.right="0px",setTimeout(()=>requestAnimationFrame(()=>{let o=n-window.innerHeight;o&&e>=n&&(document.body.style.top=`${-(e+o)}px`)}),300)}}function ut(){if($!==null){let e=-parseInt(document.body.style.top,10),t=-parseInt(document.body.style.left,10);document.body.style.position=$.position,document.body.style.top=$.top,document.body.style.left=$.left,document.body.style.right="unset",requestAnimationFrame(()=>{window.scrollTo(t,e)}),$=null}}function Re(e){(0,Ee.useEffect)(()=>{e&&W()?lt():ut()},[e])}var ct=.25,mt=500,v={DURATION:.5,EASE:[.32,.72,0,1]},dt=501,De=8,ft=.4,Y=16,pt=26,Se=new WeakMap;function gt(e){let t=e.getBoundingClientRect();return window.visualViewport?t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width:!1}function g(e,t,n=!1){if(!e||!(e instanceof HTMLElement)||!t)return;let o={};Object.entries(t).forEach(([r,i])=>{if(r.startsWith("--")){e.style.setProperty(r,i);return}o[r]=e.style[r],e.style[r]=i}),!n&&Se.set(e,o)}function le(e,t){if(!e||!(e instanceof HTMLElement))return;let n=Se.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,r])=>{e.style[o]=r})}function Z(e){let t=window.getComputedStyle(e),n=t.transform||t.webkitTransform||t.mozTransform,o=n.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=n.match(/^matrix\((.+)\)$/),o?parseFloat(o[1].split(", ")[5]):null)}function Ce({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:r,onDrag:i,onRelease:a,experimentalSafariThemeAnimation:y,closeThreshold:x=ct,scrollLockTimeout:D=mt,dismissible:R=!0}){let[c=!1,m]=pe({prop:e,defaultProp:t,onChange:n}),[T,S]=p.default.useState(!1),[I,B]=p.default.useState(!0),b=p.default.useRef(null),h=p.default.useRef(null),E=p.default.useRef(null),f=p.default.useRef(null),H=p.default.useRef(null),A=p.default.useRef(0),k=p.default.useRef(!1),u=p.default.useRef(null),{onDrag:He,onRelease:q}=ye(u,b,c,y);ve({isDisabled:!c||T||I}),Re(c);function G(){return(window.innerWidth-pt)/window.innerWidth}function Le(s){R&&(u.current&&!u.current.contains(s.target)||s.target.tagName==="BUTTON"||(S(!0),h.current=new Date,s.target.setPointerCapture(s.pointerId),A.current=s.clientY))}function ue(s,l){let d=s,C=new Date,M=window.getSelection().toString(),O=u.current?Z(u.current):null;if(M.length>0)return!1;if(f.current&&C.getTime()-f.current.getTime()<D&&O===0)return f.current=new Date,!1;for(;d;){if(d.scrollHeight>d.clientHeight){if(d.role==="dialog"||d.getAttribute("vaul-drawer"))return!0;if(d.scrollTop>0)return f.current=new Date,!1;if(l&&d!==document.body&&!O)return f.current=new Date,!1}d=d.parentNode}return!0}function Ne(s){var l;if(T){let d=A.current-s.clientY,C=d>0;if(!ue(s.target,C))return;let M=((l=u.current)==null?void 0:l.getBoundingClientRect().height)||0;if(g(u.current,{transition:"none"}),g(b.current,{transition:"none"}),d>0){g(u.current,{transform:`translateY(${Math.max(d*-1,-40)}px)`});return}let O=Math.abs(d),F=document.querySelector("[vaul-drawer-wrapper]"),L=O/M,Ye=1-L;if(He(L),i==null||i(s,L),g(b.current,{opacity:`${Ye}`},!0),F&&b.current&&r){let Be=Math.min(G()+L*(1-G()),1),ke=8-L*8,Fe=Math.max(0,14-L*14);g(F,{borderRadius:`${ke}px`,transform:`scale(${Be}) translateY(${Fe}px)`,transition:"none"},!0)}g(u.current,{transform:`translateY(${O}px)`})}}p.default.useEffect(()=>{function s(){var d,C;if(!u.current)return;let l=document.activeElement;if(!gt(l)&&J(l)||k.current){let M=window.visualViewport.height,O=window.innerHeight-M,F=((d=u.current)==null?void 0:d.getBoundingClientRect().height)||0,L=(C=u.current)==null?void 0:C.getBoundingClientRect().top;k.current=!k.current,F>M?u.current.style.height=`${M-L}px`:u.current.style.height="initial",u.current.style.bottom=`${Math.max(O,0)}px`}}return window.visualViewport.addEventListener("resize",s),()=>window.visualViewport.removeEventListener("resize",s)},[]);function ce(){var s;if(R&&(u.current.setAttribute("vaul-closed-by-dragging","true"),m(!1),u.current)){g(u.current,{transform:"translateY(100%)",transition:`transform ${v.DURATION}s cubic-bezier(${v.EASE.join(",")})`});let l=((s=b.current)==null?void 0:s.style.opacity)||1;g(b.current,{"--opacity-from":`${l}`})}}p.default.useEffect(()=>{if(!c&&r){let s=setTimeout(()=>{le(document.body)},200);return()=>clearTimeout(s)}},[c,r]);function me(){let s=document.querySelector("[vaul-drawer-wrapper]"),l=Z(u.current);g(u.current,{transform:"translateY(0px)",transition:`transform ${v.DURATION}s cubic-bezier(${v.EASE.join(",")})`}),g(b.current,{transition:`opacity ${v.DURATION}s cubic-bezier(${v.EASE.join(",")})`,opacity:"1"}),r&&l>0&&c&&g(s,{borderRadius:`${De}px`,overflow:"hidden",transform:`scale(${G()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${v.DURATION}s`,transitionTimingFunction:`cubic-bezier(${v.EASE.join(",")})`},!0)}function Ae(s){var L;if(s.target.tagName==="BUTTON"||!T)return;S(!1),E.current=new Date;let l=Z(u.current);if(!ue(s.target,!1)||!l||Number.isNaN(l)||h.current===null)return;let d=s.clientY,C=E.current.getTime()-h.current.getTime(),M=A.current-d,O=Math.abs(M)/C;if(M>0){me(),a==null||a(s,!0),q(!0);return}if(O>ft){ce(),a==null||a(s,!1),q(!1);return}let F=Math.min(((L=u.current)==null?void 0:L.getBoundingClientRect().height)||0,window.innerHeight);if(l>=F*x){ce(),a==null||a(s,!1),q(!1);return}a==null||a(s,!0),q(!0),me()}function Oe(s){let l=document.querySelector("[vaul-drawer-wrapper]");!l||!r||(s.animationName==="show-dialog"?(g(document.body,{background:"black"},!0),g(l,{borderRadius:`${De}px`,overflow:"hidden",transform:`scale(${G()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${v.DURATION}s`,transitionTimingFunction:`cubic-bezier(${v.EASE.join(",")})`})):(s.animationName==="hide-dialog"||s.animationName==="fake-animation")&&(le(l,"transform"),le(l,"borderRadius"),g(l,{transitionProperty:"transform, border-radius",transitionDuration:`${v.DURATION}s`,transitionTimingFunction:`cubic-bezier(${v.EASE.join(",")})`})))}function Pe(s){let l=s?(window.innerWidth-Y)/window.innerWidth:1,d=s?-Y:0;window.clearTimeout(H.current),g(u.current,{transition:`transform ${v.DURATION}s cubic-bezier(${v.EASE.join(",")})`,transform:`scale(${l}) translateY(${d}px)`}),s||(H.current=setTimeout(()=>{g(u.current,{transition:"none",transform:`translateY(${Z(u.current)}px)`})},500))}function Ie(s,l){if(l<0)return;let d=(window.innerWidth-Y)/window.innerWidth,C=d+l*(1-d),M=-Y+l*Y;g(u.current,{transform:`scale(${C}) translateY(${M}px)`,transition:"none"})}function $e(s,l){let d=l?(window.innerWidth-Y)/window.innerWidth:1,C=l?-Y:0;l&&g(u.current,{transition:`transform ${v.DURATION}s cubic-bezier(${v.EASE.join(",")})`,transform:`scale(${d}) translateY(${C}px)`})}return p.default.createElement(w.Root,{open:c,onOpenChange:s=>{m(s)}},p.default.createElement(te.Provider,{value:{drawerRef:u,overlayRef:b,onAnimationStart:Oe,onPress:Le,onRelease:Ae,onDrag:Ne,dismissible:R,isOpen:c,onNestedDrag:Ie,onNestedOpenChange:Pe,onNestedRelease:$e,keyboardIsOpen:k,setIsAnimating:B}},o))}var Me=p.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:r}=K(),i=se(n,o);return p.default.createElement(w.Overlay,{onMouseUp:r,ref:i,"vaul-overlay":"",...t})});Me.displayName="Drawer.Overlay";var xe=p.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...r},i){let{drawerRef:a,onPress:y,onRelease:x,onAnimationStart:D,onDrag:R,dismissible:c,isOpen:m,keyboardIsOpen:T,setIsAnimating:S}=K(),I=se(i,a),B=p.default.useRef(null);return p.default.createElement(w.Content,{onAnimationStart:b=>{window.clearTimeout(B.current),S(!0),B.current=setTimeout(()=>{S(!1),o==null||o(m)},dt),D(b)},onPointerDown:y,onPointerUp:x,onPointerMove:R,onOpenAutoFocus:b=>{t?t(b):b.preventDefault()},onPointerDownOutside:b=>{T.current&&(T.current=!1,g(a.current,{"--hide-to":"200%"})),c||b.preventDefault(),a.current.setAttribute("vaul-clicked-outside","true"),n==null||n(b)},ref:I,...r,"vaul-drawer":""},e)});xe.displayName="Drawer.Content";function bt({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:r,onNestedRelease:i}=K();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return p.default.createElement(Ce,{onDrag:(a,y)=>{o(a,y),t==null||t(a,y)},onOpenChange:a=>{r(a),n==null||n(a)},onRelease:i},e)}var ht=Object.assign({},{Root:Ce,NestedRoot:bt,Content:xe,Overlay:Me,Trigger:w.Trigger,Portal:w.Portal,Close:w.Close,Title:w.Title,Description:w.Description});0&&(module.exports={Drawer});
//# sourceMappingURL=index.js.map
{
"name": "vaul",
"version": "0.3.0",
"version": "0.3.1",
"description": "Drawer component for React.",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc