index.js 79 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683
  1. 'use client';
  2. function __insertCSS(code) {
  3. if (!code || typeof document == 'undefined') return
  4. let head = document.head || document.getElementsByTagName('head')[0]
  5. let style = document.createElement('style')
  6. style.type = 'text/css'
  7. head.appendChild(style)
  8. ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
  9. }
  10. Object.defineProperty(exports, '__esModule', { value: true });
  11. var DialogPrimitive = require('@radix-ui/react-dialog');
  12. var React = require('react');
  13. function _interopNamespace(e) {
  14. if (e && e.__esModule) return e;
  15. var n = Object.create(null);
  16. if (e) {
  17. Object.keys(e).forEach(function (k) {
  18. if (k !== 'default') {
  19. var d = Object.getOwnPropertyDescriptor(e, k);
  20. Object.defineProperty(n, k, d.get ? d : {
  21. enumerable: true,
  22. get: function () { return e[k]; }
  23. });
  24. }
  25. });
  26. }
  27. n.default = e;
  28. return n;
  29. }
  30. var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
  31. var React__namespace = /*#__PURE__*/_interopNamespace(React);
  32. const DrawerContext = React__namespace.default.createContext({
  33. drawerRef: {
  34. current: null
  35. },
  36. overlayRef: {
  37. current: null
  38. },
  39. onPress: ()=>{},
  40. onRelease: ()=>{},
  41. onDrag: ()=>{},
  42. onNestedDrag: ()=>{},
  43. onNestedOpenChange: ()=>{},
  44. onNestedRelease: ()=>{},
  45. openProp: undefined,
  46. dismissible: false,
  47. isOpen: false,
  48. isDragging: false,
  49. keyboardIsOpen: {
  50. current: false
  51. },
  52. snapPointsOffset: null,
  53. snapPoints: null,
  54. handleOnly: false,
  55. modal: false,
  56. shouldFade: false,
  57. activeSnapPoint: null,
  58. onOpenChange: ()=>{},
  59. setActiveSnapPoint: ()=>{},
  60. closeDrawer: ()=>{},
  61. direction: 'bottom',
  62. shouldAnimate: {
  63. current: true
  64. },
  65. shouldScaleBackground: false,
  66. setBackgroundColorOnScale: true,
  67. noBodyStyles: false,
  68. container: null,
  69. autoFocus: false
  70. });
  71. const useDrawerContext = ()=>{
  72. const context = React__namespace.default.useContext(DrawerContext);
  73. if (!context) {
  74. throw new Error('useDrawerContext must be used within a Drawer.Root');
  75. }
  76. return context;
  77. };
  78. __insertCSS("[data-vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32, .72, 0, 1);animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=open]{animation-name:slideFromBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=closed]{animation-name:slideToBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=open]{animation-name:slideFromTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=closed]{animation-name:slideToTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=open]{animation-name:slideFromLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=closed]{animation-name:slideToLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=open]{animation-name:slideFromRight}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=closed]{animation-name:slideToRight}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--initial-transform,100%),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--initial-transform,100%),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-overlay][data-vaul-snap-points=false]{animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-overlay][data-vaul-snap-points=false][data-state=open]{animation-name:fadeIn}[data-vaul-overlay][data-state=closed]{animation-name:fadeOut}[data-vaul-animate=false]{animation:none!important}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:0;transition:opacity .5s cubic-bezier(.32, .72, 0, 1)}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:1}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:'';position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-overlay][data-vaul-snap-points=true]:not([data-vaul-snap-points-overlay=true]):not(\n[data-state=closed]\n){opacity:0}[data-vaul-overlay][data-vaul-snap-points-overlay=true]{opacity:1}[data-vaul-handle]{display:block;position:relative;opacity:.7;background:#e2e2e4;margin-left:auto;margin-right:auto;height:5px;width:32px;border-radius:1rem;touch-action:pan-y}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}[data-vaul-handle-hitarea]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,2.75rem);height:max(100%,2.75rem);touch-action:inherit}@media (hover:hover) and (pointer:fine){[data-vaul-drawer]{user-select:none}}@media (pointer:fine){[data-vaul-handle-hitarea]:{width:100%;height:100%}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,var(--initial-transform,100%),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,var(--initial-transform,100%),0)}}@keyframes slideFromTop{from{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}}@keyframes slideFromLeft{from{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}}@keyframes slideFromRight{from{transform:translate3d(var(--initial-transform,100%),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(var(--initial-transform,100%),0,0)}}");
  79. function isMobileFirefox() {
  80. const userAgent = navigator.userAgent;
  81. return typeof window !== 'undefined' && (/Firefox/.test(userAgent) && /Mobile/.test(userAgent) || // Android Firefox
  82. /FxiOS/.test(userAgent) // iOS Firefox
  83. );
  84. }
  85. function isMac() {
  86. return testPlatform(/^Mac/);
  87. }
  88. function isIPhone() {
  89. return testPlatform(/^iPhone/);
  90. }
  91. function isSafari() {
  92. return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  93. }
  94. function isIPad() {
  95. return testPlatform(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
  96. isMac() && navigator.maxTouchPoints > 1;
  97. }
  98. function isIOS() {
  99. return isIPhone() || isIPad();
  100. }
  101. function testPlatform(re) {
  102. return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
  103. }
  104. // This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
  105. const KEYBOARD_BUFFER = 24;
  106. const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
  107. function chain$1(...callbacks) {
  108. return (...args)=>{
  109. for (let callback of callbacks){
  110. if (typeof callback === 'function') {
  111. callback(...args);
  112. }
  113. }
  114. };
  115. }
  116. // @ts-ignore
  117. const visualViewport = typeof document !== 'undefined' && window.visualViewport;
  118. function isScrollable(node) {
  119. let style = window.getComputedStyle(node);
  120. return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
  121. }
  122. function getScrollParent(node) {
  123. if (isScrollable(node)) {
  124. node = node.parentElement;
  125. }
  126. while(node && !isScrollable(node)){
  127. node = node.parentElement;
  128. }
  129. return node || document.scrollingElement || document.documentElement;
  130. }
  131. // HTML input types that do not cause the software keyboard to appear.
  132. const nonTextInputTypes = new Set([
  133. 'checkbox',
  134. 'radio',
  135. 'range',
  136. 'color',
  137. 'file',
  138. 'image',
  139. 'button',
  140. 'submit',
  141. 'reset'
  142. ]);
  143. // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
  144. let preventScrollCount = 0;
  145. let restore;
  146. /**
  147. * Prevents scrolling on the document body on mount, and
  148. * restores it on unmount. Also ensures that content does not
  149. * shift due to the scrollbars disappearing.
  150. */ function usePreventScroll(options = {}) {
  151. let { isDisabled } = options;
  152. useIsomorphicLayoutEffect(()=>{
  153. if (isDisabled) {
  154. return;
  155. }
  156. preventScrollCount++;
  157. if (preventScrollCount === 1) {
  158. if (isIOS()) {
  159. restore = preventScrollMobileSafari();
  160. }
  161. }
  162. return ()=>{
  163. preventScrollCount--;
  164. if (preventScrollCount === 0) {
  165. restore == null ? void 0 : restore();
  166. }
  167. };
  168. }, [
  169. isDisabled
  170. ]);
  171. }
  172. // Mobile Safari is a whole different beast. Even with overflow: hidden,
  173. // it still scrolls the page in many situations:
  174. //
  175. // 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
  176. // 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
  177. // it, so it becomes scrollable.
  178. // 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
  179. // This may cause even fixed position elements to scroll off the screen.
  180. // 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
  181. // scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
  182. //
  183. // In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
  184. //
  185. // 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
  186. // on the window.
  187. // 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
  188. // top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
  189. // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
  190. // 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
  191. // of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
  192. // into view ourselves, without scrolling the whole page.
  193. // 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
  194. // same visually, but makes the actual scroll position always zero. This is required to make all of the
  195. // above work or Safari will still try to scroll the page when focusing an input.
  196. // 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
  197. // to navigate to an input with the next/previous buttons that's outside a modal.
  198. function preventScrollMobileSafari() {
  199. let scrollable;
  200. let lastY = 0;
  201. let onTouchStart = (e)=>{
  202. // Store the nearest scrollable parent element from the element that the user touched.
  203. scrollable = getScrollParent(e.target);
  204. if (scrollable === document.documentElement && scrollable === document.body) {
  205. return;
  206. }
  207. lastY = e.changedTouches[0].pageY;
  208. };
  209. let onTouchMove = (e)=>{
  210. // Prevent scrolling the window.
  211. if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
  212. e.preventDefault();
  213. return;
  214. }
  215. // Prevent scrolling up when at the top and scrolling down when at the bottom
  216. // of a nested scrollable area, otherwise mobile Safari will start scrolling
  217. // the window instead. Unfortunately, this disables bounce scrolling when at
  218. // the top but it's the best we can do.
  219. let y = e.changedTouches[0].pageY;
  220. let scrollTop = scrollable.scrollTop;
  221. let bottom = scrollable.scrollHeight - scrollable.clientHeight;
  222. if (bottom === 0) {
  223. return;
  224. }
  225. if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
  226. e.preventDefault();
  227. }
  228. lastY = y;
  229. };
  230. let onTouchEnd = (e)=>{
  231. let target = e.target;
  232. // Apply this change if we're not already focused on the target element
  233. if (isInput(target) && target !== document.activeElement) {
  234. e.preventDefault();
  235. // Apply a transform to trick Safari into thinking the input is at the top of the page
  236. // so it doesn't try to scroll it into view. When tapping on an input, this needs to
  237. // be done before the "focus" event, so we have to focus the element ourselves.
  238. target.style.transform = 'translateY(-2000px)';
  239. target.focus();
  240. requestAnimationFrame(()=>{
  241. target.style.transform = '';
  242. });
  243. }
  244. };
  245. let onFocus = (e)=>{
  246. let target = e.target;
  247. if (isInput(target)) {
  248. // Transform also needs to be applied in the focus event in cases where focus moves
  249. // other than tapping on an input directly, e.g. the next/previous buttons in the
  250. // software keyboard. In these cases, it seems applying the transform in the focus event
  251. // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
  252. target.style.transform = 'translateY(-2000px)';
  253. requestAnimationFrame(()=>{
  254. target.style.transform = '';
  255. // This will have prevented the browser from scrolling the focused element into view,
  256. // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
  257. if (visualViewport) {
  258. if (visualViewport.height < window.innerHeight) {
  259. // If the keyboard is already visible, do this after one additional frame
  260. // to wait for the transform to be removed.
  261. requestAnimationFrame(()=>{
  262. scrollIntoView(target);
  263. });
  264. } else {
  265. // Otherwise, wait for the visual viewport to resize before scrolling so we can
  266. // measure the correct position to scroll to.
  267. visualViewport.addEventListener('resize', ()=>scrollIntoView(target), {
  268. once: true
  269. });
  270. }
  271. }
  272. });
  273. }
  274. };
  275. let onWindowScroll = ()=>{
  276. // Last resort. If the window scrolled, scroll it back to the top.
  277. // It should always be at the top because the body will have a negative margin (see below).
  278. window.scrollTo(0, 0);
  279. };
  280. // Record the original scroll position so we can restore it.
  281. // Then apply a negative margin to the body to offset it by the scroll position. This will
  282. // enable us to scroll the window to the top, which is required for the rest of this to work.
  283. let scrollX = window.pageXOffset;
  284. let scrollY = window.pageYOffset;
  285. let restoreStyles = chain$1(setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`));
  286. // Scroll to the top. The negative margin on the body will make this appear the same.
  287. window.scrollTo(0, 0);
  288. let removeEvents = chain$1(addEvent(document, 'touchstart', onTouchStart, {
  289. passive: false,
  290. capture: true
  291. }), addEvent(document, 'touchmove', onTouchMove, {
  292. passive: false,
  293. capture: true
  294. }), addEvent(document, 'touchend', onTouchEnd, {
  295. passive: false,
  296. capture: true
  297. }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
  298. return ()=>{
  299. // Restore styles and scroll the page back to where it was.
  300. restoreStyles();
  301. removeEvents();
  302. window.scrollTo(scrollX, scrollY);
  303. };
  304. }
  305. // Sets a CSS property on an element, and returns a function to revert it to the previous value.
  306. function setStyle(element, style, value) {
  307. // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
  308. // @ts-ignore
  309. let cur = element.style[style];
  310. // @ts-ignore
  311. element.style[style] = value;
  312. return ()=>{
  313. // @ts-ignore
  314. element.style[style] = cur;
  315. };
  316. }
  317. // Adds an event listener to an element, and returns a function to remove it.
  318. function addEvent(target, event, handler, options) {
  319. // @ts-ignore
  320. target.addEventListener(event, handler, options);
  321. return ()=>{
  322. // @ts-ignore
  323. target.removeEventListener(event, handler, options);
  324. };
  325. }
  326. function scrollIntoView(target) {
  327. let root = document.scrollingElement || document.documentElement;
  328. while(target && target !== root){
  329. // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
  330. let scrollable = getScrollParent(target);
  331. if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
  332. let scrollableTop = scrollable.getBoundingClientRect().top;
  333. let targetTop = target.getBoundingClientRect().top;
  334. let targetBottom = target.getBoundingClientRect().bottom;
  335. // Buffer is needed for some edge cases
  336. const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
  337. if (targetBottom > keyboardHeight) {
  338. scrollable.scrollTop += targetTop - scrollableTop;
  339. }
  340. }
  341. // @ts-ignore
  342. target = scrollable.parentElement;
  343. }
  344. }
  345. function isInput(target) {
  346. return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
  347. }
  348. // This code comes from https://github.com/radix-ui/primitives/tree/main/packages/react/compose-refs
  349. /**
  350. * Set a given ref to a given value
  351. * This utility takes care of different types of refs: callback refs and RefObject(s)
  352. */ function setRef(ref, value) {
  353. if (typeof ref === 'function') {
  354. ref(value);
  355. } else if (ref !== null && ref !== undefined) {
  356. ref.current = value;
  357. }
  358. }
  359. /**
  360. * A utility to compose multiple refs together
  361. * Accepts callback refs and RefObject(s)
  362. */ function composeRefs(...refs) {
  363. return (node)=>refs.forEach((ref)=>setRef(ref, node));
  364. }
  365. /**
  366. * A custom hook that composes multiple refs
  367. * Accepts callback refs and RefObject(s)
  368. */ function useComposedRefs(...refs) {
  369. // eslint-disable-next-line react-hooks/exhaustive-deps
  370. return React__namespace.useCallback(composeRefs(...refs), refs);
  371. }
  372. const cache = new WeakMap();
  373. function set(el, styles, ignoreCache = false) {
  374. if (!el || !(el instanceof HTMLElement)) return;
  375. let originalStyles = {};
  376. Object.entries(styles).forEach(([key, value])=>{
  377. if (key.startsWith('--')) {
  378. el.style.setProperty(key, value);
  379. return;
  380. }
  381. originalStyles[key] = el.style[key];
  382. el.style[key] = value;
  383. });
  384. if (ignoreCache) return;
  385. cache.set(el, originalStyles);
  386. }
  387. function reset(el, prop) {
  388. if (!el || !(el instanceof HTMLElement)) return;
  389. let originalStyles = cache.get(el);
  390. if (!originalStyles) {
  391. return;
  392. }
  393. {
  394. el.style[prop] = originalStyles[prop];
  395. }
  396. }
  397. const isVertical = (direction)=>{
  398. switch(direction){
  399. case 'top':
  400. case 'bottom':
  401. return true;
  402. case 'left':
  403. case 'right':
  404. return false;
  405. default:
  406. return direction;
  407. }
  408. };
  409. function getTranslate(element, direction) {
  410. if (!element) {
  411. return null;
  412. }
  413. const style = window.getComputedStyle(element);
  414. const transform = // @ts-ignore
  415. style.transform || style.webkitTransform || style.mozTransform;
  416. let mat = transform.match(/^matrix3d\((.+)\)$/);
  417. if (mat) {
  418. // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
  419. return parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12]);
  420. }
  421. // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
  422. mat = transform.match(/^matrix\((.+)\)$/);
  423. return mat ? parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null;
  424. }
  425. function dampenValue(v) {
  426. return 8 * (Math.log(v + 1) - 2);
  427. }
  428. function assignStyle(element, style) {
  429. if (!element) return ()=>{};
  430. const prevStyle = element.style.cssText;
  431. Object.assign(element.style, style);
  432. return ()=>{
  433. element.style.cssText = prevStyle;
  434. };
  435. }
  436. /**
  437. * Receives functions as arguments and returns a new function that calls all.
  438. */ function chain(...fns) {
  439. return (...args)=>{
  440. for (const fn of fns){
  441. if (typeof fn === 'function') {
  442. // @ts-ignore
  443. fn(...args);
  444. }
  445. }
  446. };
  447. }
  448. const TRANSITIONS = {
  449. DURATION: 0.5,
  450. EASE: [
  451. 0.32,
  452. 0.72,
  453. 0,
  454. 1
  455. ]
  456. };
  457. const VELOCITY_THRESHOLD = 0.4;
  458. const CLOSE_THRESHOLD = 0.25;
  459. const SCROLL_LOCK_TIMEOUT = 100;
  460. const BORDER_RADIUS = 8;
  461. const NESTED_DISPLACEMENT = 16;
  462. const WINDOW_TOP_OFFSET = 26;
  463. const DRAG_CLASS = 'vaul-dragging';
  464. // This code comes from https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
  465. function useCallbackRef(callback) {
  466. const callbackRef = React__namespace.default.useRef(callback);
  467. React__namespace.default.useEffect(()=>{
  468. callbackRef.current = callback;
  469. });
  470. // https://github.com/facebook/react/issues/19240
  471. return React__namespace.default.useMemo(()=>(...args)=>callbackRef.current == null ? void 0 : callbackRef.current.call(callbackRef, ...args), []);
  472. }
  473. function useUncontrolledState({ defaultProp, onChange }) {
  474. const uncontrolledState = React__namespace.default.useState(defaultProp);
  475. const [value] = uncontrolledState;
  476. const prevValueRef = React__namespace.default.useRef(value);
  477. const handleChange = useCallbackRef(onChange);
  478. React__namespace.default.useEffect(()=>{
  479. if (prevValueRef.current !== value) {
  480. handleChange(value);
  481. prevValueRef.current = value;
  482. }
  483. }, [
  484. value,
  485. prevValueRef,
  486. handleChange
  487. ]);
  488. return uncontrolledState;
  489. }
  490. function useControllableState({ prop, defaultProp, onChange = ()=>{} }) {
  491. const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
  492. defaultProp,
  493. onChange
  494. });
  495. const isControlled = prop !== undefined;
  496. const value = isControlled ? prop : uncontrolledProp;
  497. const handleChange = useCallbackRef(onChange);
  498. const setValue = React__namespace.default.useCallback((nextValue)=>{
  499. if (isControlled) {
  500. const setter = nextValue;
  501. const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
  502. if (value !== prop) handleChange(value);
  503. } else {
  504. setUncontrolledProp(nextValue);
  505. }
  506. }, [
  507. isControlled,
  508. prop,
  509. setUncontrolledProp,
  510. handleChange
  511. ]);
  512. return [
  513. value,
  514. setValue
  515. ];
  516. }
  517. function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = 'bottom', container, snapToSequentialPoint }) {
  518. const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
  519. prop: activeSnapPointProp,
  520. defaultProp: snapPoints == null ? void 0 : snapPoints[0],
  521. onChange: setActiveSnapPointProp
  522. });
  523. const [windowDimensions, setWindowDimensions] = React__namespace.default.useState(typeof window !== 'undefined' ? {
  524. innerWidth: window.innerWidth,
  525. innerHeight: window.innerHeight
  526. } : undefined);
  527. React__namespace.default.useEffect(()=>{
  528. function onResize() {
  529. setWindowDimensions({
  530. innerWidth: window.innerWidth,
  531. innerHeight: window.innerHeight
  532. });
  533. }
  534. window.addEventListener('resize', onResize);
  535. return ()=>window.removeEventListener('resize', onResize);
  536. }, []);
  537. const isLastSnapPoint = React__namespace.default.useMemo(()=>activeSnapPoint === (snapPoints == null ? void 0 : snapPoints[snapPoints.length - 1]) || null, [
  538. snapPoints,
  539. activeSnapPoint
  540. ]);
  541. const activeSnapPointIndex = React__namespace.default.useMemo(()=>{
  542. var _snapPoints_findIndex;
  543. return (_snapPoints_findIndex = snapPoints == null ? void 0 : snapPoints.findIndex((snapPoint)=>snapPoint === activeSnapPoint)) != null ? _snapPoints_findIndex : null;
  544. }, [
  545. snapPoints,
  546. activeSnapPoint
  547. ]);
  548. const shouldFade = snapPoints && snapPoints.length > 0 && (fadeFromIndex || fadeFromIndex === 0) && !Number.isNaN(fadeFromIndex) && snapPoints[fadeFromIndex] === activeSnapPoint || !snapPoints;
  549. const snapPointsOffset = React__namespace.default.useMemo(()=>{
  550. const containerSize = container ? {
  551. width: container.getBoundingClientRect().width,
  552. height: container.getBoundingClientRect().height
  553. } : typeof window !== 'undefined' ? {
  554. width: window.innerWidth,
  555. height: window.innerHeight
  556. } : {
  557. width: 0,
  558. height: 0
  559. };
  560. var _snapPoints_map;
  561. return (_snapPoints_map = snapPoints == null ? void 0 : snapPoints.map((snapPoint)=>{
  562. const isPx = typeof snapPoint === 'string';
  563. let snapPointAsNumber = 0;
  564. if (isPx) {
  565. snapPointAsNumber = parseInt(snapPoint, 10);
  566. }
  567. if (isVertical(direction)) {
  568. const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
  569. if (windowDimensions) {
  570. return direction === 'bottom' ? containerSize.height - height : -containerSize.height + height;
  571. }
  572. return height;
  573. }
  574. const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
  575. if (windowDimensions) {
  576. return direction === 'right' ? containerSize.width - width : -containerSize.width + width;
  577. }
  578. return width;
  579. })) != null ? _snapPoints_map : [];
  580. }, [
  581. snapPoints,
  582. windowDimensions,
  583. container
  584. ]);
  585. const activeSnapPointOffset = React__namespace.default.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset == null ? void 0 : snapPointsOffset[activeSnapPointIndex] : null, [
  586. snapPointsOffset,
  587. activeSnapPointIndex
  588. ]);
  589. const snapToPoint = React__namespace.default.useCallback((dimension)=>{
  590. var _snapPointsOffset_findIndex;
  591. const newSnapPointIndex = (_snapPointsOffset_findIndex = snapPointsOffset == null ? void 0 : snapPointsOffset.findIndex((snapPointDim)=>snapPointDim === dimension)) != null ? _snapPointsOffset_findIndex : null;
  592. onSnapPointChange(newSnapPointIndex);
  593. set(drawerRef.current, {
  594. transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  595. transform: isVertical(direction) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`
  596. });
  597. if (snapPointsOffset && newSnapPointIndex !== snapPointsOffset.length - 1 && fadeFromIndex !== undefined && newSnapPointIndex !== fadeFromIndex && newSnapPointIndex < fadeFromIndex) {
  598. set(overlayRef.current, {
  599. transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  600. opacity: '0'
  601. });
  602. } else {
  603. set(overlayRef.current, {
  604. transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  605. opacity: '1'
  606. });
  607. }
  608. setActiveSnapPoint(snapPoints == null ? void 0 : snapPoints[Math.max(newSnapPointIndex, 0)]);
  609. }, [
  610. drawerRef.current,
  611. snapPoints,
  612. snapPointsOffset,
  613. fadeFromIndex,
  614. overlayRef,
  615. setActiveSnapPoint
  616. ]);
  617. React__namespace.default.useEffect(()=>{
  618. if (activeSnapPoint || activeSnapPointProp) {
  619. var _snapPoints_findIndex;
  620. const newIndex = (_snapPoints_findIndex = snapPoints == null ? void 0 : snapPoints.findIndex((snapPoint)=>snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint)) != null ? _snapPoints_findIndex : -1;
  621. if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === 'number') {
  622. snapToPoint(snapPointsOffset[newIndex]);
  623. }
  624. }
  625. }, [
  626. activeSnapPoint,
  627. activeSnapPointProp,
  628. snapPoints,
  629. snapPointsOffset,
  630. snapToPoint
  631. ]);
  632. function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
  633. if (fadeFromIndex === undefined) return;
  634. const currentPosition = direction === 'bottom' || direction === 'right' ? (activeSnapPointOffset != null ? activeSnapPointOffset : 0) - draggedDistance : (activeSnapPointOffset != null ? activeSnapPointOffset : 0) + draggedDistance;
  635. const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
  636. const isFirst = activeSnapPointIndex === 0;
  637. const hasDraggedUp = draggedDistance > 0;
  638. if (isOverlaySnapPoint) {
  639. set(overlayRef.current, {
  640. transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
  641. });
  642. }
  643. if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
  644. if (dismissible) closeDrawer();
  645. else snapToPoint(snapPointsOffset[0]); // snap to initial point
  646. return;
  647. }
  648. if (!snapToSequentialPoint && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints) {
  649. snapToPoint(snapPointsOffset[snapPoints.length - 1]);
  650. return;
  651. }
  652. // Find the closest snap point to the current position
  653. const closestSnapPoint = snapPointsOffset == null ? void 0 : snapPointsOffset.reduce((prev, curr)=>{
  654. if (typeof prev !== 'number' || typeof curr !== 'number') return prev;
  655. return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
  656. });
  657. const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
  658. if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
  659. const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
  660. // Don't do anything if we swipe upwards while being on the last snap point
  661. if (dragDirection > 0 && isLastSnapPoint && snapPoints) {
  662. snapToPoint(snapPointsOffset[snapPoints.length - 1]);
  663. return;
  664. }
  665. if (isFirst && dragDirection < 0 && dismissible) {
  666. closeDrawer();
  667. }
  668. if (activeSnapPointIndex === null) return;
  669. snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
  670. return;
  671. }
  672. snapToPoint(closestSnapPoint);
  673. }
  674. function onDrag({ draggedDistance }) {
  675. if (activeSnapPointOffset === null) return;
  676. const newValue = direction === 'bottom' || direction === 'right' ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
  677. // Don't do anything if we exceed the last(biggest) snap point
  678. if ((direction === 'bottom' || direction === 'right') && newValue < snapPointsOffset[snapPointsOffset.length - 1]) {
  679. return;
  680. }
  681. if ((direction === 'top' || direction === 'left') && newValue > snapPointsOffset[snapPointsOffset.length - 1]) {
  682. return;
  683. }
  684. set(drawerRef.current, {
  685. transform: isVertical(direction) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)`
  686. });
  687. }
  688. function getPercentageDragged(absDraggedDistance, isDraggingDown) {
  689. if (!snapPoints || typeof activeSnapPointIndex !== 'number' || !snapPointsOffset || fadeFromIndex === undefined) return null;
  690. // If this is true we are dragging to a snap point that is supposed to have an overlay
  691. const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
  692. const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex;
  693. if (isOverlaySnapPointOrHigher && isDraggingDown) {
  694. return 0;
  695. }
  696. // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
  697. if (isOverlaySnapPoint && !isDraggingDown) return 1;
  698. if (!shouldFade && !isOverlaySnapPoint) return null;
  699. // Either fadeFrom index or the one before
  700. const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex + 1 : activeSnapPointIndex - 1;
  701. // Get the distance from overlaySnapPoint to the one before or vice-versa to calculate the opacity percentage accordingly
  702. const snapPointDistance = isOverlaySnapPoint ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1] : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
  703. const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
  704. if (isOverlaySnapPoint) {
  705. return 1 - percentageDragged;
  706. } else {
  707. return percentageDragged;
  708. }
  709. }
  710. return {
  711. isLastSnapPoint,
  712. activeSnapPoint,
  713. shouldFade,
  714. getPercentageDragged,
  715. setActiveSnapPoint,
  716. activeSnapPointIndex,
  717. onRelease,
  718. onDrag,
  719. snapPointsOffset
  720. };
  721. }
  722. const noop = ()=>()=>{};
  723. function useScaleBackground() {
  724. const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
  725. const timeoutIdRef = React__namespace.default.useRef(null);
  726. const initialBackgroundColor = React.useMemo(()=>document.body.style.backgroundColor, []);
  727. function getScale() {
  728. return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
  729. }
  730. React__namespace.default.useEffect(()=>{
  731. if (isOpen && shouldScaleBackground) {
  732. if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
  733. const wrapper = document.querySelector('[data-vaul-drawer-wrapper]') || document.querySelector('[vaul-drawer-wrapper]');
  734. if (!wrapper) return;
  735. chain(setBackgroundColorOnScale && !noBodyStyles ? assignStyle(document.body, {
  736. background: 'black'
  737. }) : noop, assignStyle(wrapper, {
  738. transformOrigin: isVertical(direction) ? 'top' : 'left',
  739. transitionProperty: 'transform, border-radius',
  740. transitionDuration: `${TRANSITIONS.DURATION}s`,
  741. transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`
  742. }));
  743. const wrapperStylesCleanup = assignStyle(wrapper, {
  744. borderRadius: `${BORDER_RADIUS}px`,
  745. overflow: 'hidden',
  746. ...isVertical(direction) ? {
  747. transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`
  748. } : {
  749. transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`
  750. }
  751. });
  752. return ()=>{
  753. wrapperStylesCleanup();
  754. timeoutIdRef.current = window.setTimeout(()=>{
  755. if (initialBackgroundColor) {
  756. document.body.style.background = initialBackgroundColor;
  757. } else {
  758. document.body.style.removeProperty('background');
  759. }
  760. }, TRANSITIONS.DURATION * 1000);
  761. };
  762. }
  763. }, [
  764. isOpen,
  765. shouldScaleBackground,
  766. initialBackgroundColor
  767. ]);
  768. }
  769. let previousBodyPosition = null;
  770. /**
  771. * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
  772. * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
  773. * Issues that this hook solves:
  774. * https://github.com/emilkowalski/vaul/issues/435
  775. * https://github.com/emilkowalski/vaul/issues/433
  776. * And more that I discovered, but were just not reported.
  777. */ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles }) {
  778. const [activeUrl, setActiveUrl] = React__namespace.default.useState(()=>typeof window !== 'undefined' ? window.location.href : '');
  779. const scrollPos = React__namespace.default.useRef(0);
  780. const setPositionFixed = React__namespace.default.useCallback(()=>{
  781. // All browsers on iOS will return true here.
  782. if (!isSafari()) return;
  783. // If previousBodyPosition is already set, don't set it again.
  784. if (previousBodyPosition === null && isOpen && !noBodyStyles) {
  785. previousBodyPosition = {
  786. position: document.body.style.position,
  787. top: document.body.style.top,
  788. left: document.body.style.left,
  789. height: document.body.style.height,
  790. right: 'unset'
  791. };
  792. // Update the dom inside an animation frame
  793. const { scrollX, innerHeight } = window;
  794. document.body.style.setProperty('position', 'fixed', 'important');
  795. Object.assign(document.body.style, {
  796. top: `${-scrollPos.current}px`,
  797. left: `${-scrollX}px`,
  798. right: '0px',
  799. height: 'auto'
  800. });
  801. window.setTimeout(()=>window.requestAnimationFrame(()=>{
  802. // Attempt to check if the bottom bar appeared due to the position change
  803. const bottomBarHeight = innerHeight - window.innerHeight;
  804. if (bottomBarHeight && scrollPos.current >= innerHeight) {
  805. // Move the content further up so that the bottom bar doesn't hide it
  806. document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
  807. }
  808. }), 300);
  809. }
  810. }, [
  811. isOpen
  812. ]);
  813. const restorePositionSetting = React__namespace.default.useCallback(()=>{
  814. // All browsers on iOS will return true here.
  815. if (!isSafari()) return;
  816. if (previousBodyPosition !== null && !noBodyStyles) {
  817. // Convert the position from "px" to Int
  818. const y = -parseInt(document.body.style.top, 10);
  819. const x = -parseInt(document.body.style.left, 10);
  820. // Restore styles
  821. Object.assign(document.body.style, previousBodyPosition);
  822. window.requestAnimationFrame(()=>{
  823. if (preventScrollRestoration && activeUrl !== window.location.href) {
  824. setActiveUrl(window.location.href);
  825. return;
  826. }
  827. window.scrollTo(x, y);
  828. });
  829. previousBodyPosition = null;
  830. }
  831. }, [
  832. activeUrl
  833. ]);
  834. React__namespace.default.useEffect(()=>{
  835. function onScroll() {
  836. scrollPos.current = window.scrollY;
  837. }
  838. onScroll();
  839. window.addEventListener('scroll', onScroll);
  840. return ()=>{
  841. window.removeEventListener('scroll', onScroll);
  842. };
  843. }, []);
  844. React__namespace.default.useEffect(()=>{
  845. if (!modal) return;
  846. return ()=>{
  847. if (typeof document === 'undefined') return;
  848. // Another drawer is opened, safe to ignore the execution
  849. const hasDrawerOpened = !!document.querySelector('[data-vaul-drawer]');
  850. if (hasDrawerOpened) return;
  851. restorePositionSetting();
  852. };
  853. }, [
  854. modal,
  855. restorePositionSetting
  856. ]);
  857. React__namespace.default.useEffect(()=>{
  858. if (nested || !hasBeenOpened) return;
  859. // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
  860. if (isOpen) {
  861. // avoid for standalone mode (PWA)
  862. const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  863. !isStandalone && setPositionFixed();
  864. if (!modal) {
  865. window.setTimeout(()=>{
  866. restorePositionSetting();
  867. }, 500);
  868. }
  869. } else {
  870. restorePositionSetting();
  871. }
  872. }, [
  873. isOpen,
  874. hasBeenOpened,
  875. activeUrl,
  876. modal,
  877. nested,
  878. setPositionFixed,
  879. restorePositionSetting
  880. ]);
  881. return {
  882. restorePositionSetting
  883. };
  884. }
  885. function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = 'bottom', defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false }) {
  886. var _drawerRef_current, _drawerRef_current1;
  887. const [isOpen = false, setIsOpen] = useControllableState({
  888. defaultProp: defaultOpen,
  889. prop: openProp,
  890. onChange: (o)=>{
  891. onOpenChange == null ? void 0 : onOpenChange(o);
  892. if (!o && !nested) {
  893. restorePositionSetting();
  894. }
  895. setTimeout(()=>{
  896. onAnimationEnd == null ? void 0 : onAnimationEnd(o);
  897. }, TRANSITIONS.DURATION * 1000);
  898. if (o && !modal) {
  899. if (typeof window !== 'undefined') {
  900. window.requestAnimationFrame(()=>{
  901. document.body.style.pointerEvents = 'auto';
  902. });
  903. }
  904. }
  905. if (!o) {
  906. // This will be removed when the exit animation ends (`500ms`)
  907. document.body.style.pointerEvents = 'auto';
  908. }
  909. }
  910. });
  911. const [hasBeenOpened, setHasBeenOpened] = React__namespace.default.useState(false);
  912. const [isDragging, setIsDragging] = React__namespace.default.useState(false);
  913. const [justReleased, setJustReleased] = React__namespace.default.useState(false);
  914. const overlayRef = React__namespace.default.useRef(null);
  915. const openTime = React__namespace.default.useRef(null);
  916. const dragStartTime = React__namespace.default.useRef(null);
  917. const dragEndTime = React__namespace.default.useRef(null);
  918. const lastTimeDragPrevented = React__namespace.default.useRef(null);
  919. const isAllowedToDrag = React__namespace.default.useRef(false);
  920. const nestedOpenChangeTimer = React__namespace.default.useRef(null);
  921. const pointerStart = React__namespace.default.useRef(0);
  922. const keyboardIsOpen = React__namespace.default.useRef(false);
  923. const shouldAnimate = React__namespace.default.useRef(!defaultOpen);
  924. const previousDiffFromInitial = React__namespace.default.useRef(0);
  925. const drawerRef = React__namespace.default.useRef(null);
  926. const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
  927. const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
  928. const initialDrawerHeight = React__namespace.default.useRef(0);
  929. const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
  930. // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
  931. if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
  932. }, []);
  933. const { activeSnapPoint, activeSnapPointIndex, setActiveSnapPoint, onRelease: onReleaseSnapPoints, snapPointsOffset, onDrag: onDragSnapPoints, shouldFade, getPercentageDragged: getSnapPointsPercentageDragged } = useSnapPoints({
  934. snapPoints,
  935. activeSnapPointProp,
  936. setActiveSnapPointProp,
  937. drawerRef,
  938. fadeFromIndex,
  939. overlayRef,
  940. onSnapPointChange,
  941. direction,
  942. container,
  943. snapToSequentialPoint
  944. });
  945. usePreventScroll({
  946. isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll
  947. });
  948. const { restorePositionSetting } = usePositionFixed({
  949. isOpen,
  950. modal,
  951. nested: nested != null ? nested : false,
  952. hasBeenOpened,
  953. preventScrollRestoration,
  954. noBodyStyles
  955. });
  956. function getScale() {
  957. return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
  958. }
  959. function onPress(event) {
  960. var _drawerRef_current, _drawerRef_current1;
  961. if (!dismissible && !snapPoints) return;
  962. if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
  963. drawerHeightRef.current = ((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0;
  964. drawerWidthRef.current = ((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0;
  965. setIsDragging(true);
  966. dragStartTime.current = new Date();
  967. // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
  968. if (isIOS()) {
  969. window.addEventListener('touchend', ()=>isAllowedToDrag.current = false, {
  970. once: true
  971. });
  972. }
  973. // Ensure we maintain correct pointer capture even when going outside of the drawer
  974. event.target.setPointerCapture(event.pointerId);
  975. pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
  976. }
  977. function shouldDrag(el, isDraggingInDirection) {
  978. var _window_getSelection;
  979. let element = el;
  980. const highlightedText = (_window_getSelection = window.getSelection()) == null ? void 0 : _window_getSelection.toString();
  981. const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
  982. const date = new Date();
  983. // Fixes https://github.com/emilkowalski/vaul/issues/483
  984. if (element.tagName === 'SELECT') {
  985. return false;
  986. }
  987. if (element.hasAttribute('data-vaul-no-drag') || element.closest('[data-vaul-no-drag]')) {
  988. return false;
  989. }
  990. if (direction === 'right' || direction === 'left') {
  991. return true;
  992. }
  993. // Allow scrolling when animating
  994. if (openTime.current && date.getTime() - openTime.current.getTime() < 500) {
  995. return false;
  996. }
  997. if (swipeAmount !== null) {
  998. if (direction === 'bottom' ? swipeAmount > 0 : swipeAmount < 0) {
  999. return true;
  1000. }
  1001. }
  1002. // Don't drag if there's highlighted text
  1003. if (highlightedText && highlightedText.length > 0) {
  1004. return false;
  1005. }
  1006. // Disallow dragging if drawer was scrolled within `scrollLockTimeout`
  1007. if (lastTimeDragPrevented.current && date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout && swipeAmount === 0) {
  1008. lastTimeDragPrevented.current = date;
  1009. return false;
  1010. }
  1011. if (isDraggingInDirection) {
  1012. lastTimeDragPrevented.current = date;
  1013. // We are dragging down so we should allow scrolling
  1014. return false;
  1015. }
  1016. // Keep climbing up the DOM tree as long as there's a parent
  1017. while(element){
  1018. // Check if the element is scrollable
  1019. if (element.scrollHeight > element.clientHeight) {
  1020. if (element.scrollTop !== 0) {
  1021. lastTimeDragPrevented.current = new Date();
  1022. // The element is scrollable and not scrolled to the top, so don't drag
  1023. return false;
  1024. }
  1025. if (element.getAttribute('role') === 'dialog') {
  1026. return true;
  1027. }
  1028. }
  1029. // Move up to the parent element
  1030. element = element.parentNode;
  1031. }
  1032. // No scrollable parents not scrolled to the top found, so drag
  1033. return true;
  1034. }
  1035. function onDrag(event) {
  1036. if (!drawerRef.current) {
  1037. return;
  1038. }
  1039. // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
  1040. if (isDragging) {
  1041. const directionMultiplier = direction === 'bottom' || direction === 'right' ? 1 : -1;
  1042. const draggedDistance = (pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX)) * directionMultiplier;
  1043. const isDraggingInDirection = draggedDistance > 0;
  1044. // Pre condition for disallowing dragging in the close direction.
  1045. const noCloseSnapPointsPreCondition = snapPoints && !dismissible && !isDraggingInDirection;
  1046. // Disallow dragging down to close when first snap point is the active one and dismissible prop is set to false.
  1047. if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) return;
  1048. // We need to capture last time when drag with scroll was triggered and have a timeout between
  1049. const absDraggedDistance = Math.abs(draggedDistance);
  1050. const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
  1051. const drawerDimension = direction === 'bottom' || direction === 'top' ? drawerHeightRef.current : drawerWidthRef.current;
  1052. // Calculate the percentage dragged, where 1 is the closed position
  1053. let percentageDragged = absDraggedDistance / drawerDimension;
  1054. const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingInDirection);
  1055. if (snapPointPercentageDragged !== null) {
  1056. percentageDragged = snapPointPercentageDragged;
  1057. }
  1058. // Disallow close dragging beyond the smallest snap point.
  1059. if (noCloseSnapPointsPreCondition && percentageDragged >= 1) {
  1060. return;
  1061. }
  1062. if (!isAllowedToDrag.current && !shouldDrag(event.target, isDraggingInDirection)) return;
  1063. drawerRef.current.classList.add(DRAG_CLASS);
  1064. // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
  1065. isAllowedToDrag.current = true;
  1066. set(drawerRef.current, {
  1067. transition: 'none'
  1068. });
  1069. set(overlayRef.current, {
  1070. transition: 'none'
  1071. });
  1072. if (snapPoints) {
  1073. onDragSnapPoints({
  1074. draggedDistance
  1075. });
  1076. }
  1077. // Run this only if snapPoints are not defined or if we are at the last snap point (highest one)
  1078. if (isDraggingInDirection && !snapPoints) {
  1079. const dampenedDraggedDistance = dampenValue(draggedDistance);
  1080. const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier;
  1081. set(drawerRef.current, {
  1082. transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
  1083. });
  1084. return;
  1085. }
  1086. const opacityValue = 1 - percentageDragged;
  1087. if (shouldFade || fadeFromIndex && activeSnapPointIndex === fadeFromIndex - 1) {
  1088. onDragProp == null ? void 0 : onDragProp(event, percentageDragged);
  1089. set(overlayRef.current, {
  1090. opacity: `${opacityValue}`,
  1091. transition: 'none'
  1092. }, true);
  1093. }
  1094. if (wrapper && overlayRef.current && shouldScaleBackground) {
  1095. // Calculate percentageDragged as a fraction (0 to 1)
  1096. const scaleValue = Math.min(getScale() + percentageDragged * (1 - getScale()), 1);
  1097. const borderRadiusValue = 8 - percentageDragged * 8;
  1098. const translateValue = Math.max(0, 14 - percentageDragged * 14);
  1099. set(wrapper, {
  1100. borderRadius: `${borderRadiusValue}px`,
  1101. transform: isVertical(direction) ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)` : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
  1102. transition: 'none'
  1103. }, true);
  1104. }
  1105. if (!snapPoints) {
  1106. const translateValue = absDraggedDistance * directionMultiplier;
  1107. set(drawerRef.current, {
  1108. transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
  1109. });
  1110. }
  1111. }
  1112. }
  1113. React__namespace.default.useEffect(()=>{
  1114. window.requestAnimationFrame(()=>{
  1115. shouldAnimate.current = true;
  1116. });
  1117. }, []);
  1118. React__namespace.default.useEffect(()=>{
  1119. var _window_visualViewport;
  1120. function onVisualViewportChange() {
  1121. if (!drawerRef.current || !repositionInputs) return;
  1122. const focusedElement = document.activeElement;
  1123. if (isInput(focusedElement) || keyboardIsOpen.current) {
  1124. var _window_visualViewport;
  1125. const visualViewportHeight = ((_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.height) || 0;
  1126. const totalHeight = window.innerHeight;
  1127. // This is the height of the keyboard
  1128. let diffFromInitial = totalHeight - visualViewportHeight;
  1129. const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;
  1130. // Adjust drawer height only if it's tall enough
  1131. const isTallEnough = drawerHeight > totalHeight * 0.8;
  1132. if (!initialDrawerHeight.current) {
  1133. initialDrawerHeight.current = drawerHeight;
  1134. }
  1135. const offsetFromTop = drawerRef.current.getBoundingClientRect().top;
  1136. // visualViewport height may change due to somq e subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state.
  1137. if (Math.abs(previousDiffFromInitial.current - diffFromInitial) > 60) {
  1138. keyboardIsOpen.current = !keyboardIsOpen.current;
  1139. }
  1140. if (snapPoints && snapPoints.length > 0 && snapPointsOffset && activeSnapPointIndex) {
  1141. const activeSnapPointHeight = snapPointsOffset[activeSnapPointIndex] || 0;
  1142. diffFromInitial += activeSnapPointHeight;
  1143. }
  1144. previousDiffFromInitial.current = diffFromInitial;
  1145. // We don't have to change the height if the input is in view, when we are here we are in the opened keyboard state so we can correctly check if the input is in view
  1146. if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) {
  1147. const height = drawerRef.current.getBoundingClientRect().height;
  1148. let newDrawerHeight = height;
  1149. if (height > visualViewportHeight) {
  1150. newDrawerHeight = visualViewportHeight - (isTallEnough ? offsetFromTop : WINDOW_TOP_OFFSET);
  1151. }
  1152. // When fixed, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
  1153. if (fixed) {
  1154. drawerRef.current.style.height = `${height - Math.max(diffFromInitial, 0)}px`;
  1155. } else {
  1156. drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
  1157. }
  1158. } else if (!isMobileFirefox()) {
  1159. drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
  1160. }
  1161. if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
  1162. drawerRef.current.style.bottom = `0px`;
  1163. } else {
  1164. // Negative bottom value would never make sense
  1165. drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
  1166. }
  1167. }
  1168. }
  1169. (_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.addEventListener('resize', onVisualViewportChange);
  1170. return ()=>{
  1171. var _window_visualViewport;
  1172. return (_window_visualViewport = window.visualViewport) == null ? void 0 : _window_visualViewport.removeEventListener('resize', onVisualViewportChange);
  1173. };
  1174. }, [
  1175. activeSnapPointIndex,
  1176. snapPoints,
  1177. snapPointsOffset
  1178. ]);
  1179. function closeDrawer(fromWithin) {
  1180. cancelDrag();
  1181. onClose == null ? void 0 : onClose();
  1182. if (!fromWithin) {
  1183. setIsOpen(false);
  1184. }
  1185. setTimeout(()=>{
  1186. if (snapPoints) {
  1187. setActiveSnapPoint(snapPoints[0]);
  1188. }
  1189. }, TRANSITIONS.DURATION * 1000); // seconds to ms
  1190. }
  1191. function resetDrawer() {
  1192. if (!drawerRef.current) return;
  1193. const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
  1194. const currentSwipeAmount = getTranslate(drawerRef.current, direction);
  1195. set(drawerRef.current, {
  1196. transform: 'translate3d(0, 0, 0)',
  1197. transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
  1198. });
  1199. set(overlayRef.current, {
  1200. transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  1201. opacity: '1'
  1202. });
  1203. // Don't reset background if swiped upwards
  1204. if (shouldScaleBackground && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) {
  1205. set(wrapper, {
  1206. borderRadius: `${BORDER_RADIUS}px`,
  1207. overflow: 'hidden',
  1208. ...isVertical(direction) ? {
  1209. transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
  1210. transformOrigin: 'top'
  1211. } : {
  1212. transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
  1213. transformOrigin: 'left'
  1214. },
  1215. transitionProperty: 'transform, border-radius',
  1216. transitionDuration: `${TRANSITIONS.DURATION}s`,
  1217. transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`
  1218. }, true);
  1219. }
  1220. }
  1221. function cancelDrag() {
  1222. if (!isDragging || !drawerRef.current) return;
  1223. drawerRef.current.classList.remove(DRAG_CLASS);
  1224. isAllowedToDrag.current = false;
  1225. setIsDragging(false);
  1226. dragEndTime.current = new Date();
  1227. }
  1228. function onRelease(event) {
  1229. if (!isDragging || !drawerRef.current) return;
  1230. drawerRef.current.classList.remove(DRAG_CLASS);
  1231. isAllowedToDrag.current = false;
  1232. setIsDragging(false);
  1233. dragEndTime.current = new Date();
  1234. const swipeAmount = getTranslate(drawerRef.current, direction);
  1235. if (!event || !shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return;
  1236. if (dragStartTime.current === null) return;
  1237. const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
  1238. const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
  1239. const velocity = Math.abs(distMoved) / timeTaken;
  1240. if (velocity > 0.05) {
  1241. // `justReleased` is needed to prevent the drawer from focusing on an input when the drag ends, as it's not the intent most of the time.
  1242. setJustReleased(true);
  1243. setTimeout(()=>{
  1244. setJustReleased(false);
  1245. }, 200);
  1246. }
  1247. if (snapPoints) {
  1248. const directionMultiplier = direction === 'bottom' || direction === 'right' ? 1 : -1;
  1249. onReleaseSnapPoints({
  1250. draggedDistance: distMoved * directionMultiplier,
  1251. closeDrawer,
  1252. velocity,
  1253. dismissible
  1254. });
  1255. onReleaseProp == null ? void 0 : onReleaseProp(event, true);
  1256. return;
  1257. }
  1258. // Moved upwards, don't do anything
  1259. if (direction === 'bottom' || direction === 'right' ? distMoved > 0 : distMoved < 0) {
  1260. resetDrawer();
  1261. onReleaseProp == null ? void 0 : onReleaseProp(event, true);
  1262. return;
  1263. }
  1264. if (velocity > VELOCITY_THRESHOLD) {
  1265. closeDrawer();
  1266. onReleaseProp == null ? void 0 : onReleaseProp(event, false);
  1267. return;
  1268. }
  1269. var _drawerRef_current_getBoundingClientRect_height;
  1270. const visibleDrawerHeight = Math.min((_drawerRef_current_getBoundingClientRect_height = drawerRef.current.getBoundingClientRect().height) != null ? _drawerRef_current_getBoundingClientRect_height : 0, window.innerHeight);
  1271. var _drawerRef_current_getBoundingClientRect_width;
  1272. const visibleDrawerWidth = Math.min((_drawerRef_current_getBoundingClientRect_width = drawerRef.current.getBoundingClientRect().width) != null ? _drawerRef_current_getBoundingClientRect_width : 0, window.innerWidth);
  1273. const isHorizontalSwipe = direction === 'left' || direction === 'right';
  1274. if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
  1275. closeDrawer();
  1276. onReleaseProp == null ? void 0 : onReleaseProp(event, false);
  1277. return;
  1278. }
  1279. onReleaseProp == null ? void 0 : onReleaseProp(event, true);
  1280. resetDrawer();
  1281. }
  1282. React__namespace.default.useEffect(()=>{
  1283. // Trigger enter animation without using CSS animation
  1284. if (isOpen) {
  1285. set(document.documentElement, {
  1286. scrollBehavior: 'auto'
  1287. });
  1288. openTime.current = new Date();
  1289. }
  1290. return ()=>{
  1291. reset(document.documentElement, 'scrollBehavior');
  1292. };
  1293. }, [
  1294. isOpen
  1295. ]);
  1296. function onNestedOpenChange(o) {
  1297. const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
  1298. const initialTranslate = o ? -NESTED_DISPLACEMENT : 0;
  1299. if (nestedOpenChangeTimer.current) {
  1300. window.clearTimeout(nestedOpenChangeTimer.current);
  1301. }
  1302. set(drawerRef.current, {
  1303. transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  1304. transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${initialTranslate}px, 0)` : `scale(${scale}) translate3d(${initialTranslate}px, 0, 0)`
  1305. });
  1306. if (!o && drawerRef.current) {
  1307. nestedOpenChangeTimer.current = setTimeout(()=>{
  1308. const translateValue = getTranslate(drawerRef.current, direction);
  1309. set(drawerRef.current, {
  1310. transition: 'none',
  1311. transform: isVertical(direction) ? `translate3d(0, ${translateValue}px, 0)` : `translate3d(${translateValue}px, 0, 0)`
  1312. });
  1313. }, 500);
  1314. }
  1315. }
  1316. function onNestedDrag(_event, percentageDragged) {
  1317. if (percentageDragged < 0) return;
  1318. const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth;
  1319. const newScale = initialScale + percentageDragged * (1 - initialScale);
  1320. const newTranslate = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT;
  1321. set(drawerRef.current, {
  1322. transform: isVertical(direction) ? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)` : `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
  1323. transition: 'none'
  1324. });
  1325. }
  1326. function onNestedRelease(_event, o) {
  1327. const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
  1328. const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1;
  1329. const translate = o ? -NESTED_DISPLACEMENT : 0;
  1330. if (o) {
  1331. set(drawerRef.current, {
  1332. transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
  1333. transform: isVertical(direction) ? `scale(${scale}) translate3d(0, ${translate}px, 0)` : `scale(${scale}) translate3d(${translate}px, 0, 0)`
  1334. });
  1335. }
  1336. }
  1337. React__namespace.default.useEffect(()=>{
  1338. if (!modal) {
  1339. // Need to do this manually unfortunately
  1340. window.requestAnimationFrame(()=>{
  1341. document.body.style.pointerEvents = 'auto';
  1342. });
  1343. }
  1344. }, [
  1345. modal
  1346. ]);
  1347. return /*#__PURE__*/ React__namespace.default.createElement(DialogPrimitive__namespace.Root, {
  1348. defaultOpen: defaultOpen,
  1349. onOpenChange: (open)=>{
  1350. if (!dismissible && !open) return;
  1351. if (open) {
  1352. setHasBeenOpened(true);
  1353. } else {
  1354. closeDrawer(true);
  1355. }
  1356. setIsOpen(open);
  1357. },
  1358. open: isOpen
  1359. }, /*#__PURE__*/ React__namespace.default.createElement(DrawerContext.Provider, {
  1360. value: {
  1361. activeSnapPoint,
  1362. snapPoints,
  1363. setActiveSnapPoint,
  1364. drawerRef,
  1365. overlayRef,
  1366. onOpenChange,
  1367. onPress,
  1368. onRelease,
  1369. onDrag,
  1370. dismissible,
  1371. shouldAnimate,
  1372. handleOnly,
  1373. isOpen,
  1374. isDragging,
  1375. shouldFade,
  1376. closeDrawer,
  1377. onNestedDrag,
  1378. onNestedOpenChange,
  1379. onNestedRelease,
  1380. keyboardIsOpen,
  1381. modal,
  1382. snapPointsOffset,
  1383. activeSnapPointIndex,
  1384. direction,
  1385. shouldScaleBackground,
  1386. setBackgroundColorOnScale,
  1387. noBodyStyles,
  1388. container,
  1389. autoFocus
  1390. }
  1391. }, children));
  1392. }
  1393. const Overlay = /*#__PURE__*/ React__namespace.default.forwardRef(function({ ...rest }, ref) {
  1394. const { overlayRef, snapPoints, onRelease, shouldFade, isOpen, modal, shouldAnimate } = useDrawerContext();
  1395. const composedRef = useComposedRefs(ref, overlayRef);
  1396. const hasSnapPoints = snapPoints && snapPoints.length > 0;
  1397. // Overlay is the component that is locking scroll, removing it will unlock the scroll without having to dig into Radix's Dialog library
  1398. if (!modal) {
  1399. return null;
  1400. }
  1401. const onMouseUp = React__namespace.default.useCallback((event)=>onRelease(event), [
  1402. onRelease
  1403. ]);
  1404. return /*#__PURE__*/ React__namespace.default.createElement(DialogPrimitive__namespace.Overlay, {
  1405. onMouseUp: onMouseUp,
  1406. ref: composedRef,
  1407. "data-vaul-overlay": "",
  1408. "data-vaul-snap-points": isOpen && hasSnapPoints ? 'true' : 'false',
  1409. "data-vaul-snap-points-overlay": isOpen && shouldFade ? 'true' : 'false',
  1410. "data-vaul-animate": (shouldAnimate == null ? void 0 : shouldAnimate.current) ? 'true' : 'false',
  1411. ...rest
  1412. });
  1413. });
  1414. Overlay.displayName = 'Drawer.Overlay';
  1415. const Content = /*#__PURE__*/ React__namespace.default.forwardRef(function({ onPointerDownOutside, style, onOpenAutoFocus, ...rest }, ref) {
  1416. const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, shouldAnimate, autoFocus } = useDrawerContext();
  1417. // Needed to use transition instead of animations
  1418. const [delayedSnapPoints, setDelayedSnapPoints] = React__namespace.default.useState(false);
  1419. const composedRef = useComposedRefs(ref, drawerRef);
  1420. const pointerStartRef = React__namespace.default.useRef(null);
  1421. const lastKnownPointerEventRef = React__namespace.default.useRef(null);
  1422. const wasBeyondThePointRef = React__namespace.default.useRef(false);
  1423. const hasSnapPoints = snapPoints && snapPoints.length > 0;
  1424. useScaleBackground();
  1425. const isDeltaInDirection = (delta, direction, threshold = 0)=>{
  1426. if (wasBeyondThePointRef.current) return true;
  1427. const deltaY = Math.abs(delta.y);
  1428. const deltaX = Math.abs(delta.x);
  1429. const isDeltaX = deltaX > deltaY;
  1430. const dFactor = [
  1431. 'bottom',
  1432. 'right'
  1433. ].includes(direction) ? 1 : -1;
  1434. if (direction === 'left' || direction === 'right') {
  1435. const isReverseDirection = delta.x * dFactor < 0;
  1436. if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
  1437. return isDeltaX;
  1438. }
  1439. } else {
  1440. const isReverseDirection = delta.y * dFactor < 0;
  1441. if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
  1442. return !isDeltaX;
  1443. }
  1444. }
  1445. wasBeyondThePointRef.current = true;
  1446. return true;
  1447. };
  1448. React__namespace.default.useEffect(()=>{
  1449. if (hasSnapPoints) {
  1450. window.requestAnimationFrame(()=>{
  1451. setDelayedSnapPoints(true);
  1452. });
  1453. }
  1454. }, []);
  1455. function handleOnPointerUp(event) {
  1456. pointerStartRef.current = null;
  1457. wasBeyondThePointRef.current = false;
  1458. onRelease(event);
  1459. }
  1460. return /*#__PURE__*/ React__namespace.default.createElement(DialogPrimitive__namespace.Content, {
  1461. "data-vaul-drawer-direction": direction,
  1462. "data-vaul-drawer": "",
  1463. "data-vaul-delayed-snap-points": delayedSnapPoints ? 'true' : 'false',
  1464. "data-vaul-snap-points": isOpen && hasSnapPoints ? 'true' : 'false',
  1465. "data-vaul-custom-container": container ? 'true' : 'false',
  1466. "data-vaul-animate": (shouldAnimate == null ? void 0 : shouldAnimate.current) ? 'true' : 'false',
  1467. ...rest,
  1468. ref: composedRef,
  1469. style: snapPointsOffset && snapPointsOffset.length > 0 ? {
  1470. '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex != null ? activeSnapPointIndex : 0]}px`,
  1471. ...style
  1472. } : style,
  1473. onPointerDown: (event)=>{
  1474. if (handleOnly) return;
  1475. rest.onPointerDown == null ? void 0 : rest.onPointerDown.call(rest, event);
  1476. pointerStartRef.current = {
  1477. x: event.pageX,
  1478. y: event.pageY
  1479. };
  1480. onPress(event);
  1481. },
  1482. onOpenAutoFocus: (e)=>{
  1483. onOpenAutoFocus == null ? void 0 : onOpenAutoFocus(e);
  1484. if (!autoFocus) {
  1485. e.preventDefault();
  1486. }
  1487. },
  1488. onPointerDownOutside: (e)=>{
  1489. onPointerDownOutside == null ? void 0 : onPointerDownOutside(e);
  1490. if (!modal || e.defaultPrevented) {
  1491. e.preventDefault();
  1492. return;
  1493. }
  1494. if (keyboardIsOpen.current) {
  1495. keyboardIsOpen.current = false;
  1496. }
  1497. },
  1498. onFocusOutside: (e)=>{
  1499. if (!modal) {
  1500. e.preventDefault();
  1501. return;
  1502. }
  1503. },
  1504. onPointerMove: (event)=>{
  1505. lastKnownPointerEventRef.current = event;
  1506. if (handleOnly) return;
  1507. rest.onPointerMove == null ? void 0 : rest.onPointerMove.call(rest, event);
  1508. if (!pointerStartRef.current) return;
  1509. const yPosition = event.pageY - pointerStartRef.current.y;
  1510. const xPosition = event.pageX - pointerStartRef.current.x;
  1511. const swipeStartThreshold = event.pointerType === 'touch' ? 10 : 2;
  1512. const delta = {
  1513. x: xPosition,
  1514. y: yPosition
  1515. };
  1516. const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
  1517. if (isAllowedToSwipe) onDrag(event);
  1518. else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
  1519. pointerStartRef.current = null;
  1520. }
  1521. },
  1522. onPointerUp: (event)=>{
  1523. rest.onPointerUp == null ? void 0 : rest.onPointerUp.call(rest, event);
  1524. pointerStartRef.current = null;
  1525. wasBeyondThePointRef.current = false;
  1526. onRelease(event);
  1527. },
  1528. onPointerOut: (event)=>{
  1529. rest.onPointerOut == null ? void 0 : rest.onPointerOut.call(rest, event);
  1530. handleOnPointerUp(lastKnownPointerEventRef.current);
  1531. },
  1532. onContextMenu: (event)=>{
  1533. rest.onContextMenu == null ? void 0 : rest.onContextMenu.call(rest, event);
  1534. if (lastKnownPointerEventRef.current) {
  1535. handleOnPointerUp(lastKnownPointerEventRef.current);
  1536. }
  1537. }
  1538. });
  1539. });
  1540. Content.displayName = 'Drawer.Content';
  1541. const LONG_HANDLE_PRESS_TIMEOUT = 250;
  1542. const DOUBLE_TAP_TIMEOUT = 120;
  1543. const Handle = /*#__PURE__*/ React__namespace.default.forwardRef(function({ preventCycle = false, children, ...rest }, ref) {
  1544. const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
  1545. const closeTimeoutIdRef = React__namespace.default.useRef(null);
  1546. const shouldCancelInteractionRef = React__namespace.default.useRef(false);
  1547. function handleStartCycle() {
  1548. // Stop if this is the second click of a double click
  1549. if (shouldCancelInteractionRef.current) {
  1550. handleCancelInteraction();
  1551. return;
  1552. }
  1553. window.setTimeout(()=>{
  1554. handleCycleSnapPoints();
  1555. }, DOUBLE_TAP_TIMEOUT);
  1556. }
  1557. function handleCycleSnapPoints() {
  1558. // Prevent accidental taps while resizing drawer
  1559. if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
  1560. handleCancelInteraction();
  1561. return;
  1562. }
  1563. // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
  1564. handleCancelInteraction();
  1565. if (!snapPoints || snapPoints.length === 0) {
  1566. if (!dismissible) {
  1567. closeDrawer();
  1568. }
  1569. return;
  1570. }
  1571. const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
  1572. if (isLastSnapPoint && dismissible) {
  1573. closeDrawer();
  1574. return;
  1575. }
  1576. const currentSnapIndex = snapPoints.findIndex((point)=>point === activeSnapPoint);
  1577. if (currentSnapIndex === -1) return; // activeSnapPoint not found in snapPoints
  1578. const nextSnapPoint = snapPoints[currentSnapIndex + 1];
  1579. setActiveSnapPoint(nextSnapPoint);
  1580. }
  1581. function handleStartInteraction() {
  1582. closeTimeoutIdRef.current = window.setTimeout(()=>{
  1583. // Cancel click interaction on a long press
  1584. shouldCancelInteractionRef.current = true;
  1585. }, LONG_HANDLE_PRESS_TIMEOUT);
  1586. }
  1587. function handleCancelInteraction() {
  1588. if (closeTimeoutIdRef.current) {
  1589. window.clearTimeout(closeTimeoutIdRef.current);
  1590. }
  1591. shouldCancelInteractionRef.current = false;
  1592. }
  1593. return /*#__PURE__*/ React__namespace.default.createElement("div", {
  1594. onClick: handleStartCycle,
  1595. onPointerCancel: handleCancelInteraction,
  1596. onPointerDown: (e)=>{
  1597. if (handleOnly) onPress(e);
  1598. handleStartInteraction();
  1599. },
  1600. onPointerMove: (e)=>{
  1601. if (handleOnly) onDrag(e);
  1602. },
  1603. // onPointerUp is already handled by the content component
  1604. ref: ref,
  1605. "data-vaul-drawer-visible": isOpen ? 'true' : 'false',
  1606. "data-vaul-handle": "",
  1607. "aria-hidden": "true",
  1608. ...rest
  1609. }, /*#__PURE__*/ React__namespace.default.createElement("span", {
  1610. "data-vaul-handle-hitarea": "",
  1611. "aria-hidden": "true"
  1612. }, children));
  1613. });
  1614. Handle.displayName = 'Drawer.Handle';
  1615. function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }) {
  1616. const { onNestedDrag, onNestedOpenChange, onNestedRelease } = useDrawerContext();
  1617. if (!onNestedDrag) {
  1618. throw new Error('Drawer.NestedRoot must be placed in another drawer');
  1619. }
  1620. return /*#__PURE__*/ React__namespace.default.createElement(Root, {
  1621. nested: true,
  1622. open: nestedIsOpen,
  1623. onClose: ()=>{
  1624. onNestedOpenChange(false);
  1625. },
  1626. onDrag: (e, p)=>{
  1627. onNestedDrag(e, p);
  1628. onDrag == null ? void 0 : onDrag(e, p);
  1629. },
  1630. onOpenChange: (o)=>{
  1631. if (o) {
  1632. onNestedOpenChange(o);
  1633. }
  1634. onOpenChange == null ? void 0 : onOpenChange(o);
  1635. },
  1636. onRelease: onNestedRelease,
  1637. ...rest
  1638. });
  1639. }
  1640. function Portal(props) {
  1641. const context = useDrawerContext();
  1642. const { container = context.container, ...portalProps } = props;
  1643. return /*#__PURE__*/ React__namespace.default.createElement(DialogPrimitive__namespace.Portal, {
  1644. container: container,
  1645. ...portalProps
  1646. });
  1647. }
  1648. const Drawer = {
  1649. Root,
  1650. NestedRoot,
  1651. Content,
  1652. Overlay,
  1653. Trigger: DialogPrimitive__namespace.Trigger,
  1654. Portal,
  1655. Handle,
  1656. Close: DialogPrimitive__namespace.Close,
  1657. Title: DialogPrimitive__namespace.Title,
  1658. Description: DialogPrimitive__namespace.Description
  1659. };
  1660. exports.Content = Content;
  1661. exports.Drawer = Drawer;
  1662. exports.Handle = Handle;
  1663. exports.NestedRoot = NestedRoot;
  1664. exports.Overlay = Overlay;
  1665. exports.Portal = Portal;
  1666. exports.Root = Root;