@dreamcommerce/aurora 3.0.0-44 → 3.0.0-46

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