vaul - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/index.d.ts

		@@ -8,5 +8,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
		defaultOpen?: boolean;
		closeTreshold?: number;
		closeThreshold?: number;
		onOpenChange?(open: boolean): void;
		shouldScaleBackground?: boolean;
		scrollLockTimeout?: number;
		dismissible?: boolean;
		@@ -16,3 +17,3 @@ onDrag?(event: React.PointerEvent<HTMLDivElement>, percentageDragged: number): void;
		}
		declare function Root({ open: openProp, defaultOpen, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, closeTreshold, dismissible, }: DialogProps): React.JSX.Element;
		declare function Root({ open: openProp, defaultOpen, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, closeThreshold, scrollLockTimeout, dismissible, }: DialogProps): React.JSX.Element;
		declare function NestedRoot({ children, onDrag, onOpenChange }: DialogProps): React.JSX.Element;
		@@ -19,0 +20,0 @@ declare const Drawer: {

dist/index.js

		"use client"
		"use client";var Re=Object.create;var Y=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Me=Object.getOwnPropertyNames;var Ce=Object.getPrototypeOf,He=Object.prototype.hasOwnProperty;var xe=(e,t)=>{for(var n in t)Y(e,n,{get:t[n],enumerable:!0})},ne=(e,t,n,o)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of Me(t))!He.call(e,i)&&i!==n&&Y(e,i,{get:()=>t[i],enumerable:!(o=Se(t,i))\|\|o.enumerable});return e};var P=(e,t,n)=>(n=e!=null?Re(Ce(e)):{},ne(t\|\|!e\|\|!e.__esModule?Y(n,"default",{value:e,enumerable:!0}):n,e)),Le=e=>ne(Y({},"__esModule",{value:!0}),e);var _e={};xe(_e,{Drawer:()=>Xe});module.exports=Le(_e);var g=P(require("@radix-ui/react-dialog"));var S=P(require("react"));function oe(e){let t=S.default.useRef(e);return S.default.useEffect(()=>{t.current=e}),S.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function Pe({defaultProp:e,onChange:t}){let n=S.default.useState(e),[o]=n,i=S.default.useRef(o),u=oe(t);return S.default.useEffect(()=>{i.current!==o&&(u(o),i.current=o)},[o,i,u]),n}function re({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,i]=Pe({defaultProp:t,onChange:n}),u=e!==void 0,l=u?e:o,E=oe(n),y=S.default.useCallback(v=>{if(u){let f=typeof v=="function"?v(e):v;f!==e&&E(f)}else i(v)},[u,e,i,E]);return[l,y]}var F=P(require("react")),k=F.default.createContext(void 0),V=()=>F.default.useContext(k);var d=P(require("react"));function z(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))}z(`[vaul-drawer]{transform:translateY(var(--swipe-amount));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 W=require("react"),Oe=typeof window!="undefined"?W.useLayoutEffect:W.useEffect;function K(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Ne(){return X(/^Mac/)}function $e(){return X(/^iPhone/)}function Ie(){return X(/^iPad/)\|\|Ne()&&navigator.maxTouchPoints>1}function Ae(){return $e()\|\|Ie()}function X(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var B=typeof document!="undefined"&&window.visualViewport;function ie(e){let t=window.getComputedStyle(e);return/(auto\|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function se(e){for(ie(e)&&(e=e.parentElement);e&&!ie(e);)e=e.parentElement;return e\|\|document.scrollingElement\|\|document.documentElement}var Ye=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),U=0,q;function le(e={}){let{isDisabled:t}=e;Oe(()=>{if(!t)return U++,U===1&&(Ae()?q=Ue():q=Ve()),()=>{U--,U===0&&q()}},[t])}function Ve(){return K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"))}function Ue(){let e,t=0,n=f=>{e=se(f.target),!(e===document.documentElement&&e===document.body)&&(t=f.changedTouches[0].pageY)},o=f=>{if(!e\|\|e===document.documentElement\|\|e===document.body){f.preventDefault();return}let m=f.changedTouches[0].pageY,b=e.scrollTop,R=e.scrollHeight-e.clientHeight;R!==0&&((b<=0&&m>t\|\|b>=R&&m<t)&&f.preventDefault(),t=m)},i=f=>{let m=f.target;x(m)&&m!==document.activeElement&&(f.preventDefault(),m.style.transform="translateY(-2000px)",m.focus(),requestAnimationFrame(()=>{m.style.transform=""}))},u=f=>{let m=f.target;x(m)&&(m.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{m.style.transform="",B&&(B.height<window.innerHeight?requestAnimationFrame(()=>{ae(m)}):B.addEventListener("resize",()=>ae(m),{once:!0}))}))},l=()=>{window.scrollTo(0,0)},E=window.pageXOffset,y=window.pageYOffset,v=K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"),N(document.body,"marginTop",`-${y}px`));window.scrollTo(0,0);let M=K(O(document,"touchstart",n,{passive:!1,capture:!0}),O(document,"touchmove",o,{passive:!1,capture:!0}),O(document,"touchend",i,{passive:!1,capture:!0}),O(document,"focus",u,!0),O(window,"scroll",l));return()=>{v(),M(),window.scrollTo(E,y)}}function N(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function O(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function ae(e){let t=document.scrollingElement\|\|document.documentElement;for(;e&&e!==t;){let n=se(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,i=e.getBoundingClientRect().top,u=n.getBoundingClientRect().bottom;i>u&&(n.scrollTop+=i-o)}e=n.parentElement}}function x(e){return e instanceof HTMLInputElement&&!Ye.has(e.type)\|\|e instanceof HTMLTextAreaElement\|\|e instanceof HTMLElement&&e.isContentEditable}var ce=P(require("react"));function We(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function je(...e){return t=>e.forEach(n=>We(n,t))}function _(...e){return ce.useCallback(je(...e),e)}var Fe=.75,D={DURATION:.5,EASE:[.32,.72,0,1]},ke=500,ue=8,de=new Map;function ze(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width}function p(e,t,n=!1){if(!e\|\|!(e instanceof HTMLElement)\|\|!t)return;let o={};Object.entries(t).forEach(([i,u])=>{if(i.startsWith("--")){e.style.setProperty(i,u);return}o[i]=e.style[i],e.style[i]=u}),!n&&de.set(e,o)}function G(e,t){if(!e\|\|!(e instanceof HTMLElement))return;let n=de.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,i])=>{e.style[o]=i})}function fe({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:i,onDrag:u,onRelease:l,closeTreshold:E=Fe,dismissible:y=!0}){let[v=!1,M]=re({prop:e,defaultProp:t,onChange:n}),[f,m]=d.default.useState(!1),b=d.default.useRef(null),R=d.default.useRef(null),L=d.default.useRef(null),T=d.default.useRef(null),J=d.default.useRef(null),j=d.default.useRef(0),$=d.default.useRef(!1),c=d.default.useRef(null),Q=d.default.useRef(0);le({isDisabled:!v\|\|f});function I(){return(window.innerWidth-26)/window.innerWidth}function me(r){y&&(!c.current.contains(r.target)\|\|x(r.target)\|\|r.target.tagName==="BUTTON"\|\|(m(!0),R.current=new Date,r.target.setPointerCapture(r.pointerId),j.current=r.clientY))}function Z(r,a){let s=r,w=new Date;if(window.getSelection().toString().length>0)return!1;if(T.current&&w.getTime()-T.current.getTime()<1e3)return T.current=new Date,!1;for(;s;){if(s.scrollHeight>s.clientHeight){if(s.role==="dialog"\|\|s.getAttribute("vaul-drawer"))return!0;if(s.scrollTop>0)return T.current=new Date,!1;if(a&&s!==document.body)return T.current=new Date,!1}s=s.parentNode}return!0}function pe(r){var a;if(f){let s=j.current-r.clientY,w=s>0;if(!Z(r.target,w))return;let h=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(p(c.current,{transition:"none"}),s>0){p(c.current,{"--swipe-amount":`${Math.max(s-1,-40)}px`});return}let H=Math.abs(s),A=document.querySelector("[vaul-drawer-wrapper]"),C=H/h,Ee=1-C;if(u==null\|\|u(r,C),p(b.current,{opacity:`${Ee}`},!0),A&&b.current&&i){let be=Math.min(I()+C(1-I()),1),ye=8-C8,De=Math.max(0,14-C14);p(A,{borderRadius:`${ye}px`,transform:`scale(${be}) translateY(${De}px)`,transition:"none"},!0)}p(c.current,{"--swipe-amount":`${H}px`})}}(0,d.useEffect)(()=>{Q.current=window.visualViewport.height;function r(){var s,w;if(!c.current)return;let a=document.activeElement;if(!ze(a)&&x(a)\|\|$.current){let h=window.visualViewport.height,H=Q.current-h,A=((s=c.current)==null?void 0:s.getBoundingClientRect().height)\|\|0,C=(w=c.current)==null?void 0:w.getBoundingClientRect().top;$.current=!$.current,A>h?c.current.style.height=`${h-C}px`:c.current.style.height="initial",c.current.style.bottom=`${H}px`}}return window.visualViewport.addEventListener("resize",r),()=>window.visualViewport.removeEventListener("resize",r)},[]);function ee(){var a,s;if(!y)return;M(!1);let r=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(c.current){let w=getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2);p(c.current,{"--hide-from":`${Number(w).toFixed()}px`,"--hide-to":`${r.toFixed()}px`});let h=((s=b.current)==null?void 0:s.style.opacity)\|\|1;p(b.current,{"--opacity-from":`${h}`})}}d.default.useEffect(()=>{if(!v&&i){let r=setTimeout(()=>{G(document.body)},200);return()=>clearTimeout(r)}},[v]);function te(){let r=document.querySelector("[vaul-drawer-wrapper]"),a=Number(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2));p(c.current,{"--swipe-amount":"0px",transition:"transform 500ms cubic-bezier(0.32, 0.72, 0, 1)"}),i&&a>0&&v&&p(r,{borderRadius:`${ue}px`,overflow:"hidden",transform:`scale(${I()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`},!0)}function ge(r){if(x(r.target)\|\|r.target.tagName==="BUTTON"\|\|!f)return;m(!1),L.current=new Date;let a=c.current?getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2):null;if(!Z(r.target,!1)\|\|!a\|\|R.current===null)return;let s=r.clientY,w=L.current.getTime()-R.current.getTime(),h=j.current-s,H=Math.abs(h)/w;if(h>0){te(),l==null\|\|l(r,!1);return}if(H>.4){ee(),l==null\|\|l(r,!1);return}if(s>window.innerHeightE){ee(),l==null\|\|l(r,!1);return}l==null\|\|l(r,!0),te()}function ve(r){let a=document.querySelector("[vaul-drawer-wrapper]");!a\|\|!i\|\|(r.animationName==="show-dialog"?(p(document.body,{background:"black"},!0),p(a,{borderRadius:`${ue}px`,overflow:"hidden",transform:`scale(${I()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`})):r.animationName==="hide-dialog"&&(G(a,"transform"),G(a,"borderRadius"),p(a,{transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`})))}function we(r){let a=r?(window.innerWidth-16)/window.innerWidth:1,s=r?-16:0;window.clearTimeout(J.current),p(c.current,{transition:`transform ${D.DURATION}s cubic-bezier(${D.EASE.join(",")})`,transform:`scale(${a}) translateY(${s}px)`}),r\|\|(J.current=setTimeout(()=>{p(c.current,{transition:"none",transform:"translateY(var(--swipe-amount))"})},500))}function Te(r,a){if(a<0)return;let s=(window.innerWidth-16)/window.innerWidth,w=s+a(1-s),h=-16+a*16;p(c.current,{transform:`scale(${w}) translateY(${h}px)`,transition:"none"})}function he(r,a){let s=a?(window.innerWidth-16)/window.innerWidth:1,w=a?-16:0;a&&p(c.current,{transition:`transform ${D.DURATION}s cubic-bezier(${D.EASE.join(",")})`,transform:`scale(${s}) translateY(${w}px)`})}return d.default.createElement(g.Root,{open:v,onOpenChange:r=>{M(r)}},d.default.createElement(k.Provider,{value:{drawerRef:c,overlayRef:b,onAnimationStart:ve,onPress:me,onRelease:ge,onDrag:pe,dismissible:y,isOpen:v,onNestedDrag:Te,onNestedOpenChange:we,onNestedRelease:he,keyboardIsOpen:$}},o))}var Be=d.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:i}=V(),u=_(n,o);return d.default.createElement(g.Overlay,{onMouseUp:i,ref:u,"vaul-overlay":"",...t})}),qe=d.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...i},u){let{drawerRef:l,onPress:E,onRelease:y,onAnimationStart:v,onDrag:M,dismissible:f,isOpen:m,keyboardIsOpen:b}=V(),R=_(u,l),L=d.default.useRef(null);return d.default.createElement(g.Content,{onAnimationStart:T=>{window.clearTimeout(L.current),L.current=setTimeout(()=>{o==null\|\|o(m)},ke),v(T)},onPointerDown:E,onPointerUp:y,onPointerMove:M,onOpenAutoFocus:T=>{t?t(T):T.preventDefault()},onPointerDownOutside:T=>{b.current&&(b.current=!1,p(l.current,{"--hide-to":"200%"})),f\|\|T.preventDefault(),n==null\|\|n(T)},ref:R,...i,"vaul-drawer":""},e)});function Ke({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:i,onNestedRelease:u}=V();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return d.default.createElement(fe,{onDrag:(l,E)=>{o(l,E),t==null\|\|t(l,E)},onOpenChange:l=>{i(l),n==null\|\|n(l)},onRelease:u},e)}var Xe=Object.assign({},{Root:fe,NestedRoot:Ke,Content:qe,Overlay:Be,Trigger:g.Trigger,Portal:g.Portal,Close:g.Close,Title:g.Title,Description:g.Description});0&&(module.exports={Drawer});
		"use client";var Se=Object.create;var Y=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Me=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var Le=(e,t)=>{for(var n in t)Y(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,o)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of Me(t))!xe.call(e,i)&&i!==n&&Y(e,i,{get:()=>t[i],enumerable:!(o=Ce(t,i))\|\|o.enumerable});return e};var P=(e,t,n)=>(n=e!=null?Se(He(e)):{},oe(t\|\|!e\|\|!e.__esModule?Y(n,"default",{value:e,enumerable:!0}):n,e)),Pe=e=>oe(Y({},"__esModule",{value:!0}),e);var Je={};Le(Je,{Drawer:()=>Ge});module.exports=Pe(Je);var g=P(require("@radix-ui/react-dialog"));var M=P(require("react"));function re(e){let t=M.default.useRef(e);return M.default.useEffect(()=>{t.current=e}),M.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function Oe({defaultProp:e,onChange:t}){let n=M.default.useState(e),[o]=n,i=M.default.useRef(o),u=re(t);return M.default.useEffect(()=>{i.current!==o&&(u(o),i.current=o)},[o,i,u]),n}function ie({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,i]=Oe({defaultProp:t,onChange:n}),u=e!==void 0,l=u?e:o,b=re(n),S=M.default.useCallback(T=>{if(u){let m=typeof T=="function"?T(e):T;m!==e&&b(m)}else i(T)},[u,e,i,b]);return[l,S]}var z=P(require("react")),F=z.default.createContext(void 0),V=()=>z.default.useContext(F);var d=P(require("react"));function B(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))}B(`[vaul-drawer]{transform:translateY(var(--swipe-amount));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 j=require("react"),Ne=typeof window!="undefined"?j.useLayoutEffect:j.useEffect;function K(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function $e(){return X(/^Mac/)}function Ie(){return X(/^iPhone/)}function Ae(){return X(/^iPad/)\|\|$e()&&navigator.maxTouchPoints>1}function Ye(){return Ie()\|\|Ae()}function X(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var q=typeof document!="undefined"&&window.visualViewport;function ae(e){let t=window.getComputedStyle(e);return/(auto\|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function le(e){for(ae(e)&&(e=e.parentElement);e&&!ae(e);)e=e.parentElement;return e\|\|document.scrollingElement\|\|document.documentElement}var Ve=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),U=0,_;function ce(e={}){let{isDisabled:t}=e;Ne(()=>{if(!t)return U++,U===1&&(Ye()?_=We():_=Ue()),()=>{U--,U===0&&_()}},[t])}function Ue(){return K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"))}function We(){let e,t=0,n=m=>{e=le(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 f=m.changedTouches[0].pageY,C=e.scrollTop,h=e.scrollHeight-e.clientHeight;h!==0&&((C<=0&&f>t\|\|C>=h&&f<t)&&m.preventDefault(),t=f)},i=m=>{let f=m.target;W(f)&&f!==document.activeElement&&(m.preventDefault(),f.style.transform="translateY(-2000px)",f.focus(),requestAnimationFrame(()=>{f.style.transform=""}))},u=m=>{let f=m.target;W(f)&&(f.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{f.style.transform="",q&&(q.height<window.innerHeight?requestAnimationFrame(()=>{se(f)}):q.addEventListener("resize",()=>se(f),{once:!0}))}))},l=()=>{window.scrollTo(0,0)},b=window.pageXOffset,S=window.pageYOffset,T=K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"),N(document.body,"marginTop",`-${S}px`));window.scrollTo(0,0);let y=K(O(document,"touchstart",n,{passive:!1,capture:!0}),O(document,"touchmove",o,{passive:!1,capture:!0}),O(document,"touchend",i,{passive:!1,capture:!0}),O(document,"focus",u,!0),O(window,"scroll",l));return()=>{T(),y(),window.scrollTo(b,S)}}function N(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function O(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function se(e){let t=document.scrollingElement\|\|document.documentElement;for(;e&&e!==t;){let n=le(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,i=e.getBoundingClientRect().top,u=n.getBoundingClientRect().bottom;i>u&&(n.scrollTop+=i-o)}e=n.parentElement}}function W(e){return e instanceof HTMLInputElement&&!Ve.has(e.type)\|\|e instanceof HTMLTextAreaElement\|\|e instanceof HTMLElement&&e.isContentEditable}var ue=P(require("react"));function je(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function ke(...e){return t=>e.forEach(n=>je(n,t))}function G(...e){return ue.useCallback(ke(...e),e)}var ze=.25,Fe=1e3,E={DURATION:.5,EASE:[.32,.72,0,1]},Be=500,de=8,fe=new Map;function qe(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width}function p(e,t,n=!1){if(!e\|\|!(e instanceof HTMLElement)\|\|!t)return;let o={};Object.entries(t).forEach(([i,u])=>{if(i.startsWith("--")){e.style.setProperty(i,u);return}o[i]=e.style[i],e.style[i]=u}),!n&&fe.set(e,o)}function J(e,t){if(!e\|\|!(e instanceof HTMLElement))return;let n=fe.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,i])=>{e.style[o]=i})}function me({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:i,onDrag:u,onRelease:l,closeThreshold:b=ze,scrollLockTimeout:S=Fe,dismissible:T=!0}){let[y=!1,m]=ie({prop:e,defaultProp:t,onChange:n}),[f,C]=d.default.useState(!1),h=d.default.useRef(null),H=d.default.useRef(null),R=d.default.useRef(null),$=d.default.useRef(null),Q=d.default.useRef(null),k=d.default.useRef(0),I=d.default.useRef(!1),c=d.default.useRef(null),Z=d.default.useRef(0);ce({isDisabled:!y\|\|f});function A(){return(window.innerWidth-26)/window.innerWidth}function pe(r){T&&(!c.current.contains(r.target)\|\|r.target.tagName==="BUTTON"\|\|(C(!0),H.current=new Date,r.target.setPointerCapture(r.pointerId),k.current=r.clientY))}function ee(r,a){let s=r,v=new Date;if(window.getSelection().toString().length>0\|\|$.current&&v.getTime()-$.current.getTime()<S)return!1;for(;s;){if(s.scrollHeight>s.clientHeight){if(s.role==="dialog"\|\|s.getAttribute("vaul-drawer"))return!0;if(s.scrollTop>0)return $.current=new Date,!1;if(a&&s!==document.body)return $.current=new Date,!1}s=s.parentNode}return!0}function ge(r){var a;if(f){let s=k.current-r.clientY,v=s>0;if(!ee(r.target,v))return;let w=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(p(c.current,{transition:"none"}),p(h.current,{transition:"none"}),s>0){p(c.current,{"--swipe-amount":`${Math.max(s-1,-40)}px`});return}let x=Math.abs(s),L=document.querySelector("[vaul-drawer-wrapper]"),D=x/w,be=1-D;if(u==null\|\|u(r,D),p(h.current,{opacity:`${be}`},!0),L&&h.current&&i){let ye=Math.min(A()+D(1-A()),1),Re=8-D8,De=Math.max(0,14-D14);p(L,{borderRadius:`${Re}px`,transform:`scale(${ye}) translateY(${De}px)`,transition:"none"},!0)}p(c.current,{"--swipe-amount":`${x}px`})}}(0,d.useEffect)(()=>{Z.current=window.visualViewport.height;function r(){var s,v;if(!c.current)return;let a=document.activeElement;if(!qe(a)&&W(a)\|\|I.current){let w=window.visualViewport.height,x=Z.current-w,L=((s=c.current)==null?void 0:s.getBoundingClientRect().height)\|\|0,D=(v=c.current)==null?void 0:v.getBoundingClientRect().top;I.current=!I.current,L>w?c.current.style.height=`${w-D}px`:c.current.style.height="initial",c.current.style.bottom=`${x}px`}}return window.visualViewport.addEventListener("resize",r),()=>window.visualViewport.removeEventListener("resize",r)},[]);function te(){var a,s;if(!T)return;m(!1);let r=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(c.current){let v=getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2);p(c.current,{"--hide-from":`${Number(v).toFixed()}px`,"--hide-to":`${r.toFixed()}px`});let w=((s=h.current)==null?void 0:s.style.opacity)\|\|1;p(h.current,{"--opacity-from":`${w}`})}}d.default.useEffect(()=>{if(!y&&i){let r=setTimeout(()=>{J(document.body)},200);return()=>clearTimeout(r)}},[y]);function ne(){let r=document.querySelector("[vaul-drawer-wrapper]"),a=Number(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2));p(c.current,{"--swipe-amount":"0px",transition:"transform 500ms cubic-bezier(0.32, 0.72, 0, 1)"}),p(h.current,{transition:`opacity ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,opacity:"1"}),i&&a>0&&y&&p(r,{borderRadius:`${de}px`,overflow:"hidden",transform:`scale(${A()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`},!0)}function ve(r){var D;if(r.target.tagName==="BUTTON"\|\|!f)return;C(!1),R.current=new Date;let a=c.current?Number.parseInt(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2),10):null;if(!ee(r.target,!1)\|\|!a\|\|Number.isNaN(a)\|\|H.current===null)return;let s=r.clientY,v=R.current.getTime()-H.current.getTime(),w=k.current-s,x=Math.abs(w)/v;if(w>0){ne(),l==null\|\|l(r,!1);return}if(x>.4){te(),l==null\|\|l(r,!1);return}let L=Math.min(((D=c.current)==null?void 0:D.getBoundingClientRect().height)\|\|0,window.innerHeight);if(a>=Lb){te(),l==null\|\|l(r,!1);return}l==null\|\|l(r,!0),ne()}function we(r){let a=document.querySelector("[vaul-drawer-wrapper]");!a\|\|!i\|\|(r.animationName==="show-dialog"?(p(document.body,{background:"black"},!0),p(a,{borderRadius:`${de}px`,overflow:"hidden",transform:`scale(${A()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`})):r.animationName==="hide-dialog"&&(J(a,"transform"),J(a,"borderRadius"),p(a,{transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`})))}function Te(r){let a=r?(window.innerWidth-16)/window.innerWidth:1,s=r?-16:0;window.clearTimeout(Q.current),p(c.current,{transition:`transform ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,transform:`scale(${a}) translateY(${s}px)`}),r\|\|(Q.current=setTimeout(()=>{p(c.current,{transition:"none",transform:"translateY(var(--swipe-amount))"})},500))}function he(r,a){if(a<0)return;let s=(window.innerWidth-16)/window.innerWidth,v=s+a(1-s),w=-16+a*16;p(c.current,{transform:`scale(${v}) translateY(${w}px)`,transition:"none"})}function Ee(r,a){let s=a?(window.innerWidth-16)/window.innerWidth:1,v=a?-16:0;a&&p(c.current,{transition:`transform ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,transform:`scale(${s}) translateY(${v}px)`})}return d.default.createElement(g.Root,{open:y,onOpenChange:r=>{m(r)}},d.default.createElement(F.Provider,{value:{drawerRef:c,overlayRef:h,onAnimationStart:we,onPress:pe,onRelease:ve,onDrag:ge,dismissible:T,isOpen:y,onNestedDrag:he,onNestedOpenChange:Te,onNestedRelease:Ee,keyboardIsOpen:I}},o))}var _e=d.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:i}=V(),u=G(n,o);return d.default.createElement(g.Overlay,{onMouseUp:i,ref:u,"vaul-overlay":"",...t})}),Ke=d.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...i},u){let{drawerRef:l,onPress:b,onRelease:S,onAnimationStart:T,onDrag:y,dismissible:m,isOpen:f,keyboardIsOpen:C}=V(),h=G(u,l),H=d.default.useRef(null);return d.default.createElement(g.Content,{onAnimationStart:R=>{window.clearTimeout(H.current),H.current=setTimeout(()=>{o==null\|\|o(f)},Be),T(R)},onPointerDown:b,onPointerUp:S,onPointerMove:y,onOpenAutoFocus:R=>{t?t(R):R.preventDefault()},onPointerDownOutside:R=>{C.current&&(C.current=!1,p(l.current,{"--hide-to":"200%"})),m\|\|R.preventDefault(),n==null\|\|n(R)},ref:h,...i,"vaul-drawer":""},e)});function Xe({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:i,onNestedRelease:u}=V();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return d.default.createElement(me,{onDrag:(l,b)=>{o(l,b),t==null\|\|t(l,b)},onOpenChange:l=>{i(l),n==null\|\|n(l)},onRelease:u},e)}var Ge=Object.assign({},{Root:me,NestedRoot:Xe,Content:Ke,Overlay:_e,Trigger:g.Trigger,Portal:g.Portal,Close:g.Close,Title:g.Title,Description:g.Description});0&&(module.exports={Drawer});
		//# sourceMappingURL=index.js.map

package.json

		{
		"name": "vaul",
		"version": "0.2.0",
		"version": "0.2.1",
		"description": "Drawer component for React.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -40,3 +40,4 @@ https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
		- [Scrollable with inputs](https://codesandbox.io/p/sandbox/drawer-with-scale-forked-73f8jw?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)
		- [Dismissible](https://codesandbox.io/p/sandbox/drawer-without-scale-forked-kxh9j5?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)
		- [Nested drawers](https://codesandbox.io/p/sandbox/drawer-non-dismissable-forked-5z2r3j?file=%2Fapp%2Fmy-drawer.tsx%3A49%2C16-49%2C246)
		- [Non-dismissible](https://codesandbox.io/p/sandbox/drawer-without-scale-forked-kxh9j5?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)

		@@ -52,4 +53,6 @@ ## API Reference

		`closeTreshold`: Number between 0 and 1 that determines when the drawer should be closed. Example: `closeTreshold`` of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
		`closeThreshold`: Number between 0 and 1 that determines when the drawer should be closed. Example: `closeThreshold`` of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.

		`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 1000ms

		### Trigger
		@@ -56,0 +59,0 @@

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

		"use client"
		"use client";var Re=Object.create;var Y=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Me=Object.getOwnPropertyNames;var Ce=Object.getPrototypeOf,He=Object.prototype.hasOwnProperty;var xe=(e,t)=>{for(var n in t)Y(e,n,{get:t[n],enumerable:!0})},ne=(e,t,n,o)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of Me(t))!He.call(e,i)&&i!==n&&Y(e,i,{get:()=>t[i],enumerable:!(o=Se(t,i))\|\|o.enumerable});return e};var P=(e,t,n)=>(n=e!=null?Re(Ce(e)):{},ne(t\|\|!e\|\|!e.__esModule?Y(n,"default",{value:e,enumerable:!0}):n,e)),Le=e=>ne(Y({},"__esModule",{value:!0}),e);var _e={};xe(_e,{Drawer:()=>Xe});module.exports=Le(_e);var g=P(require("@radix-ui/react-dialog"));var S=P(require("react"));function oe(e){let t=S.default.useRef(e);return S.default.useEffect(()=>{t.current=e}),S.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function Pe({defaultProp:e,onChange:t}){let n=S.default.useState(e),[o]=n,i=S.default.useRef(o),u=oe(t);return S.default.useEffect(()=>{i.current!==o&&(u(o),i.current=o)},[o,i,u]),n}function re({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,i]=Pe({defaultProp:t,onChange:n}),u=e!==void 0,l=u?e:o,E=oe(n),y=S.default.useCallback(v=>{if(u){let f=typeof v=="function"?v(e):v;f!==e&&E(f)}else i(v)},[u,e,i,E]);return[l,y]}var F=P(require("react")),k=F.default.createContext(void 0),V=()=>F.default.useContext(k);var d=P(require("react"));function z(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))}z(`[vaul-drawer]{transform:translateY(var(--swipe-amount));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 W=require("react"),Oe=typeof window!="undefined"?W.useLayoutEffect:W.useEffect;function K(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Ne(){return X(/^Mac/)}function $e(){return X(/^iPhone/)}function Ie(){return X(/^iPad/)\|\|Ne()&&navigator.maxTouchPoints>1}function Ae(){return $e()\|\|Ie()}function X(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var B=typeof document!="undefined"&&window.visualViewport;function ie(e){let t=window.getComputedStyle(e);return/(auto\|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function se(e){for(ie(e)&&(e=e.parentElement);e&&!ie(e);)e=e.parentElement;return e\|\|document.scrollingElement\|\|document.documentElement}var Ye=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),U=0,q;function le(e={}){let{isDisabled:t}=e;Oe(()=>{if(!t)return U++,U===1&&(Ae()?q=Ue():q=Ve()),()=>{U--,U===0&&q()}},[t])}function Ve(){return K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"))}function Ue(){let e,t=0,n=f=>{e=se(f.target),!(e===document.documentElement&&e===document.body)&&(t=f.changedTouches[0].pageY)},o=f=>{if(!e\|\|e===document.documentElement\|\|e===document.body){f.preventDefault();return}let m=f.changedTouches[0].pageY,b=e.scrollTop,R=e.scrollHeight-e.clientHeight;R!==0&&((b<=0&&m>t\|\|b>=R&&m<t)&&f.preventDefault(),t=m)},i=f=>{let m=f.target;x(m)&&m!==document.activeElement&&(f.preventDefault(),m.style.transform="translateY(-2000px)",m.focus(),requestAnimationFrame(()=>{m.style.transform=""}))},u=f=>{let m=f.target;x(m)&&(m.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{m.style.transform="",B&&(B.height<window.innerHeight?requestAnimationFrame(()=>{ae(m)}):B.addEventListener("resize",()=>ae(m),{once:!0}))}))},l=()=>{window.scrollTo(0,0)},E=window.pageXOffset,y=window.pageYOffset,v=K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"),N(document.body,"marginTop",`-${y}px`));window.scrollTo(0,0);let M=K(O(document,"touchstart",n,{passive:!1,capture:!0}),O(document,"touchmove",o,{passive:!1,capture:!0}),O(document,"touchend",i,{passive:!1,capture:!0}),O(document,"focus",u,!0),O(window,"scroll",l));return()=>{v(),M(),window.scrollTo(E,y)}}function N(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function O(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function ae(e){let t=document.scrollingElement\|\|document.documentElement;for(;e&&e!==t;){let n=se(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,i=e.getBoundingClientRect().top,u=n.getBoundingClientRect().bottom;i>u&&(n.scrollTop+=i-o)}e=n.parentElement}}function x(e){return e instanceof HTMLInputElement&&!Ye.has(e.type)\|\|e instanceof HTMLTextAreaElement\|\|e instanceof HTMLElement&&e.isContentEditable}var ce=P(require("react"));function We(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function je(...e){return t=>e.forEach(n=>We(n,t))}function _(...e){return ce.useCallback(je(...e),e)}var Fe=.75,D={DURATION:.5,EASE:[.32,.72,0,1]},ke=500,ue=8,de=new Map;function ze(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width}function p(e,t,n=!1){if(!e\|\|!(e instanceof HTMLElement)\|\|!t)return;let o={};Object.entries(t).forEach(([i,u])=>{if(i.startsWith("--")){e.style.setProperty(i,u);return}o[i]=e.style[i],e.style[i]=u}),!n&&de.set(e,o)}function G(e,t){if(!e\|\|!(e instanceof HTMLElement))return;let n=de.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,i])=>{e.style[o]=i})}function fe({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:i,onDrag:u,onRelease:l,closeTreshold:E=Fe,dismissible:y=!0}){let[v=!1,M]=re({prop:e,defaultProp:t,onChange:n}),[f,m]=d.default.useState(!1),b=d.default.useRef(null),R=d.default.useRef(null),L=d.default.useRef(null),T=d.default.useRef(null),J=d.default.useRef(null),j=d.default.useRef(0),$=d.default.useRef(!1),c=d.default.useRef(null),Q=d.default.useRef(0);le({isDisabled:!v\|\|f});function I(){return(window.innerWidth-26)/window.innerWidth}function me(r){y&&(!c.current.contains(r.target)\|\|x(r.target)\|\|r.target.tagName==="BUTTON"\|\|(m(!0),R.current=new Date,r.target.setPointerCapture(r.pointerId),j.current=r.clientY))}function Z(r,a){let s=r,w=new Date;if(window.getSelection().toString().length>0)return!1;if(T.current&&w.getTime()-T.current.getTime()<1e3)return T.current=new Date,!1;for(;s;){if(s.scrollHeight>s.clientHeight){if(s.role==="dialog"\|\|s.getAttribute("vaul-drawer"))return!0;if(s.scrollTop>0)return T.current=new Date,!1;if(a&&s!==document.body)return T.current=new Date,!1}s=s.parentNode}return!0}function pe(r){var a;if(f){let s=j.current-r.clientY,w=s>0;if(!Z(r.target,w))return;let h=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(p(c.current,{transition:"none"}),s>0){p(c.current,{"--swipe-amount":`${Math.max(s-1,-40)}px`});return}let H=Math.abs(s),A=document.querySelector("[vaul-drawer-wrapper]"),C=H/h,Ee=1-C;if(u==null\|\|u(r,C),p(b.current,{opacity:`${Ee}`},!0),A&&b.current&&i){let be=Math.min(I()+C(1-I()),1),ye=8-C8,De=Math.max(0,14-C14);p(A,{borderRadius:`${ye}px`,transform:`scale(${be}) translateY(${De}px)`,transition:"none"},!0)}p(c.current,{"--swipe-amount":`${H}px`})}}(0,d.useEffect)(()=>{Q.current=window.visualViewport.height;function r(){var s,w;if(!c.current)return;let a=document.activeElement;if(!ze(a)&&x(a)\|\|$.current){let h=window.visualViewport.height,H=Q.current-h,A=((s=c.current)==null?void 0:s.getBoundingClientRect().height)\|\|0,C=(w=c.current)==null?void 0:w.getBoundingClientRect().top;$.current=!$.current,A>h?c.current.style.height=`${h-C}px`:c.current.style.height="initial",c.current.style.bottom=`${H}px`}}return window.visualViewport.addEventListener("resize",r),()=>window.visualViewport.removeEventListener("resize",r)},[]);function ee(){var a,s;if(!y)return;M(!1);let r=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(c.current){let w=getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2);p(c.current,{"--hide-from":`${Number(w).toFixed()}px`,"--hide-to":`${r.toFixed()}px`});let h=((s=b.current)==null?void 0:s.style.opacity)\|\|1;p(b.current,{"--opacity-from":`${h}`})}}d.default.useEffect(()=>{if(!v&&i){let r=setTimeout(()=>{G(document.body)},200);return()=>clearTimeout(r)}},[v]);function te(){let r=document.querySelector("[vaul-drawer-wrapper]"),a=Number(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2));p(c.current,{"--swipe-amount":"0px",transition:"transform 500ms cubic-bezier(0.32, 0.72, 0, 1)"}),i&&a>0&&v&&p(r,{borderRadius:`${ue}px`,overflow:"hidden",transform:`scale(${I()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`},!0)}function ge(r){if(x(r.target)\|\|r.target.tagName==="BUTTON"\|\|!f)return;m(!1),L.current=new Date;let a=c.current?getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2):null;if(!Z(r.target,!1)\|\|!a\|\|R.current===null)return;let s=r.clientY,w=L.current.getTime()-R.current.getTime(),h=j.current-s,H=Math.abs(h)/w;if(h>0){te(),l==null\|\|l(r,!1);return}if(H>.4){ee(),l==null\|\|l(r,!1);return}if(s>window.innerHeightE){ee(),l==null\|\|l(r,!1);return}l==null\|\|l(r,!0),te()}function ve(r){let a=document.querySelector("[vaul-drawer-wrapper]");!a\|\|!i\|\|(r.animationName==="show-dialog"?(p(document.body,{background:"black"},!0),p(a,{borderRadius:`${ue}px`,overflow:"hidden",transform:`scale(${I()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`})):r.animationName==="hide-dialog"&&(G(a,"transform"),G(a,"borderRadius"),p(a,{transitionProperty:"transform, border-radius",transitionDuration:`${D.DURATION}s`,transitionTimingFunction:`cubic-bezier(${D.EASE.join(",")})`})))}function we(r){let a=r?(window.innerWidth-16)/window.innerWidth:1,s=r?-16:0;window.clearTimeout(J.current),p(c.current,{transition:`transform ${D.DURATION}s cubic-bezier(${D.EASE.join(",")})`,transform:`scale(${a}) translateY(${s}px)`}),r\|\|(J.current=setTimeout(()=>{p(c.current,{transition:"none",transform:"translateY(var(--swipe-amount))"})},500))}function Te(r,a){if(a<0)return;let s=(window.innerWidth-16)/window.innerWidth,w=s+a(1-s),h=-16+a*16;p(c.current,{transform:`scale(${w}) translateY(${h}px)`,transition:"none"})}function he(r,a){let s=a?(window.innerWidth-16)/window.innerWidth:1,w=a?-16:0;a&&p(c.current,{transition:`transform ${D.DURATION}s cubic-bezier(${D.EASE.join(",")})`,transform:`scale(${s}) translateY(${w}px)`})}return d.default.createElement(g.Root,{open:v,onOpenChange:r=>{M(r)}},d.default.createElement(k.Provider,{value:{drawerRef:c,overlayRef:b,onAnimationStart:ve,onPress:me,onRelease:ge,onDrag:pe,dismissible:y,isOpen:v,onNestedDrag:Te,onNestedOpenChange:we,onNestedRelease:he,keyboardIsOpen:$}},o))}var Be=d.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:i}=V(),u=_(n,o);return d.default.createElement(g.Overlay,{onMouseUp:i,ref:u,"vaul-overlay":"",...t})}),qe=d.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...i},u){let{drawerRef:l,onPress:E,onRelease:y,onAnimationStart:v,onDrag:M,dismissible:f,isOpen:m,keyboardIsOpen:b}=V(),R=_(u,l),L=d.default.useRef(null);return d.default.createElement(g.Content,{onAnimationStart:T=>{window.clearTimeout(L.current),L.current=setTimeout(()=>{o==null\|\|o(m)},ke),v(T)},onPointerDown:E,onPointerUp:y,onPointerMove:M,onOpenAutoFocus:T=>{t?t(T):T.preventDefault()},onPointerDownOutside:T=>{b.current&&(b.current=!1,p(l.current,{"--hide-to":"200%"})),f\|\|T.preventDefault(),n==null\|\|n(T)},ref:R,...i,"vaul-drawer":""},e)});function Ke({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:i,onNestedRelease:u}=V();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return d.default.createElement(fe,{onDrag:(l,E)=>{o(l,E),t==null\|\|t(l,E)},onOpenChange:l=>{i(l),n==null\|\|n(l)},onRelease:u},e)}var Xe=Object.assign({},{Root:fe,NestedRoot:Ke,Content:qe,Overlay:Be,Trigger:g.Trigger,Portal:g.Portal,Close:g.Close,Title:g.Title,Description:g.Description});0&&(module.exports={Drawer});
		"use client";var Se=Object.create;var Y=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Me=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var Le=(e,t)=>{for(var n in t)Y(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,o)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of Me(t))!xe.call(e,i)&&i!==n&&Y(e,i,{get:()=>t[i],enumerable:!(o=Ce(t,i))\|\|o.enumerable});return e};var P=(e,t,n)=>(n=e!=null?Se(He(e)):{},oe(t\|\|!e\|\|!e.__esModule?Y(n,"default",{value:e,enumerable:!0}):n,e)),Pe=e=>oe(Y({},"__esModule",{value:!0}),e);var Je={};Le(Je,{Drawer:()=>Ge});module.exports=Pe(Je);var g=P(require("@radix-ui/react-dialog"));var M=P(require("react"));function re(e){let t=M.default.useRef(e);return M.default.useEffect(()=>{t.current=e}),M.default.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function Oe({defaultProp:e,onChange:t}){let n=M.default.useState(e),[o]=n,i=M.default.useRef(o),u=re(t);return M.default.useEffect(()=>{i.current!==o&&(u(o),i.current=o)},[o,i,u]),n}function ie({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,i]=Oe({defaultProp:t,onChange:n}),u=e!==void 0,l=u?e:o,b=re(n),S=M.default.useCallback(T=>{if(u){let m=typeof T=="function"?T(e):T;m!==e&&b(m)}else i(T)},[u,e,i,b]);return[l,S]}var z=P(require("react")),F=z.default.createContext(void 0),V=()=>z.default.useContext(F);var d=P(require("react"));function B(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))}B(`[vaul-drawer]{transform:translateY(var(--swipe-amount));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 j=require("react"),Ne=typeof window!="undefined"?j.useLayoutEffect:j.useEffect;function K(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function $e(){return X(/^Mac/)}function Ie(){return X(/^iPhone/)}function Ae(){return X(/^iPad/)\|\|$e()&&navigator.maxTouchPoints>1}function Ye(){return Ie()\|\|Ae()}function X(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var q=typeof document!="undefined"&&window.visualViewport;function ae(e){let t=window.getComputedStyle(e);return/(auto\|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function le(e){for(ae(e)&&(e=e.parentElement);e&&!ae(e);)e=e.parentElement;return e\|\|document.scrollingElement\|\|document.documentElement}var Ve=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),U=0,_;function ce(e={}){let{isDisabled:t}=e;Ne(()=>{if(!t)return U++,U===1&&(Ye()?_=We():_=Ue()),()=>{U--,U===0&&_()}},[t])}function Ue(){return K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"))}function We(){let e,t=0,n=m=>{e=le(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 f=m.changedTouches[0].pageY,C=e.scrollTop,h=e.scrollHeight-e.clientHeight;h!==0&&((C<=0&&f>t\|\|C>=h&&f<t)&&m.preventDefault(),t=f)},i=m=>{let f=m.target;W(f)&&f!==document.activeElement&&(m.preventDefault(),f.style.transform="translateY(-2000px)",f.focus(),requestAnimationFrame(()=>{f.style.transform=""}))},u=m=>{let f=m.target;W(f)&&(f.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{f.style.transform="",q&&(q.height<window.innerHeight?requestAnimationFrame(()=>{se(f)}):q.addEventListener("resize",()=>se(f),{once:!0}))}))},l=()=>{window.scrollTo(0,0)},b=window.pageXOffset,S=window.pageYOffset,T=K(N(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),N(document.documentElement,"overflow","hidden"),N(document.body,"marginTop",`-${S}px`));window.scrollTo(0,0);let y=K(O(document,"touchstart",n,{passive:!1,capture:!0}),O(document,"touchmove",o,{passive:!1,capture:!0}),O(document,"touchend",i,{passive:!1,capture:!0}),O(document,"focus",u,!0),O(window,"scroll",l));return()=>{T(),y(),window.scrollTo(b,S)}}function N(e,t,n){let o=e.style[t];return e.style[t]=n,()=>{e.style[t]=o}}function O(e,t,n,o){return e.addEventListener(t,n,o),()=>{e.removeEventListener(t,n,o)}}function se(e){let t=document.scrollingElement\|\|document.documentElement;for(;e&&e!==t;){let n=le(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let o=n.getBoundingClientRect().top,i=e.getBoundingClientRect().top,u=n.getBoundingClientRect().bottom;i>u&&(n.scrollTop+=i-o)}e=n.parentElement}}function W(e){return e instanceof HTMLInputElement&&!Ve.has(e.type)\|\|e instanceof HTMLTextAreaElement\|\|e instanceof HTMLElement&&e.isContentEditable}var ue=P(require("react"));function je(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function ke(...e){return t=>e.forEach(n=>je(n,t))}function G(...e){return ue.useCallback(ke(...e),e)}var ze=.25,Fe=1e3,E={DURATION:.5,EASE:[.32,.72,0,1]},Be=500,de=8,fe=new Map;function qe(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=window.visualViewport.height+40&&t.right<=window.visualViewport.width}function p(e,t,n=!1){if(!e\|\|!(e instanceof HTMLElement)\|\|!t)return;let o={};Object.entries(t).forEach(([i,u])=>{if(i.startsWith("--")){e.style.setProperty(i,u);return}o[i]=e.style[i],e.style[i]=u}),!n&&fe.set(e,o)}function J(e,t){if(!e\|\|!(e instanceof HTMLElement))return;let n=fe.get(e);if(!n){e.style={};return}t?e.style[t]=n[t]:Object.entries(n).forEach(([o,i])=>{e.style[o]=i})}function me({open:e,defaultOpen:t,onOpenChange:n,children:o,shouldScaleBackground:i,onDrag:u,onRelease:l,closeThreshold:b=ze,scrollLockTimeout:S=Fe,dismissible:T=!0}){let[y=!1,m]=ie({prop:e,defaultProp:t,onChange:n}),[f,C]=d.default.useState(!1),h=d.default.useRef(null),H=d.default.useRef(null),R=d.default.useRef(null),$=d.default.useRef(null),Q=d.default.useRef(null),k=d.default.useRef(0),I=d.default.useRef(!1),c=d.default.useRef(null),Z=d.default.useRef(0);ce({isDisabled:!y\|\|f});function A(){return(window.innerWidth-26)/window.innerWidth}function pe(r){T&&(!c.current.contains(r.target)\|\|r.target.tagName==="BUTTON"\|\|(C(!0),H.current=new Date,r.target.setPointerCapture(r.pointerId),k.current=r.clientY))}function ee(r,a){let s=r,v=new Date;if(window.getSelection().toString().length>0\|\|$.current&&v.getTime()-$.current.getTime()<S)return!1;for(;s;){if(s.scrollHeight>s.clientHeight){if(s.role==="dialog"\|\|s.getAttribute("vaul-drawer"))return!0;if(s.scrollTop>0)return $.current=new Date,!1;if(a&&s!==document.body)return $.current=new Date,!1}s=s.parentNode}return!0}function ge(r){var a;if(f){let s=k.current-r.clientY,v=s>0;if(!ee(r.target,v))return;let w=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(p(c.current,{transition:"none"}),p(h.current,{transition:"none"}),s>0){p(c.current,{"--swipe-amount":`${Math.max(s-1,-40)}px`});return}let x=Math.abs(s),L=document.querySelector("[vaul-drawer-wrapper]"),D=x/w,be=1-D;if(u==null\|\|u(r,D),p(h.current,{opacity:`${be}`},!0),L&&h.current&&i){let ye=Math.min(A()+D(1-A()),1),Re=8-D8,De=Math.max(0,14-D14);p(L,{borderRadius:`${Re}px`,transform:`scale(${ye}) translateY(${De}px)`,transition:"none"},!0)}p(c.current,{"--swipe-amount":`${x}px`})}}(0,d.useEffect)(()=>{Z.current=window.visualViewport.height;function r(){var s,v;if(!c.current)return;let a=document.activeElement;if(!qe(a)&&W(a)\|\|I.current){let w=window.visualViewport.height,x=Z.current-w,L=((s=c.current)==null?void 0:s.getBoundingClientRect().height)\|\|0,D=(v=c.current)==null?void 0:v.getBoundingClientRect().top;I.current=!I.current,L>w?c.current.style.height=`${w-D}px`:c.current.style.height="initial",c.current.style.bottom=`${x}px`}}return window.visualViewport.addEventListener("resize",r),()=>window.visualViewport.removeEventListener("resize",r)},[]);function te(){var a,s;if(!T)return;m(!1);let r=((a=c.current)==null?void 0:a.getBoundingClientRect().height)\|\|0;if(c.current){let v=getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2);p(c.current,{"--hide-from":`${Number(v).toFixed()}px`,"--hide-to":`${r.toFixed()}px`});let w=((s=h.current)==null?void 0:s.style.opacity)\|\|1;p(h.current,{"--opacity-from":`${w}`})}}d.default.useEffect(()=>{if(!y&&i){let r=setTimeout(()=>{J(document.body)},200);return()=>clearTimeout(r)}},[y]);function ne(){let r=document.querySelector("[vaul-drawer-wrapper]"),a=Number(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2));p(c.current,{"--swipe-amount":"0px",transition:"transform 500ms cubic-bezier(0.32, 0.72, 0, 1)"}),p(h.current,{transition:`opacity ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,opacity:"1"}),i&&a>0&&y&&p(r,{borderRadius:`${de}px`,overflow:"hidden",transform:`scale(${A()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`},!0)}function ve(r){var D;if(r.target.tagName==="BUTTON"\|\|!f)return;C(!1),R.current=new Date;let a=c.current?Number.parseInt(getComputedStyle(c.current).getPropertyValue("--swipe-amount").slice(0,-2),10):null;if(!ee(r.target,!1)\|\|!a\|\|Number.isNaN(a)\|\|H.current===null)return;let s=r.clientY,v=R.current.getTime()-H.current.getTime(),w=k.current-s,x=Math.abs(w)/v;if(w>0){ne(),l==null\|\|l(r,!1);return}if(x>.4){te(),l==null\|\|l(r,!1);return}let L=Math.min(((D=c.current)==null?void 0:D.getBoundingClientRect().height)\|\|0,window.innerHeight);if(a>=Lb){te(),l==null\|\|l(r,!1);return}l==null\|\|l(r,!0),ne()}function we(r){let a=document.querySelector("[vaul-drawer-wrapper]");!a\|\|!i\|\|(r.animationName==="show-dialog"?(p(document.body,{background:"black"},!0),p(a,{borderRadius:`${de}px`,overflow:"hidden",transform:`scale(${A()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`})):r.animationName==="hide-dialog"&&(J(a,"transform"),J(a,"borderRadius"),p(a,{transitionProperty:"transform, border-radius",transitionDuration:`${E.DURATION}s`,transitionTimingFunction:`cubic-bezier(${E.EASE.join(",")})`})))}function Te(r){let a=r?(window.innerWidth-16)/window.innerWidth:1,s=r?-16:0;window.clearTimeout(Q.current),p(c.current,{transition:`transform ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,transform:`scale(${a}) translateY(${s}px)`}),r\|\|(Q.current=setTimeout(()=>{p(c.current,{transition:"none",transform:"translateY(var(--swipe-amount))"})},500))}function he(r,a){if(a<0)return;let s=(window.innerWidth-16)/window.innerWidth,v=s+a(1-s),w=-16+a*16;p(c.current,{transform:`scale(${v}) translateY(${w}px)`,transition:"none"})}function Ee(r,a){let s=a?(window.innerWidth-16)/window.innerWidth:1,v=a?-16:0;a&&p(c.current,{transition:`transform ${E.DURATION}s cubic-bezier(${E.EASE.join(",")})`,transform:`scale(${s}) translateY(${v}px)`})}return d.default.createElement(g.Root,{open:y,onOpenChange:r=>{m(r)}},d.default.createElement(F.Provider,{value:{drawerRef:c,overlayRef:h,onAnimationStart:we,onPress:pe,onRelease:ve,onDrag:ge,dismissible:T,isOpen:y,onNestedDrag:he,onNestedOpenChange:Te,onNestedRelease:Ee,keyboardIsOpen:I}},o))}var _e=d.default.forwardRef(function({children:e,...t},n){let{overlayRef:o,onRelease:i}=V(),u=G(n,o);return d.default.createElement(g.Overlay,{onMouseUp:i,ref:u,"vaul-overlay":"",...t})}),Ke=d.default.forwardRef(function({children:e,onOpenAutoFocus:t,onPointerDownOutside:n,onAnimationEnd:o,...i},u){let{drawerRef:l,onPress:b,onRelease:S,onAnimationStart:T,onDrag:y,dismissible:m,isOpen:f,keyboardIsOpen:C}=V(),h=G(u,l),H=d.default.useRef(null);return d.default.createElement(g.Content,{onAnimationStart:R=>{window.clearTimeout(H.current),H.current=setTimeout(()=>{o==null\|\|o(f)},Be),T(R)},onPointerDown:b,onPointerUp:S,onPointerMove:y,onOpenAutoFocus:R=>{t?t(R):R.preventDefault()},onPointerDownOutside:R=>{C.current&&(C.current=!1,p(l.current,{"--hide-to":"200%"})),m\|\|R.preventDefault(),n==null\|\|n(R)},ref:h,...i,"vaul-drawer":""},e)});function Xe({children:e,onDrag:t,onOpenChange:n}){let{onNestedDrag:o,onNestedOpenChange:i,onNestedRelease:u}=V();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return d.default.createElement(me,{onDrag:(l,b)=>{o(l,b),t==null\|\|t(l,b)},onOpenChange:l=>{i(l),n==null\|\|n(l)},onRelease:u},e)}var Ge=Object.assign({},{Root:me,NestedRoot:Xe,Content:Ke,Overlay:_e,Trigger:g.Trigger,Portal:g.Portal,Close:g.Close,Title:g.Title,Description:g.Description});0&&(module.exports={Drawer});
		//# sourceMappingURL=index.js.map

vaul - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics