@quantinuum/quantinuum-ui 4.0.1-fix-update-radix.1 → 4.0.1

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 (245) hide show
  1. package/dist/node_modules/@babel/runtime/helpers/esm/extends.js +12 -0
  2. package/dist/node_modules/@babel/runtime/helpers/esm/extends.js.map +1 -0
  3. package/dist/node_modules/@radix-ui/number/dist/index.mjs.js +3 -4
  4. package/dist/node_modules/@radix-ui/number/dist/index.mjs.js.map +1 -1
  5. package/dist/node_modules/@radix-ui/primitive/dist/index.mjs.js +6 -9
  6. package/dist/node_modules/@radix-ui/primitive/dist/index.mjs.js.map +1 -1
  7. package/dist/node_modules/@radix-ui/react-accordion/dist/index.mjs.js +267 -279
  8. package/dist/node_modules/@radix-ui/react-accordion/dist/index.mjs.js.map +1 -1
  9. package/dist/node_modules/@radix-ui/react-avatar/dist/index.mjs.js +92 -114
  10. package/dist/node_modules/@radix-ui/react-avatar/dist/index.mjs.js.map +1 -1
  11. package/dist/node_modules/@radix-ui/react-checkbox/dist/index.mjs.js +138 -255
  12. package/dist/node_modules/@radix-ui/react-checkbox/dist/index.mjs.js.map +1 -1
  13. package/dist/node_modules/@radix-ui/react-collapsible/dist/index.mjs.js +130 -135
  14. package/dist/node_modules/@radix-ui/react-collapsible/dist/index.mjs.js.map +1 -1
  15. package/dist/node_modules/@radix-ui/react-collection/dist/index.mjs.js +88 -66
  16. package/dist/node_modules/@radix-ui/react-collection/dist/index.mjs.js.map +1 -1
  17. package/dist/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  18. package/dist/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  19. package/dist/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js +21 -34
  20. package/dist/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js.map +1 -1
  21. package/dist/node_modules/@radix-ui/react-context/dist/index.mjs.js +93 -72
  22. package/dist/node_modules/@radix-ui/react-context/dist/index.mjs.js.map +1 -1
  23. package/dist/node_modules/@radix-ui/react-dialog/dist/index.mjs.js +254 -297
  24. package/dist/node_modules/@radix-ui/react-dialog/dist/index.mjs.js.map +1 -1
  25. package/dist/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  26. package/dist/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  27. package/dist/node_modules/@radix-ui/react-direction/dist/index.mjs.js +6 -8
  28. package/dist/node_modules/@radix-ui/react-direction/dist/index.mjs.js.map +1 -1
  29. package/dist/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs.js +217 -190
  30. package/dist/node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs.js.map +1 -1
  31. package/dist/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs.js +217 -243
  32. package/dist/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs.js.map +1 -1
  33. package/dist/node_modules/@radix-ui/react-focus-guards/dist/index.mjs.js +25 -26
  34. package/dist/node_modules/@radix-ui/react-focus-guards/dist/index.mjs.js.map +1 -1
  35. package/dist/node_modules/@radix-ui/react-focus-scope/dist/index.mjs.js +259 -191
  36. package/dist/node_modules/@radix-ui/react-focus-scope/dist/index.mjs.js.map +1 -1
  37. package/dist/node_modules/@radix-ui/react-hover-card/dist/index.mjs.js +205 -224
  38. package/dist/node_modules/@radix-ui/react-hover-card/dist/index.mjs.js.map +1 -1
  39. package/dist/node_modules/@radix-ui/react-id/dist/index.mjs.js +14 -11
  40. package/dist/node_modules/@radix-ui/react-id/dist/index.mjs.js.map +1 -1
  41. package/dist/node_modules/@radix-ui/react-label/dist/index.mjs.js +14 -22
  42. package/dist/node_modules/@radix-ui/react-label/dist/index.mjs.js.map +1 -1
  43. package/dist/node_modules/@radix-ui/react-menu/dist/index.mjs.js +820 -765
  44. package/dist/node_modules/@radix-ui/react-menu/dist/index.mjs.js.map +1 -1
  45. package/dist/node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  46. package/dist/node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  47. package/dist/node_modules/@radix-ui/react-navigation-menu/dist/index.mjs.js +730 -717
  48. package/dist/node_modules/@radix-ui/react-navigation-menu/dist/index.mjs.js.map +1 -1
  49. package/dist/node_modules/@radix-ui/react-popover/dist/index.mjs.js +199 -268
  50. package/dist/node_modules/@radix-ui/react-popover/dist/index.mjs.js.map +1 -1
  51. package/dist/node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  52. package/dist/node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  53. package/dist/node_modules/@radix-ui/react-popper/dist/index.mjs.js +223 -267
  54. package/dist/node_modules/@radix-ui/react-popper/dist/index.mjs.js.map +1 -1
  55. package/dist/node_modules/@radix-ui/react-portal/dist/index.mjs.js +10 -14
  56. package/dist/node_modules/@radix-ui/react-portal/dist/index.mjs.js.map +1 -1
  57. package/dist/node_modules/@radix-ui/react-presence/dist/index.mjs.js +121 -122
  58. package/dist/node_modules/@radix-ui/react-presence/dist/index.mjs.js.map +1 -1
  59. package/dist/node_modules/@radix-ui/react-primitive/dist/index.mjs.js +83 -39
  60. package/dist/node_modules/@radix-ui/react-primitive/dist/index.mjs.js.map +1 -1
  61. package/dist/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  62. package/dist/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  63. package/dist/node_modules/@radix-ui/react-progress/dist/index.mjs.js +78 -77
  64. package/dist/node_modules/@radix-ui/react-progress/dist/index.mjs.js.map +1 -1
  65. package/dist/node_modules/@radix-ui/react-radio-group/dist/index.mjs.js +217 -264
  66. package/dist/node_modules/@radix-ui/react-radio-group/dist/index.mjs.js.map +1 -1
  67. package/dist/node_modules/@radix-ui/react-roving-focus/dist/index.mjs.js +216 -204
  68. package/dist/node_modules/@radix-ui/react-roving-focus/dist/index.mjs.js.map +1 -1
  69. package/dist/node_modules/@radix-ui/react-scroll-area/dist/index.mjs.js +9 -9
  70. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/number/dist/index.mjs.js +7 -0
  71. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/number/dist/index.mjs.js.map +1 -0
  72. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive/dist/index.mjs.js +12 -0
  73. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive/dist/index.mjs.js.map +1 -0
  74. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js +40 -0
  75. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js.map +1 -0
  76. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context/dist/index.mjs.js +64 -0
  77. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context/dist/index.mjs.js.map +1 -0
  78. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-direction/dist/index.mjs.js +12 -0
  79. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-direction/dist/index.mjs.js.map +1 -0
  80. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence/dist/index.mjs.js +132 -0
  81. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence/dist/index.mjs.js.map +1 -0
  82. package/dist/node_modules/{cmdk → @radix-ui/react-scroll-area}/node_modules/@radix-ui/react-primitive/dist/index.mjs.js +1 -1
  83. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive/dist/index.mjs.js.map +1 -0
  84. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot/dist/index.mjs.js +90 -0
  85. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -0
  86. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs.js +13 -0
  87. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs.js.map +1 -0
  88. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs.js +8 -0
  89. package/dist/node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs.js.map +1 -0
  90. package/dist/node_modules/@radix-ui/react-select/dist/index.mjs.js +1079 -1080
  91. package/dist/node_modules/@radix-ui/react-select/dist/index.mjs.js.map +1 -1
  92. package/dist/node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot/dist/index.mjs.js +73 -81
  93. package/dist/node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  94. package/dist/node_modules/@radix-ui/react-separator/dist/index.mjs.js +43 -26
  95. package/dist/node_modules/@radix-ui/react-separator/dist/index.mjs.js.map +1 -1
  96. package/dist/node_modules/@radix-ui/react-slot/dist/index.mjs.js +1 -1
  97. package/dist/node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js +37 -0
  98. package/dist/node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs/dist/index.mjs.js.map +1 -0
  99. package/dist/node_modules/@radix-ui/react-switch/dist/index.mjs.js +112 -140
  100. package/dist/node_modules/@radix-ui/react-switch/dist/index.mjs.js.map +1 -1
  101. package/dist/node_modules/@radix-ui/react-tabs/dist/index.mjs.js +141 -173
  102. package/dist/node_modules/@radix-ui/react-tabs/dist/index.mjs.js.map +1 -1
  103. package/dist/node_modules/@radix-ui/react-toggle/dist/index.mjs.js +25 -34
  104. package/dist/node_modules/@radix-ui/react-toggle/dist/index.mjs.js.map +1 -1
  105. package/dist/node_modules/@radix-ui/react-toggle-group/dist/index.mjs.js +145 -154
  106. package/dist/node_modules/@radix-ui/react-toggle-group/dist/index.mjs.js.map +1 -1
  107. package/dist/node_modules/@radix-ui/react-tooltip/dist/index.mjs.js +491 -462
  108. package/dist/node_modules/@radix-ui/react-tooltip/dist/index.mjs.js.map +1 -1
  109. package/dist/node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot/dist/index.mjs.js +78 -13
  110. package/dist/node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot/dist/index.mjs.js.map +1 -1
  111. package/dist/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs.js +15 -9
  112. package/dist/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs.js.map +1 -1
  113. package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs.js +43 -66
  114. package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs.js.map +1 -1
  115. package/dist/node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs.js +18 -15
  116. package/dist/node_modules/@radix-ui/react-use-escape-keydown/dist/index.mjs.js.map +1 -1
  117. package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs.js +9 -5
  118. package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs.js.map +1 -1
  119. package/dist/node_modules/@radix-ui/react-use-previous/dist/index.mjs.js +18 -12
  120. package/dist/node_modules/@radix-ui/react-use-previous/dist/index.mjs.js.map +1 -1
  121. package/dist/node_modules/@radix-ui/react-use-size/dist/index.mjs.js +48 -37
  122. package/dist/node_modules/@radix-ui/react-use-size/dist/index.mjs.js.map +1 -1
  123. package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.mjs.js +23 -32
  124. package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.mjs.js.map +1 -1
  125. package/dist/node_modules/aria-hidden/dist/es2015/index.js +16 -22
  126. package/dist/node_modules/aria-hidden/dist/es2015/index.js.map +1 -1
  127. package/dist/node_modules/class-variance-authority/dist/index.mjs.js +9 -7
  128. package/dist/node_modules/class-variance-authority/dist/index.mjs.js.map +1 -1
  129. package/dist/node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs.js +4 -0
  130. package/dist/node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs.js.map +1 -0
  131. package/dist/node_modules/cmdk/dist/index.mjs.js +4 -8
  132. package/dist/node_modules/cmdk/dist/index.mjs.js.map +1 -1
  133. package/dist/node_modules/cmdk/node_modules/@radix-ui/primitive/dist/index.module.js +9 -0
  134. package/dist/node_modules/cmdk/node_modules/@radix-ui/primitive/dist/index.module.js.map +1 -0
  135. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-compose-refs/dist/index.module.js +27 -0
  136. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-compose-refs/dist/index.module.js.map +1 -0
  137. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-context/dist/index.module.js +101 -0
  138. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-context/dist/index.module.js.map +1 -0
  139. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-dialog/dist/index.module.js +214 -0
  140. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-dialog/dist/index.module.js.map +1 -0
  141. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/dist/index.module.js +233 -0
  142. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/dist/index.module.js.map +1 -0
  143. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-focus-guards/dist/index.module.js +30 -0
  144. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-focus-guards/dist/index.module.js.map +1 -0
  145. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-focus-scope/dist/index.module.js +252 -0
  146. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-focus-scope/dist/index.module.js.map +1 -0
  147. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-id/dist/index.module.js +19 -0
  148. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-id/dist/index.module.js.map +1 -0
  149. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-portal/dist/index.module.js +15 -0
  150. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-portal/dist/index.module.js.map +1 -0
  151. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-presence/dist/index.module.js +131 -0
  152. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-presence/dist/index.module.js.map +1 -0
  153. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.module.js +85 -0
  154. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.module.js.map +1 -0
  155. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-slot/dist/index.module.js +79 -0
  156. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-slot/dist/index.module.js.map +1 -0
  157. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref/dist/index.module.js +19 -0
  158. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref/dist/index.module.js.map +1 -0
  159. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state/dist/index.module.js +48 -0
  160. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state/dist/index.module.js.map +1 -0
  161. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown/dist/index.module.js +21 -0
  162. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown/dist/index.module.js.map +1 -0
  163. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect/dist/index.module.js +12 -0
  164. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect/dist/index.module.js.map +1 -0
  165. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/Combination.js +10 -0
  166. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/Combination.js.map +1 -0
  167. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/SideEffect.js +146 -0
  168. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/SideEffect.js.map +1 -0
  169. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/UI.js +39 -0
  170. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/UI.js.map +1 -0
  171. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js +22 -0
  172. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js.map +1 -0
  173. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/handleScroll.js +97 -0
  174. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/handleScroll.js.map +1 -0
  175. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/medium.js +9 -0
  176. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/medium.js.map +1 -0
  177. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/sidecar.js +10 -0
  178. package/dist/node_modules/cmdk/node_modules/react-remove-scroll/dist/es2015/sidecar.js.map +1 -0
  179. package/dist/node_modules/command-score/index.js +138 -0
  180. package/dist/node_modules/command-score/index.js.map +1 -0
  181. package/dist/node_modules/input-otp/dist/index.mjs.js +1 -1
  182. package/dist/node_modules/input-otp/dist/index.mjs.js.map +1 -1
  183. package/dist/node_modules/react-remove-scroll/dist/es2015/SideEffect.js +5 -23
  184. package/dist/node_modules/react-remove-scroll/dist/es2015/SideEffect.js.map +1 -1
  185. package/dist/node_modules/react-remove-scroll/dist/es2015/UI.js +2 -2
  186. package/dist/node_modules/react-remove-scroll/dist/es2015/UI.js.map +1 -1
  187. package/dist/node_modules/react-remove-scroll/dist/es2015/handleScroll.js +6 -18
  188. package/dist/node_modules/react-remove-scroll/dist/es2015/handleScroll.js.map +1 -1
  189. package/dist/node_modules/react-remove-scroll-bar/dist/es2015/component.js +5 -25
  190. package/dist/node_modules/react-remove-scroll-bar/dist/es2015/component.js.map +1 -1
  191. package/dist/node_modules/sonner/dist/index.mjs.js +26 -46
  192. package/dist/node_modules/sonner/dist/index.mjs.js.map +1 -1
  193. package/dist/node_modules/use-callback-ref/dist/es2015/useMergeRef.js +1 -27
  194. package/dist/node_modules/use-callback-ref/dist/es2015/useMergeRef.js.map +1 -1
  195. package/dist/src/index.js +1 -1
  196. package/dist/src/shadcn/ui/accordion.js +7 -7
  197. package/dist/src/shadcn/ui/avatar.js +7 -7
  198. package/dist/src/shadcn/ui/checkbox.js +3 -3
  199. package/dist/src/shadcn/ui/command.js +15 -15
  200. package/dist/src/shadcn/ui/dialog.js +14 -14
  201. package/dist/src/shadcn/ui/dropdown-menu.js +23 -23
  202. package/dist/src/shadcn/ui/hover-card.js +5 -5
  203. package/dist/src/shadcn/ui/label.js +3 -3
  204. package/dist/src/shadcn/ui/navigation-menu.js +15 -15
  205. package/dist/src/shadcn/ui/navigation-menu.js.map +1 -1
  206. package/dist/src/shadcn/ui/popover.js +6 -32
  207. package/dist/src/shadcn/ui/popover.js.map +1 -1
  208. package/dist/src/shadcn/ui/progress.js +3 -3
  209. package/dist/src/shadcn/ui/radio-group.js +5 -5
  210. package/dist/src/shadcn/ui/select.js +19 -19
  211. package/dist/src/shadcn/ui/separator.js +3 -3
  212. package/dist/src/shadcn/ui/sheet.js +14 -14
  213. package/dist/src/shadcn/ui/switch.js +3 -3
  214. package/dist/src/shadcn/ui/tabs.js +8 -8
  215. package/dist/src/shadcn/ui/toggle-group.js +5 -5
  216. package/dist/src/shadcn/ui/toggle.js +3 -3
  217. package/dist/src/shadcn/ui/tooltip.js +7 -7
  218. package/dist/src/tailwindTheme.js +12 -12
  219. package/dist/src/tailwindTheme.js.map +1 -1
  220. package/dist/tailwind-manifest.js +10978 -9482
  221. package/dist/types/src/shadcn/ui/command.d.ts +8 -44
  222. package/dist/types/src/shadcn/ui/popover.d.ts +4 -8
  223. package/dist/types/src/shadcn/ui/sheet.d.ts +1 -1
  224. package/dist/types/src/tailwindTheme.d.ts +4 -6
  225. package/dist/types/tailwind.config.d.ts +4 -6
  226. package/package.json +31 -11
  227. package/dist/_virtual/index.js +0 -4
  228. package/dist/_virtual/index.js.map +0 -1
  229. package/dist/_virtual/use-sync-external-store-shim.development.js +0 -4
  230. package/dist/_virtual/use-sync-external-store-shim.development.js.map +0 -1
  231. package/dist/_virtual/use-sync-external-store-shim.production.js +0 -4
  232. package/dist/_virtual/use-sync-external-store-shim.production.js.map +0 -1
  233. package/dist/node_modules/@radix-ui/react-arrow/dist/index.mjs.js +0 -26
  234. package/dist/node_modules/@radix-ui/react-arrow/dist/index.mjs.js.map +0 -1
  235. package/dist/node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs.js +0 -18
  236. package/dist/node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs.js.map +0 -1
  237. package/dist/node_modules/cmdk/dist/chunk-NZJY6EH4.mjs.js +0 -4
  238. package/dist/node_modules/cmdk/dist/chunk-NZJY6EH4.mjs.js.map +0 -1
  239. package/dist/node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.mjs.js.map +0 -1
  240. package/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +0 -107
  241. package/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.map +0 -1
  242. package/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js +0 -78
  243. package/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js.map +0 -1
  244. package/dist/node_modules/use-sync-external-store/shim/index.js +0 -13
  245. package/dist/node_modules/use-sync-external-store/shim/index.js.map +0 -1
@@ -1,172 +1,150 @@
1
- 'use client';
2
- import * as React from 'react';
3
- import * as ReactDOM from 'react-dom';
4
- import { clamp } from '../../number/dist/index.mjs.js';
5
- import { composeEventHandlers } from '../../primitive/dist/index.mjs.js';
6
- import { createCollection } from '../../react-collection/dist/index.mjs.js';
7
- import { useComposedRefs } from '../../react-compose-refs/dist/index.mjs.js';
8
- import { createContextScope } from '../../react-context/dist/index.mjs.js';
9
- import { useDirection } from '../../react-direction/dist/index.mjs.js';
10
- import { DismissableLayer } from '../../react-dismissable-layer/dist/index.mjs.js';
11
- import { useFocusGuards } from '../../react-focus-guards/dist/index.mjs.js';
12
- import { FocusScope } from '../../react-focus-scope/dist/index.mjs.js';
13
- import { useId } from '../../react-id/dist/index.mjs.js';
14
- import { createPopperScope, Anchor, Content, Arrow, Root as Root2$1 } from '../../react-popper/dist/index.mjs.js';
15
- import { Portal as Portal$1 } from '../../react-portal/dist/index.mjs.js';
16
- import { Primitive } from '../../react-primitive/dist/index.mjs.js';
17
- import { createSlot } from '../node_modules/@radix-ui/react-slot/dist/index.mjs.js';
18
- import { useCallbackRef } from '../../react-use-callback-ref/dist/index.mjs.js';
19
- import { useControllableState } from '../../react-use-controllable-state/dist/index.mjs.js';
20
- import { useLayoutEffect as useLayoutEffect2 } from '../../react-use-layout-effect/dist/index.mjs.js';
21
- import { usePrevious } from '../../react-use-previous/dist/index.mjs.js';
22
- import { VISUALLY_HIDDEN_STYLES } from '../../react-visually-hidden/dist/index.mjs.js';
1
+ import _extends from '../../../@babel/runtime/helpers/esm/extends.js';
2
+ import { forwardRef, createElement, useState, useRef, useEffect, useCallback, Fragment, useMemo } from 'react';
3
+ import { createPortal } from 'react-dom';
4
+ import { clamp as $ae6933e535247d3d$export$7d15b64cf5a3a4c4 } from '../../number/dist/index.mjs.js';
5
+ import { composeEventHandlers as $e42e1063c40fb3ef$export$b9ecd428b558ff10 } from '../../primitive/dist/index.mjs.js';
6
+ import { createCollection as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from '../../react-collection/dist/index.mjs.js';
7
+ import { useComposedRefs as $6ed0406888f73fc4$export$c7b2cbe3552a0d05 } from '../../react-compose-refs/dist/index.mjs.js';
8
+ import { createContextScope as $c512c27ab02ef895$export$50c7b4e9d9f19c1 } from '../../react-context/dist/index.mjs.js';
9
+ import { useDirection as $f631663db3294ace$export$b39126d51d94e6f3 } from '../../react-direction/dist/index.mjs.js';
10
+ import { DismissableLayer as $5cb92bef7577960e$export$177fb62ff3ec1f22 } from '../../react-dismissable-layer/dist/index.mjs.js';
11
+ import { useFocusGuards as $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c } from '../../react-focus-guards/dist/index.mjs.js';
12
+ import { FocusScope as $d3863c46a17e8a28$export$20e40289641fbbb6 } from '../../react-focus-scope/dist/index.mjs.js';
13
+ import { useId as $1746a345f3d73bb7$export$f680877a34711e37 } from '../../react-id/dist/index.mjs.js';
14
+ import { createPopperScope as $cf1ac5d9fe0e8206$export$722aac194ae923, Anchor as $cf1ac5d9fe0e8206$export$b688253958b8dfe7, Root as $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, Content as $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 } from '../../react-popper/dist/index.mjs.js';
15
+ import { Portal as $f1701beae083dbae$export$602eac185826482c } from '../../react-portal/dist/index.mjs.js';
16
+ import { Primitive as $8927f6f2acc4f386$export$250ffa63cdc0d034 } from '../../react-primitive/dist/index.mjs.js';
17
+ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../node_modules/@radix-ui/react-slot/dist/index.mjs.js';
18
+ import { useCallbackRef as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a } from '../../react-use-callback-ref/dist/index.mjs.js';
19
+ import { useControllableState as $71cd76cc60e0454e$export$6f32135080cb4c3 } from '../../react-use-controllable-state/dist/index.mjs.js';
20
+ import { useLayoutEffect as $9f79659886946c16$export$e5c5a5f917a5871c } from '../../react-use-layout-effect/dist/index.mjs.js';
21
+ import { usePrevious as $010c2913dbd2fe3d$export$5cae361ad82dce8b } from '../../react-use-previous/dist/index.mjs.js';
22
+ import { VisuallyHidden as $ea1ef594cf570d83$export$439d29a4e110a164 } from '../../react-visually-hidden/dist/index.mjs.js';
23
23
  import { hideOthers } from '../../../aria-hidden/dist/es2015/index.js';
24
24
  import ReactRemoveScroll from '../../../react-remove-scroll/dist/es2015/Combination.js';
25
- import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
26
25
 
27
- var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
28
- var SELECTION_KEYS = [" ", "Enter"];
29
- var SELECT_NAME = "Select";
30
- var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
31
- var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
32
- createCollectionScope,
33
- createPopperScope
26
+ const $cc7e05a45900e73f$var$OPEN_KEYS = [
27
+ ' ',
28
+ 'Enter',
29
+ 'ArrowUp',
30
+ 'ArrowDown'
31
+ ];
32
+ const $cc7e05a45900e73f$var$SELECTION_KEYS = [
33
+ ' ',
34
+ 'Enter'
35
+ ];
36
+ /* -------------------------------------------------------------------------------------------------
37
+ * Select
38
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SELECT_NAME = 'Select';
39
+ const [$cc7e05a45900e73f$var$Collection, $cc7e05a45900e73f$var$useCollection, $cc7e05a45900e73f$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($cc7e05a45900e73f$var$SELECT_NAME);
40
+ const [$cc7e05a45900e73f$var$createSelectContext, $cc7e05a45900e73f$export$286727a75dc039bd] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($cc7e05a45900e73f$var$SELECT_NAME, [
41
+ $cc7e05a45900e73f$var$createCollectionScope,
42
+ $cf1ac5d9fe0e8206$export$722aac194ae923
34
43
  ]);
35
- var usePopperScope = createPopperScope();
36
- var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
37
- var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
38
- var Select = (props) => {
39
- const {
40
- __scopeSelect,
41
- children,
42
- open: openProp,
43
- defaultOpen,
44
- onOpenChange,
45
- value: valueProp,
46
- defaultValue,
47
- onValueChange,
48
- dir,
49
- name,
50
- autoComplete,
51
- disabled,
52
- required,
53
- form
54
- } = props;
55
- const popperScope = usePopperScope(__scopeSelect);
56
- const [trigger, setTrigger] = React.useState(null);
57
- const [valueNode, setValueNode] = React.useState(null);
58
- const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
59
- const direction = useDirection(dir);
60
- const [open, setOpen] = useControllableState({
61
- prop: openProp,
62
- defaultProp: defaultOpen ?? false,
63
- onChange: onOpenChange,
64
- caller: SELECT_NAME
65
- });
66
- const [value, setValue] = useControllableState({
67
- prop: valueProp,
68
- defaultProp: defaultValue,
69
- onChange: onValueChange,
70
- caller: SELECT_NAME
71
- });
72
- const triggerPointerDownPosRef = React.useRef(null);
73
- const isFormControl = trigger ? form || !!trigger.closest("form") : true;
74
- const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
75
- const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
76
- return /* @__PURE__ */ jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsxs(
77
- SelectProvider,
78
- {
79
- required,
80
- scope: __scopeSelect,
81
- trigger,
82
- onTriggerChange: setTrigger,
83
- valueNode,
84
- onValueNodeChange: setValueNode,
85
- valueNodeHasChildren,
86
- onValueNodeHasChildrenChange: setValueNodeHasChildren,
87
- contentId: useId(),
88
- value,
89
- onValueChange: setValue,
90
- open,
91
- onOpenChange: setOpen,
92
- dir: direction,
93
- triggerPointerDownPosRef,
94
- disabled,
95
- children: [
96
- /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
97
- SelectNativeOptionsProvider,
98
- {
99
- scope: props.__scopeSelect,
100
- onNativeOptionAdd: React.useCallback((option) => {
101
- setNativeOptionsSet((prev) => new Set(prev).add(option));
102
- }, []),
103
- onNativeOptionRemove: React.useCallback((option) => {
104
- setNativeOptionsSet((prev) => {
44
+ const $cc7e05a45900e73f$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923();
45
+ const [$cc7e05a45900e73f$var$SelectProvider, $cc7e05a45900e73f$var$useSelectContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
46
+ const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$useSelectNativeOptionsContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
47
+ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
48
+ const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete , disabled: disabled , required: required } = props;
49
+ const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
50
+ const [trigger, setTrigger] = useState(null);
51
+ const [valueNode, setValueNode] = useState(null);
52
+ const [valueNodeHasChildren, setValueNodeHasChildren] = useState(false);
53
+ const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
54
+ const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
55
+ prop: openProp,
56
+ defaultProp: defaultOpen,
57
+ onChange: onOpenChange
58
+ });
59
+ const [value, setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
60
+ prop: valueProp,
61
+ defaultProp: defaultValue,
62
+ onChange: onValueChange
63
+ });
64
+ const triggerPointerDownPosRef = useRef(null); // We set this to true by default so that events bubble to forms without JS (SSR)
65
+ const isFormControl = trigger ? Boolean(trigger.closest('form')) : true;
66
+ const [nativeOptionsSet, setNativeOptionsSet] = useState(new Set()); // The native `select` only associates the correct default value if the corresponding
67
+ // `option` is rendered as a child **at the same time** as itself.
68
+ // Because it might take a few renders for our items to gather the information to build
69
+ // the native `option`(s), we generate a key on the `select` to make sure React re-builds it
70
+ // each time the options change.
71
+ const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
72
+ ).join(';');
73
+ return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectProvider, {
74
+ required: required,
75
+ scope: __scopeSelect,
76
+ trigger: trigger,
77
+ onTriggerChange: setTrigger,
78
+ valueNode: valueNode,
79
+ onValueNodeChange: setValueNode,
80
+ valueNodeHasChildren: valueNodeHasChildren,
81
+ onValueNodeHasChildrenChange: setValueNodeHasChildren,
82
+ contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
83
+ value: value,
84
+ onValueChange: setValue,
85
+ open: open,
86
+ onOpenChange: setOpen,
87
+ dir: direction,
88
+ triggerPointerDownPosRef: triggerPointerDownPosRef,
89
+ disabled: disabled
90
+ }, /*#__PURE__*/ createElement($cc7e05a45900e73f$var$Collection.Provider, {
91
+ scope: __scopeSelect
92
+ }, /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectNativeOptionsProvider, {
93
+ scope: props.__scopeSelect,
94
+ onNativeOptionAdd: useCallback((option)=>{
95
+ setNativeOptionsSet((prev)=>new Set(prev).add(option)
96
+ );
97
+ }, []),
98
+ onNativeOptionRemove: useCallback((option)=>{
99
+ setNativeOptionsSet((prev)=>{
105
100
  const optionsSet = new Set(prev);
106
101
  optionsSet.delete(option);
107
102
  return optionsSet;
108
- });
109
- }, []),
110
- children
111
- }
112
- ) }),
113
- isFormControl ? /* @__PURE__ */ jsxs(
114
- SelectBubbleInput,
115
- {
116
- "aria-hidden": true,
117
- required,
118
- tabIndex: -1,
119
- name,
120
- autoComplete,
121
- value,
122
- onChange: (event) => setValue(event.target.value),
123
- disabled,
124
- form,
125
- children: [
126
- value === void 0 ? /* @__PURE__ */ jsx("option", { value: "" }) : null,
127
- Array.from(nativeOptionsSet)
128
- ]
129
- },
130
- nativeSelectKey
131
- ) : null
132
- ]
133
- }
134
- ) });
103
+ });
104
+ }, [])
105
+ }, children)), isFormControl ? /*#__PURE__*/ createElement($cc7e05a45900e73f$var$BubbleSelect, {
106
+ key: nativeSelectKey,
107
+ "aria-hidden": true,
108
+ required: required,
109
+ tabIndex: -1,
110
+ name: name,
111
+ autoComplete: autoComplete,
112
+ value: value // enable form autofill
113
+ ,
114
+ onChange: (event)=>setValue(event.target.value)
115
+ ,
116
+ disabled: disabled
117
+ }, value === undefined ? /*#__PURE__*/ createElement("option", {
118
+ value: ""
119
+ }) : null, Array.from(nativeOptionsSet)) : null));
135
120
  };
136
- Select.displayName = SELECT_NAME;
137
- var TRIGGER_NAME = "SelectTrigger";
138
- var SelectTrigger = React.forwardRef(
139
- (props, forwardedRef) => {
140
- const { __scopeSelect, disabled = false, ...triggerProps } = props;
141
- const popperScope = usePopperScope(__scopeSelect);
142
- const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
121
+ /* -------------------------------------------------------------------------------------------------
122
+ * SelectTrigger
123
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$TRIGGER_NAME = 'SelectTrigger';
124
+ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
125
+ const { __scopeSelect: __scopeSelect , disabled: disabled = false , ...triggerProps } = props;
126
+ const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
127
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$TRIGGER_NAME, __scopeSelect);
143
128
  const isDisabled = context.disabled || disabled;
144
- const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
145
- const getItems = useCollection(__scopeSelect);
146
- const pointerTypeRef = React.useRef("touch");
147
- const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
148
- const enabledItems = getItems().filter((item) => !item.disabled);
149
- const currentItem = enabledItems.find((item) => item.value === context.value);
150
- const nextItem = findNextItem(enabledItems, search, currentItem);
151
- if (nextItem !== void 0) {
152
- context.onValueChange(nextItem.value);
153
- }
129
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.onTriggerChange);
130
+ const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
131
+ const [searchRef, handleTypeaheadSearch, resetTypeahead] = $cc7e05a45900e73f$var$useTypeaheadSearch((search)=>{
132
+ const enabledItems = getItems().filter((item)=>!item.disabled
133
+ );
134
+ const currentItem = enabledItems.find((item)=>item.value === context.value
135
+ );
136
+ const nextItem = $cc7e05a45900e73f$var$findNextItem(enabledItems, search, currentItem);
137
+ if (nextItem !== undefined) context.onValueChange(nextItem.value);
154
138
  });
155
- const handleOpen = (pointerEvent) => {
156
- if (!isDisabled) {
157
- context.onOpenChange(true);
158
- resetTypeahead();
159
- }
160
- if (pointerEvent) {
161
- context.triggerPointerDownPosRef.current = {
162
- x: Math.round(pointerEvent.pageX),
163
- y: Math.round(pointerEvent.pageY)
164
- };
165
- }
139
+ const handleOpen = ()=>{
140
+ if (!isDisabled) {
141
+ context.onOpenChange(true); // reset typeahead when we open
142
+ resetTypeahead();
143
+ }
166
144
  };
167
- return /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
168
- Primitive.button,
169
- {
145
+ return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends({
146
+ asChild: true
147
+ }, popperScope), /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
170
148
  type: "button",
171
149
  role: "combobox",
172
150
  "aria-controls": context.contentId,
@@ -174,985 +152,1006 @@ var SelectTrigger = React.forwardRef(
174
152
  "aria-required": context.required,
175
153
  "aria-autocomplete": "none",
176
154
  dir: context.dir,
177
- "data-state": context.open ? "open" : "closed",
155
+ "data-state": context.open ? 'open' : 'closed',
178
156
  disabled: isDisabled,
179
- "data-disabled": isDisabled ? "" : void 0,
180
- "data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0,
181
- ...triggerProps,
182
- ref: composedRefs,
183
- onClick: composeEventHandlers(triggerProps.onClick, (event) => {
184
- event.currentTarget.focus();
185
- if (pointerTypeRef.current !== "mouse") {
186
- handleOpen(event);
187
- }
157
+ "data-disabled": isDisabled ? '' : undefined,
158
+ "data-placeholder": $cc7e05a45900e73f$var$shouldShowPlaceholder(context.value) ? '' : undefined
159
+ }, triggerProps, {
160
+ ref: composedRefs // Enable compatibility with native label or custom `Label` "click" for Safari:
161
+ ,
162
+ onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(triggerProps.onClick, (event)=>{
163
+ // Whilst browsers generally have no issue focusing the trigger when clicking
164
+ // on a label, Safari seems to struggle with the fact that there's no `onClick`.
165
+ // We force `focus` in this case. Note: this doesn't create any other side-effect
166
+ // because we are preventing default in `onPointerDown` so effectively
167
+ // this only runs for a label "click"
168
+ event.currentTarget.focus();
188
169
  }),
189
- onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
190
- pointerTypeRef.current = event.pointerType;
191
- const target = event.target;
192
- if (target.hasPointerCapture(event.pointerId)) {
193
- target.releasePointerCapture(event.pointerId);
194
- }
195
- if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") {
196
- handleOpen(event);
197
- event.preventDefault();
198
- }
170
+ onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(triggerProps.onPointerDown, (event)=>{
171
+ // prevent implicit pointer capture
172
+ // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
173
+ const target = event.target;
174
+ if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
175
+ // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
176
+ // but not when the control key is pressed (avoiding MacOS right click)
177
+ if (event.button === 0 && event.ctrlKey === false) {
178
+ handleOpen();
179
+ context.triggerPointerDownPosRef.current = {
180
+ x: Math.round(event.pageX),
181
+ y: Math.round(event.pageY)
182
+ }; // prevent trigger from stealing focus from the active item after opening.
183
+ event.preventDefault();
184
+ }
199
185
  }),
200
- onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => {
201
- const isTypingAhead = searchRef.current !== "";
202
- const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
203
- if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
204
- if (isTypingAhead && event.key === " ") return;
205
- if (OPEN_KEYS.includes(event.key)) {
206
- handleOpen();
207
- event.preventDefault();
208
- }
186
+ onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(triggerProps.onKeyDown, (event)=>{
187
+ const isTypingAhead = searchRef.current !== '';
188
+ const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
189
+ if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
190
+ if (isTypingAhead && event.key === ' ') return;
191
+ if ($cc7e05a45900e73f$var$OPEN_KEYS.includes(event.key)) {
192
+ handleOpen();
193
+ event.preventDefault();
194
+ }
209
195
  })
210
- }
211
- ) });
212
- }
213
- );
214
- SelectTrigger.displayName = TRIGGER_NAME;
215
- var VALUE_NAME = "SelectValue";
216
- var SelectValue = React.forwardRef(
217
- (props, forwardedRef) => {
218
- const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
219
- const context = useSelectContext(VALUE_NAME, __scopeSelect);
220
- const { onValueNodeHasChildrenChange } = context;
221
- const hasChildren = children !== void 0;
222
- const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
223
- useLayoutEffect2(() => {
224
- onValueNodeHasChildrenChange(hasChildren);
225
- }, [onValueNodeHasChildrenChange, hasChildren]);
226
- return /* @__PURE__ */ jsx(
227
- Primitive.span,
228
- {
229
- ...valueProps,
230
- ref: composedRefs,
231
- style: { pointerEvents: "none" },
232
- children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx(Fragment, { children: placeholder }) : children
233
- }
234
- );
235
- }
236
- );
237
- SelectValue.displayName = VALUE_NAME;
238
- var ICON_NAME = "SelectIcon";
239
- var SelectIcon = React.forwardRef(
240
- (props, forwardedRef) => {
241
- const { __scopeSelect, children, ...iconProps } = props;
242
- return /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
243
- }
244
- );
245
- SelectIcon.displayName = ICON_NAME;
246
- var PORTAL_NAME = "SelectPortal";
247
- var SelectPortal = (props) => {
248
- return /* @__PURE__ */ jsx(Portal$1, { asChild: true, ...props });
196
+ })));
197
+ });
198
+ /* -------------------------------------------------------------------------------------------------
199
+ * SelectValue
200
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$VALUE_NAME = 'SelectValue';
201
+ const $cc7e05a45900e73f$export$e288731fd71264f0 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
202
+ // We ignore `className` and `style` as this part shouldn't be styled.
203
+ const { __scopeSelect: __scopeSelect , className: className , style: style , children: children , placeholder: placeholder = '' , ...valueProps } = props;
204
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$VALUE_NAME, __scopeSelect);
205
+ const { onValueNodeHasChildrenChange: onValueNodeHasChildrenChange } = context;
206
+ const hasChildren = children !== undefined;
207
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.onValueNodeChange);
208
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
209
+ onValueNodeHasChildrenChange(hasChildren);
210
+ }, [
211
+ onValueNodeHasChildrenChange,
212
+ hasChildren
213
+ ]);
214
+ return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({}, valueProps, {
215
+ ref: composedRefs // we don't want events from the portalled `SelectValue` children to bubble
216
+ ,
217
+ style: {
218
+ pointerEvents: 'none'
219
+ }
220
+ }), $cc7e05a45900e73f$var$shouldShowPlaceholder(context.value) ? /*#__PURE__*/ createElement(Fragment, null, placeholder) : children);
221
+ });
222
+ const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
223
+ const { __scopeSelect: __scopeSelect , children: children , ...iconProps } = props;
224
+ return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
225
+ "aria-hidden": true
226
+ }, iconProps, {
227
+ ref: forwardedRef
228
+ }), children || '▼');
229
+ });
230
+ const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
231
+ return /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, _extends({
232
+ asChild: true
233
+ }, props));
249
234
  };
250
- SelectPortal.displayName = PORTAL_NAME;
251
- var CONTENT_NAME = "SelectContent";
252
- var SelectContent = React.forwardRef(
253
- (props, forwardedRef) => {
254
- const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
255
- const [fragment, setFragment] = React.useState();
256
- useLayoutEffect2(() => {
257
- setFragment(new DocumentFragment());
235
+ /* -------------------------------------------------------------------------------------------------
236
+ * SelectContent
237
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_NAME = 'SelectContent';
238
+ const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
239
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, props.__scopeSelect);
240
+ const [fragment, setFragment] = useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
241
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
242
+ setFragment(new DocumentFragment());
258
243
  }, []);
259
244
  if (!context.open) {
260
- const frag = fragment;
261
- return frag ? ReactDOM.createPortal(
262
- /* @__PURE__ */ jsx(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props.children }) }) }),
263
- frag
264
- ) : null;
245
+ const frag = fragment;
246
+ return frag ? /*#__PURE__*/ createPortal(/*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectContentProvider, {
247
+ scope: props.__scopeSelect
248
+ }, /*#__PURE__*/ createElement($cc7e05a45900e73f$var$Collection.Slot, {
249
+ scope: props.__scopeSelect
250
+ }, /*#__PURE__*/ createElement("div", null, props.children))), frag) : null;
265
251
  }
266
- return /* @__PURE__ */ jsx(SelectContentImpl, { ...props, ref: forwardedRef });
267
- }
268
- );
269
- SelectContent.displayName = CONTENT_NAME;
270
- var CONTENT_MARGIN = 10;
271
- var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME);
272
- var CONTENT_IMPL_NAME = "SelectContentImpl";
273
- var Slot = createSlot("SelectContent.RemoveScroll");
274
- var SelectContentImpl = React.forwardRef(
275
- (props, forwardedRef) => {
276
- const {
277
- __scopeSelect,
278
- position = "item-aligned",
279
- onCloseAutoFocus,
280
- onEscapeKeyDown,
281
- onPointerDownOutside,
282
- //
283
- // PopperContent props
284
- side,
285
- sideOffset,
286
- align,
287
- alignOffset,
288
- arrowPadding,
289
- collisionBoundary,
290
- collisionPadding,
291
- sticky,
292
- hideWhenDetached,
293
- avoidCollisions,
294
- //
295
- ...contentProps
296
- } = props;
297
- const context = useSelectContext(CONTENT_NAME, __scopeSelect);
298
- const [content, setContent] = React.useState(null);
299
- const [viewport, setViewport] = React.useState(null);
300
- const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
301
- const [selectedItem, setSelectedItem] = React.useState(null);
302
- const [selectedItemText, setSelectedItemText] = React.useState(
303
- null
252
+ return /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectContentImpl, _extends({}, props, {
253
+ ref: forwardedRef
254
+ }));
255
+ });
256
+ /* -------------------------------------------------------------------------------------------------
257
+ * SelectContentImpl
258
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_MARGIN = 10;
259
+ const [$cc7e05a45900e73f$var$SelectContentProvider, $cc7e05a45900e73f$var$useSelectContentContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
260
+ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
261
+ const { __scopeSelect: __scopeSelect , position: position = 'item-aligned' , onCloseAutoFocus: onCloseAutoFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , side: //
262
+ // PopperContent props
263
+ side , sideOffset: sideOffset , align: align , alignOffset: alignOffset , arrowPadding: arrowPadding , collisionBoundary: collisionBoundary , collisionPadding: collisionPadding , sticky: sticky , hideWhenDetached: hideWhenDetached , avoidCollisions: avoidCollisions , //
264
+ ...contentProps } = props;
265
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
266
+ const [content, setContent] = useState(null);
267
+ const [viewport, setViewport] = useState(null);
268
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node)
304
269
  );
305
- const getItems = useCollection(__scopeSelect);
306
- const [isPositioned, setIsPositioned] = React.useState(false);
307
- const firstValidItemFoundRef = React.useRef(false);
308
- React.useEffect(() => {
309
- if (content) return hideOthers(content);
310
- }, [content]);
311
- useFocusGuards();
312
- const focusFirst = React.useCallback(
313
- (candidates) => {
314
- const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
270
+ const [selectedItem, setSelectedItem] = useState(null);
271
+ const [selectedItemText, setSelectedItemText] = useState(null);
272
+ const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
273
+ const [isPositioned, setIsPositioned] = useState(false);
274
+ const firstValidItemFoundRef = useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
275
+ useEffect(()=>{
276
+ if (content) return hideOthers(content);
277
+ }, [
278
+ content
279
+ ]); // Make sure the whole tree has focus guards as our `Select` may be
280
+ // the last element in the DOM (because of the `Portal`)
281
+ $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
282
+ const focusFirst = useCallback((candidates)=>{
283
+ const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
284
+ );
315
285
  const [lastItem] = restItems.slice(-1);
316
286
  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
317
- for (const candidate of candidates) {
318
- if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
319
- candidate?.scrollIntoView({ block: "nearest" });
320
- if (candidate === firstItem && viewport) viewport.scrollTop = 0;
321
- if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
322
- candidate?.focus();
323
- if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
287
+ for (const candidate of candidates){
288
+ // if focus is already where we want to go, we don't want to keep going through the candidates
289
+ if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
290
+ candidate === null || candidate === void 0 || candidate.scrollIntoView({
291
+ block: 'nearest'
292
+ }); // viewport might have padding so scroll to its edges when focusing first/last items.
293
+ if (candidate === firstItem && viewport) viewport.scrollTop = 0;
294
+ if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
295
+ candidate === null || candidate === void 0 || candidate.focus();
296
+ if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
324
297
  }
325
- },
326
- [getItems, viewport]
327
- );
328
- const focusSelectedItem = React.useCallback(
329
- () => focusFirst([selectedItem, content]),
330
- [focusFirst, selectedItem, content]
331
- );
332
- React.useEffect(() => {
333
- if (isPositioned) {
334
- focusSelectedItem();
335
- }
336
- }, [isPositioned, focusSelectedItem]);
337
- const { onOpenChange, triggerPointerDownPosRef } = context;
338
- React.useEffect(() => {
339
- if (content) {
340
- let pointerMoveDelta = { x: 0, y: 0 };
341
- const handlePointerMove = (event) => {
342
- pointerMoveDelta = {
343
- x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),
344
- y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0))
345
- };
346
- };
347
- const handlePointerUp = (event) => {
348
- if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
349
- event.preventDefault();
350
- } else {
351
- if (!content.contains(event.target)) {
352
- onOpenChange(false);
298
+ }, [
299
+ getItems,
300
+ viewport
301
+ ]);
302
+ const focusSelectedItem = useCallback(()=>focusFirst([
303
+ selectedItem,
304
+ content
305
+ ])
306
+ , [
307
+ focusFirst,
308
+ selectedItem,
309
+ content
310
+ ]); // Since this is not dependent on layout, we want to ensure this runs at the same time as
311
+ // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.
312
+ useEffect(()=>{
313
+ if (isPositioned) focusSelectedItem();
314
+ }, [
315
+ isPositioned,
316
+ focusSelectedItem
317
+ ]); // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
318
+ // and close on `pointerup` outside.
319
+ const { onOpenChange: onOpenChange , triggerPointerDownPosRef: triggerPointerDownPosRef } = context;
320
+ useEffect(()=>{
321
+ if (content) {
322
+ let pointerMoveDelta = {
323
+ x: 0,
324
+ y: 0
325
+ };
326
+ const handlePointerMove = (event)=>{
327
+ var _triggerPointerDownPo, _triggerPointerDownPo2, _triggerPointerDownPo3, _triggerPointerDownPo4;
328
+ pointerMoveDelta = {
329
+ x: Math.abs(Math.round(event.pageX) - ((_triggerPointerDownPo = (_triggerPointerDownPo2 = triggerPointerDownPosRef.current) === null || _triggerPointerDownPo2 === void 0 ? void 0 : _triggerPointerDownPo2.x) !== null && _triggerPointerDownPo !== void 0 ? _triggerPointerDownPo : 0)),
330
+ y: Math.abs(Math.round(event.pageY) - ((_triggerPointerDownPo3 = (_triggerPointerDownPo4 = triggerPointerDownPosRef.current) === null || _triggerPointerDownPo4 === void 0 ? void 0 : _triggerPointerDownPo4.y) !== null && _triggerPointerDownPo3 !== void 0 ? _triggerPointerDownPo3 : 0))
331
+ };
332
+ };
333
+ const handlePointerUp = (event)=>{
334
+ // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.
335
+ if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) event.preventDefault();
336
+ else // otherwise, if the event was outside the content, close.
337
+ if (!content.contains(event.target)) onOpenChange(false);
338
+ document.removeEventListener('pointermove', handlePointerMove);
339
+ triggerPointerDownPosRef.current = null;
340
+ };
341
+ if (triggerPointerDownPosRef.current !== null) {
342
+ document.addEventListener('pointermove', handlePointerMove);
343
+ document.addEventListener('pointerup', handlePointerUp, {
344
+ capture: true,
345
+ once: true
346
+ });
353
347
  }
354
- }
355
- document.removeEventListener("pointermove", handlePointerMove);
356
- triggerPointerDownPosRef.current = null;
357
- };
358
- if (triggerPointerDownPosRef.current !== null) {
359
- document.addEventListener("pointermove", handlePointerMove);
360
- document.addEventListener("pointerup", handlePointerUp, { capture: true, once: true });
348
+ return ()=>{
349
+ document.removeEventListener('pointermove', handlePointerMove);
350
+ document.removeEventListener('pointerup', handlePointerUp, {
351
+ capture: true
352
+ });
353
+ };
361
354
  }
362
- return () => {
363
- document.removeEventListener("pointermove", handlePointerMove);
364
- document.removeEventListener("pointerup", handlePointerUp, { capture: true });
355
+ }, [
356
+ content,
357
+ onOpenChange,
358
+ triggerPointerDownPosRef
359
+ ]);
360
+ useEffect(()=>{
361
+ const close = ()=>onOpenChange(false)
362
+ ;
363
+ window.addEventListener('blur', close);
364
+ window.addEventListener('resize', close);
365
+ return ()=>{
366
+ window.removeEventListener('blur', close);
367
+ window.removeEventListener('resize', close);
365
368
  };
366
- }
367
- }, [content, onOpenChange, triggerPointerDownPosRef]);
368
- React.useEffect(() => {
369
- const close = () => onOpenChange(false);
370
- window.addEventListener("blur", close);
371
- window.addEventListener("resize", close);
372
- return () => {
373
- window.removeEventListener("blur", close);
374
- window.removeEventListener("resize", close);
375
- };
376
- }, [onOpenChange]);
377
- const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {
378
- const enabledItems = getItems().filter((item) => !item.disabled);
379
- const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);
380
- const nextItem = findNextItem(enabledItems, search, currentItem);
381
- if (nextItem) {
382
- setTimeout(() => nextItem.ref.current.focus());
383
- }
369
+ }, [
370
+ onOpenChange
371
+ ]);
372
+ const [searchRef, handleTypeaheadSearch] = $cc7e05a45900e73f$var$useTypeaheadSearch((search)=>{
373
+ const enabledItems = getItems().filter((item)=>!item.disabled
374
+ );
375
+ const currentItem = enabledItems.find((item)=>item.ref.current === document.activeElement
376
+ );
377
+ const nextItem = $cc7e05a45900e73f$var$findNextItem(enabledItems, search, currentItem);
378
+ if (nextItem) /**
379
+ * Imperative focus during keydown is risky so we prevent React's batching updates
380
+ * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
381
+ */ setTimeout(()=>nextItem.ref.current.focus()
382
+ );
384
383
  });
385
- const itemRefCallback = React.useCallback(
386
- (node, value, disabled) => {
384
+ const itemRefCallback = useCallback((node, value, disabled)=>{
387
385
  const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
388
- const isSelectedItem = context.value !== void 0 && context.value === value;
386
+ const isSelectedItem = context.value !== undefined && context.value === value;
389
387
  if (isSelectedItem || isFirstValidItem) {
390
- setSelectedItem(node);
391
- if (isFirstValidItem) firstValidItemFoundRef.current = true;
388
+ setSelectedItem(node);
389
+ if (isFirstValidItem) firstValidItemFoundRef.current = true;
392
390
  }
393
- },
394
- [context.value]
395
- );
396
- const handleItemLeave = React.useCallback(() => content?.focus(), [content]);
397
- const itemTextRefCallback = React.useCallback(
398
- (node, value, disabled) => {
391
+ }, [
392
+ context.value
393
+ ]);
394
+ const handleItemLeave = useCallback(()=>content === null || content === void 0 ? void 0 : content.focus()
395
+ , [
396
+ content
397
+ ]);
398
+ const itemTextRefCallback = useCallback((node, value, disabled)=>{
399
399
  const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
400
- const isSelectedItem = context.value !== void 0 && context.value === value;
401
- if (isSelectedItem || isFirstValidItem) {
402
- setSelectedItemText(node);
403
- }
404
- },
405
- [context.value]
406
- );
407
- const SelectPosition = position === "popper" ? SelectPopperPosition : SelectItemAlignedPosition;
408
- const popperContentProps = SelectPosition === SelectPopperPosition ? {
409
- side,
410
- sideOffset,
411
- align,
412
- alignOffset,
413
- arrowPadding,
414
- collisionBoundary,
415
- collisionPadding,
416
- sticky,
417
- hideWhenDetached,
418
- avoidCollisions
400
+ const isSelectedItem = context.value !== undefined && context.value === value;
401
+ if (isSelectedItem || isFirstValidItem) setSelectedItemText(node);
402
+ }, [
403
+ context.value
404
+ ]);
405
+ const SelectPosition = position === 'popper' ? $cc7e05a45900e73f$var$SelectPopperPosition : $cc7e05a45900e73f$var$SelectItemAlignedPosition; // Silently ignore props that are not supported by `SelectItemAlignedPosition`
406
+ const popperContentProps = SelectPosition === $cc7e05a45900e73f$var$SelectPopperPosition ? {
407
+ side: side,
408
+ sideOffset: sideOffset,
409
+ align: align,
410
+ alignOffset: alignOffset,
411
+ arrowPadding: arrowPadding,
412
+ collisionBoundary: collisionBoundary,
413
+ collisionPadding: collisionPadding,
414
+ sticky: sticky,
415
+ hideWhenDetached: hideWhenDetached,
416
+ avoidCollisions: avoidCollisions
419
417
  } : {};
420
- return /* @__PURE__ */ jsx(
421
- SelectContentProvider,
422
- {
418
+ return /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectContentProvider, {
423
419
  scope: __scopeSelect,
420
+ content: content,
421
+ viewport: viewport,
422
+ onViewportChange: setViewport,
423
+ itemRefCallback: itemRefCallback,
424
+ selectedItem: selectedItem,
425
+ onItemLeave: handleItemLeave,
426
+ itemTextRefCallback: itemTextRefCallback,
427
+ focusSelectedItem: focusSelectedItem,
428
+ selectedItemText: selectedItemText,
429
+ position: position,
430
+ isPositioned: isPositioned,
431
+ searchRef: searchRef
432
+ }, /*#__PURE__*/ createElement(ReactRemoveScroll, {
433
+ as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
434
+ allowPinchZoom: true
435
+ }, /*#__PURE__*/ createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
436
+ asChild: true // we make sure we're not trapping once it's been closed
437
+ ,
438
+ trapped: context.open,
439
+ onMountAutoFocus: (event)=>{
440
+ // we prevent open autofocus because we manually focus the selected item
441
+ event.preventDefault();
442
+ },
443
+ onUnmountAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onCloseAutoFocus, (event)=>{
444
+ var _context$trigger;
445
+ (_context$trigger = context.trigger) === null || _context$trigger === void 0 || _context$trigger.focus({
446
+ preventScroll: true
447
+ });
448
+ event.preventDefault();
449
+ })
450
+ }, /*#__PURE__*/ createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, {
451
+ asChild: true,
452
+ disableOutsidePointerEvents: true,
453
+ onEscapeKeyDown: onEscapeKeyDown,
454
+ onPointerDownOutside: onPointerDownOutside // When focus is trapped, a focusout event may still happen.
455
+ ,
456
+ onFocusOutside: (event)=>event.preventDefault()
457
+ ,
458
+ onDismiss: ()=>context.onOpenChange(false)
459
+ }, /*#__PURE__*/ createElement(SelectPosition, _extends({
460
+ role: "listbox",
461
+ id: context.contentId,
462
+ "data-state": context.open ? 'open' : 'closed',
463
+ dir: context.dir,
464
+ onContextMenu: (event)=>event.preventDefault()
465
+ }, contentProps, popperContentProps, {
466
+ onPlaced: ()=>setIsPositioned(true)
467
+ ,
468
+ ref: composedRefs,
469
+ style: {
470
+ // flex layout so we can place the scroll buttons properly
471
+ display: 'flex',
472
+ flexDirection: 'column',
473
+ // reset the outline by default as the content MAY get focused
474
+ outline: 'none',
475
+ ...contentProps.style
476
+ },
477
+ onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(contentProps.onKeyDown, (event)=>{
478
+ const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; // select should not be navigated using tab key so we prevent it
479
+ if (event.key === 'Tab') event.preventDefault();
480
+ if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
481
+ if ([
482
+ 'ArrowUp',
483
+ 'ArrowDown',
484
+ 'Home',
485
+ 'End'
486
+ ].includes(event.key)) {
487
+ const items = getItems().filter((item)=>!item.disabled
488
+ );
489
+ let candidateNodes = items.map((item)=>item.ref.current
490
+ );
491
+ if ([
492
+ 'ArrowUp',
493
+ 'End'
494
+ ].includes(event.key)) candidateNodes = candidateNodes.slice().reverse();
495
+ if ([
496
+ 'ArrowUp',
497
+ 'ArrowDown'
498
+ ].includes(event.key)) {
499
+ const currentElement = event.target;
500
+ const currentIndex = candidateNodes.indexOf(currentElement);
501
+ candidateNodes = candidateNodes.slice(currentIndex + 1);
502
+ }
503
+ /**
504
+ * Imperative focus during keydown is risky so we prevent React's batching updates
505
+ * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
506
+ */ setTimeout(()=>focusFirst(candidateNodes)
507
+ );
508
+ event.preventDefault();
509
+ }
510
+ })
511
+ }))))));
512
+ });
513
+ const $cc7e05a45900e73f$var$SelectItemAlignedPosition = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
514
+ const { __scopeSelect: __scopeSelect , onPlaced: onPlaced , ...popperProps } = props;
515
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
516
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
517
+ const [contentWrapper, setContentWrapper] = useState(null);
518
+ const [content, setContent] = useState(null);
519
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node)
520
+ );
521
+ const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
522
+ const shouldExpandOnScrollRef = useRef(false);
523
+ const shouldRepositionRef = useRef(true);
524
+ const { viewport: viewport , selectedItem: selectedItem , selectedItemText: selectedItemText , focusSelectedItem: focusSelectedItem } = contentContext;
525
+ const position = useCallback(()=>{
526
+ if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
527
+ const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
528
+ // Horizontal positioning
529
+ // -----------------------------------------------------------------------------------------
530
+ const contentRect = content.getBoundingClientRect();
531
+ const valueNodeRect = context.valueNode.getBoundingClientRect();
532
+ const itemTextRect = selectedItemText.getBoundingClientRect();
533
+ if (context.dir !== 'rtl') {
534
+ const itemTextOffset = itemTextRect.left - contentRect.left;
535
+ const left = valueNodeRect.left - itemTextOffset;
536
+ const leftDelta = triggerRect.left - left;
537
+ const minContentWidth = triggerRect.width + leftDelta;
538
+ const contentWidth = Math.max(minContentWidth, contentRect.width);
539
+ const rightEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
540
+ const clampedLeft = $ae6933e535247d3d$export$7d15b64cf5a3a4c4(left, [
541
+ $cc7e05a45900e73f$var$CONTENT_MARGIN,
542
+ rightEdge - contentWidth
543
+ ]);
544
+ contentWrapper.style.minWidth = minContentWidth + 'px';
545
+ contentWrapper.style.left = clampedLeft + 'px';
546
+ } else {
547
+ const itemTextOffset = contentRect.right - itemTextRect.right;
548
+ const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
549
+ const rightDelta = window.innerWidth - triggerRect.right - right;
550
+ const minContentWidth = triggerRect.width + rightDelta;
551
+ const contentWidth = Math.max(minContentWidth, contentRect.width);
552
+ const leftEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
553
+ const clampedRight = $ae6933e535247d3d$export$7d15b64cf5a3a4c4(right, [
554
+ $cc7e05a45900e73f$var$CONTENT_MARGIN,
555
+ leftEdge - contentWidth
556
+ ]);
557
+ contentWrapper.style.minWidth = minContentWidth + 'px';
558
+ contentWrapper.style.right = clampedRight + 'px';
559
+ } // -----------------------------------------------------------------------------------------
560
+ // Vertical positioning
561
+ // -----------------------------------------------------------------------------------------
562
+ const items = getItems();
563
+ const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
564
+ const itemsHeight = viewport.scrollHeight;
565
+ const contentStyles = window.getComputedStyle(content);
566
+ const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
567
+ const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
568
+ const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
569
+ const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
570
+ const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
571
+ const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
572
+ const viewportStyles = window.getComputedStyle(viewport);
573
+ const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
574
+ const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
575
+ const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - $cc7e05a45900e73f$var$CONTENT_MARGIN;
576
+ const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
577
+ const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
578
+ const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
579
+ const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
580
+ const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
581
+ const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
582
+ if (willAlignWithoutTopOverflow) {
583
+ const isLastItem = selectedItem === items[items.length - 1].ref.current;
584
+ contentWrapper.style.bottom = "0px";
585
+ const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
586
+ const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
587
+ const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
588
+ contentWrapper.style.height = height + 'px';
589
+ } else {
590
+ const isFirstItem = selectedItem === items[0].ref.current;
591
+ contentWrapper.style.top = "0px";
592
+ const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
593
+ const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
594
+ contentWrapper.style.height = height + 'px';
595
+ viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
596
+ }
597
+ contentWrapper.style.margin = `${$cc7e05a45900e73f$var$CONTENT_MARGIN}px 0`;
598
+ contentWrapper.style.minHeight = minContentHeight + 'px';
599
+ contentWrapper.style.maxHeight = availableHeight + 'px'; // -----------------------------------------------------------------------------------------
600
+ onPlaced === null || onPlaced === void 0 || onPlaced(); // we don't want the initial scroll position adjustment to trigger "expand on scroll"
601
+ // so we explicitly turn it on only after they've registered.
602
+ requestAnimationFrame(()=>shouldExpandOnScrollRef.current = true
603
+ );
604
+ }
605
+ }, [
606
+ getItems,
607
+ context.trigger,
608
+ context.valueNode,
609
+ contentWrapper,
424
610
  content,
425
611
  viewport,
426
- onViewportChange: setViewport,
427
- itemRefCallback,
428
612
  selectedItem,
429
- onItemLeave: handleItemLeave,
430
- itemTextRefCallback,
431
- focusSelectedItem,
432
613
  selectedItemText,
614
+ context.dir,
615
+ onPlaced
616
+ ]);
617
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>position()
618
+ , [
619
+ position
620
+ ]); // copy z-index from content to wrapper
621
+ const [contentZIndex, setContentZIndex] = useState();
622
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
623
+ if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
624
+ }, [
625
+ content
626
+ ]); // When the viewport becomes scrollable at the top, the scroll up button will mount.
627
+ // Because it is part of the normal flow, it will push down the viewport, thus throwing our
628
+ // trigger => selectedItem alignment off by the amount the viewport was pushed down.
629
+ // We wait for this to happen and then re-run the positining logic one more time to account for it.
630
+ const handleScrollButtonChange = useCallback((node)=>{
631
+ if (node && shouldRepositionRef.current === true) {
632
+ position();
633
+ focusSelectedItem === null || focusSelectedItem === void 0 || focusSelectedItem();
634
+ shouldRepositionRef.current = false;
635
+ }
636
+ }, [
433
637
  position,
434
- isPositioned,
435
- searchRef,
436
- children: /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
437
- FocusScope,
438
- {
439
- asChild: true,
440
- trapped: context.open,
441
- onMountAutoFocus: (event) => {
442
- event.preventDefault();
443
- },
444
- onUnmountAutoFocus: composeEventHandlers(onCloseAutoFocus, (event) => {
445
- context.trigger?.focus({ preventScroll: true });
446
- event.preventDefault();
447
- }),
448
- children: /* @__PURE__ */ jsx(
449
- DismissableLayer,
450
- {
451
- asChild: true,
452
- disableOutsidePointerEvents: true,
453
- onEscapeKeyDown,
454
- onPointerDownOutside,
455
- onFocusOutside: (event) => event.preventDefault(),
456
- onDismiss: () => context.onOpenChange(false),
457
- children: /* @__PURE__ */ jsx(
458
- SelectPosition,
459
- {
460
- role: "listbox",
461
- id: context.contentId,
462
- "data-state": context.open ? "open" : "closed",
463
- dir: context.dir,
464
- onContextMenu: (event) => event.preventDefault(),
465
- ...contentProps,
466
- ...popperContentProps,
467
- onPlaced: () => setIsPositioned(true),
468
- ref: composedRefs,
469
- style: {
470
- // flex layout so we can place the scroll buttons properly
471
- display: "flex",
472
- flexDirection: "column",
473
- // reset the outline by default as the content MAY get focused
474
- outline: "none",
475
- ...contentProps.style
476
- },
477
- onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
478
- const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
479
- if (event.key === "Tab") event.preventDefault();
480
- if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
481
- if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
482
- const items = getItems().filter((item) => !item.disabled);
483
- let candidateNodes = items.map((item) => item.ref.current);
484
- if (["ArrowUp", "End"].includes(event.key)) {
485
- candidateNodes = candidateNodes.slice().reverse();
486
- }
487
- if (["ArrowUp", "ArrowDown"].includes(event.key)) {
488
- const currentElement = event.target;
489
- const currentIndex = candidateNodes.indexOf(currentElement);
490
- candidateNodes = candidateNodes.slice(currentIndex + 1);
491
- }
492
- setTimeout(() => focusFirst(candidateNodes));
493
- event.preventDefault();
494
- }
495
- })
496
- }
497
- )
498
- }
499
- )
500
- }
501
- ) })
502
- }
503
- );
504
- }
505
- );
506
- SelectContentImpl.displayName = CONTENT_IMPL_NAME;
507
- var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
508
- var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
509
- const { __scopeSelect, onPlaced, ...popperProps } = props;
510
- const context = useSelectContext(CONTENT_NAME, __scopeSelect);
511
- const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);
512
- const [contentWrapper, setContentWrapper] = React.useState(null);
513
- const [content, setContent] = React.useState(null);
514
- const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
515
- const getItems = useCollection(__scopeSelect);
516
- const shouldExpandOnScrollRef = React.useRef(false);
517
- const shouldRepositionRef = React.useRef(true);
518
- const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
519
- const position = React.useCallback(() => {
520
- if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
521
- const triggerRect = context.trigger.getBoundingClientRect();
522
- const contentRect = content.getBoundingClientRect();
523
- const valueNodeRect = context.valueNode.getBoundingClientRect();
524
- const itemTextRect = selectedItemText.getBoundingClientRect();
525
- if (context.dir !== "rtl") {
526
- const itemTextOffset = itemTextRect.left - contentRect.left;
527
- const left = valueNodeRect.left - itemTextOffset;
528
- const leftDelta = triggerRect.left - left;
529
- const minContentWidth = triggerRect.width + leftDelta;
530
- const contentWidth = Math.max(minContentWidth, contentRect.width);
531
- const rightEdge = window.innerWidth - CONTENT_MARGIN;
532
- const clampedLeft = clamp(left, [
533
- CONTENT_MARGIN,
534
- // Prevents the content from going off the starting edge of the
535
- // viewport. It may still go off the ending edge, but this can be
536
- // controlled by the user since they may want to manage overflow in a
537
- // specific way.
538
- // https://github.com/radix-ui/primitives/issues/2049
539
- Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
540
- ]);
541
- contentWrapper.style.minWidth = minContentWidth + "px";
542
- contentWrapper.style.left = clampedLeft + "px";
543
- } else {
544
- const itemTextOffset = contentRect.right - itemTextRect.right;
545
- const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
546
- const rightDelta = window.innerWidth - triggerRect.right - right;
547
- const minContentWidth = triggerRect.width + rightDelta;
548
- const contentWidth = Math.max(minContentWidth, contentRect.width);
549
- const leftEdge = window.innerWidth - CONTENT_MARGIN;
550
- const clampedRight = clamp(right, [
551
- CONTENT_MARGIN,
552
- Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
553
- ]);
554
- contentWrapper.style.minWidth = minContentWidth + "px";
555
- contentWrapper.style.right = clampedRight + "px";
556
- }
557
- const items = getItems();
558
- const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
559
- const itemsHeight = viewport.scrollHeight;
560
- const contentStyles = window.getComputedStyle(content);
561
- const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
562
- const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
563
- const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
564
- const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
565
- const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
566
- const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
567
- const viewportStyles = window.getComputedStyle(viewport);
568
- const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
569
- const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
570
- const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
571
- const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
572
- const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
573
- const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
574
- const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
575
- const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
576
- const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
577
- if (willAlignWithoutTopOverflow) {
578
- const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current;
579
- contentWrapper.style.bottom = "0px";
580
- const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
581
- const clampedTriggerMiddleToBottomEdge = Math.max(
582
- triggerMiddleToBottomEdge,
583
- selectedItemHalfHeight + // viewport might have padding bottom, include it to avoid a scrollable viewport
584
- (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth
585
- );
586
- const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
587
- contentWrapper.style.height = height + "px";
588
- } else {
589
- const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current;
590
- contentWrapper.style.top = "0px";
591
- const clampedTopEdgeToTriggerMiddle = Math.max(
592
- topEdgeToTriggerMiddle,
593
- contentBorderTopWidth + viewport.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
594
- (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight
595
- );
596
- const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
597
- contentWrapper.style.height = height + "px";
598
- viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
599
- }
600
- contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;
601
- contentWrapper.style.minHeight = minContentHeight + "px";
602
- contentWrapper.style.maxHeight = availableHeight + "px";
603
- onPlaced?.();
604
- requestAnimationFrame(() => shouldExpandOnScrollRef.current = true);
605
- }
606
- }, [
607
- getItems,
608
- context.trigger,
609
- context.valueNode,
610
- contentWrapper,
611
- content,
612
- viewport,
613
- selectedItem,
614
- selectedItemText,
615
- context.dir,
616
- onPlaced
617
- ]);
618
- useLayoutEffect2(() => position(), [position]);
619
- const [contentZIndex, setContentZIndex] = React.useState();
620
- useLayoutEffect2(() => {
621
- if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
622
- }, [content]);
623
- const handleScrollButtonChange = React.useCallback(
624
- (node) => {
625
- if (node && shouldRepositionRef.current === true) {
626
- position();
627
- focusSelectedItem?.();
628
- shouldRepositionRef.current = false;
629
- }
630
- },
631
- [position, focusSelectedItem]
632
- );
633
- return /* @__PURE__ */ jsx(
634
- SelectViewportProvider,
635
- {
636
- scope: __scopeSelect,
637
- contentWrapper,
638
- shouldExpandOnScrollRef,
639
- onScrollButtonChange: handleScrollButtonChange,
640
- children: /* @__PURE__ */ jsx(
641
- "div",
642
- {
643
- ref: setContentWrapper,
644
- style: {
645
- display: "flex",
646
- flexDirection: "column",
647
- position: "fixed",
638
+ focusSelectedItem
639
+ ]);
640
+ return /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectViewportProvider, {
641
+ scope: __scopeSelect,
642
+ contentWrapper: contentWrapper,
643
+ shouldExpandOnScrollRef: shouldExpandOnScrollRef,
644
+ onScrollButtonChange: handleScrollButtonChange
645
+ }, /*#__PURE__*/ createElement("div", {
646
+ ref: setContentWrapper,
647
+ style: {
648
+ display: 'flex',
649
+ flexDirection: 'column',
650
+ position: 'fixed',
648
651
  zIndex: contentZIndex
649
- },
650
- children: /* @__PURE__ */ jsx(
651
- Primitive.div,
652
- {
653
- ...popperProps,
654
- ref: composedRefs,
655
- style: {
656
- // When we get the height of the content, it includes borders. If we were to set
657
- // the height without having `boxSizing: 'border-box'` it would be too big.
658
- boxSizing: "border-box",
659
- // We need to ensure the content doesn't get taller than the wrapper
660
- maxHeight: "100%",
661
- ...popperProps.style
662
- }
663
- }
664
- )
665
652
  }
666
- )
667
- }
668
- );
653
+ }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, popperProps, {
654
+ ref: composedRefs,
655
+ style: {
656
+ // When we get the height of the content, it includes borders. If we were to set
657
+ // the height without having `boxSizing: 'border-box'` it would be too big.
658
+ boxSizing: 'border-box',
659
+ // We need to ensure the content doesn't get taller than the wrapper
660
+ maxHeight: '100%',
661
+ ...popperProps.style
662
+ }
663
+ }))));
669
664
  });
670
- SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
671
- var POPPER_POSITION_NAME = "SelectPopperPosition";
672
- var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
673
- const {
674
- __scopeSelect,
675
- align = "start",
676
- collisionPadding = CONTENT_MARGIN,
677
- ...popperProps
678
- } = props;
679
- const popperScope = usePopperScope(__scopeSelect);
680
- return /* @__PURE__ */ jsx(
681
- Content,
682
- {
683
- ...popperScope,
684
- ...popperProps,
685
- ref: forwardedRef,
686
- align,
687
- collisionPadding,
688
- style: {
689
- // Ensure border-box for floating-ui calculations
690
- boxSizing: "border-box",
691
- ...popperProps.style,
692
- // re-namespace exposed content custom properties
693
- ...{
694
- "--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)",
695
- "--radix-select-content-available-width": "var(--radix-popper-available-width)",
696
- "--radix-select-content-available-height": "var(--radix-popper-available-height)",
697
- "--radix-select-trigger-width": "var(--radix-popper-anchor-width)",
698
- "--radix-select-trigger-height": "var(--radix-popper-anchor-height)"
665
+ const $cc7e05a45900e73f$var$SelectPopperPosition = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
666
+ const { __scopeSelect: __scopeSelect , align: align = 'start' , collisionPadding: collisionPadding = $cc7e05a45900e73f$var$CONTENT_MARGIN , ...popperProps } = props;
667
+ const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
668
+ return /*#__PURE__*/ createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends({}, popperScope, popperProps, {
669
+ ref: forwardedRef,
670
+ align: align,
671
+ collisionPadding: collisionPadding,
672
+ style: {
673
+ // Ensure border-box for floating-ui calculations
674
+ boxSizing: 'border-box',
675
+ ...popperProps.style,
676
+ '--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',
677
+ '--radix-select-content-available-width': 'var(--radix-popper-available-width)',
678
+ '--radix-select-content-available-height': 'var(--radix-popper-available-height)',
679
+ '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
680
+ '--radix-select-trigger-height': 'var(--radix-popper-anchor-height)'
699
681
  }
700
- }
701
- }
702
- );
682
+ }));
703
683
  });
704
- SelectPopperPosition.displayName = POPPER_POSITION_NAME;
705
- var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME, {});
706
- var VIEWPORT_NAME = "SelectViewport";
707
- var SelectViewport = React.forwardRef(
708
- (props, forwardedRef) => {
709
- const { __scopeSelect, nonce, ...viewportProps } = props;
710
- const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
711
- const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
712
- const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
713
- const prevScrollTopRef = React.useRef(0);
714
- return /* @__PURE__ */ jsxs(Fragment, { children: [
715
- /* @__PURE__ */ jsx(
716
- "style",
717
- {
718
- dangerouslySetInnerHTML: {
684
+ /* -------------------------------------------------------------------------------------------------
685
+ * SelectViewport
686
+ * -----------------------------------------------------------------------------------------------*/ const [$cc7e05a45900e73f$var$SelectViewportProvider, $cc7e05a45900e73f$var$useSelectViewportContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, {});
687
+ const $cc7e05a45900e73f$var$VIEWPORT_NAME = 'SelectViewport';
688
+ const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
689
+ const { __scopeSelect: __scopeSelect , ...viewportProps } = props;
690
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
691
+ const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
692
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentContext.onViewportChange);
693
+ const prevScrollTopRef = useRef(0);
694
+ return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement("style", {
695
+ dangerouslySetInnerHTML: {
719
696
  __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
720
- },
721
- nonce
722
697
  }
723
- ),
724
- /* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
725
- Primitive.div,
726
- {
727
- "data-radix-select-viewport": "",
728
- role: "presentation",
729
- ...viewportProps,
730
- ref: composedRefs,
731
- style: {
698
+ }), /*#__PURE__*/ createElement($cc7e05a45900e73f$var$Collection.Slot, {
699
+ scope: __scopeSelect
700
+ }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
701
+ "data-radix-select-viewport": "",
702
+ role: "presentation"
703
+ }, viewportProps, {
704
+ ref: composedRefs,
705
+ style: {
732
706
  // we use position: 'relative' here on the `viewport` so that when we call
733
707
  // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
734
708
  // (independent of the scrollUpButton).
735
- position: "relative",
709
+ position: 'relative',
736
710
  flex: 1,
737
- // Viewport should only be scrollable in the vertical direction.
738
- // This won't work in vertical writing modes, so we'll need to
739
- // revisit this if/when that is supported
740
- // https://developer.chrome.com/blog/vertical-form-controls
741
- overflow: "hidden auto",
711
+ overflow: 'auto',
742
712
  ...viewportProps.style
743
- },
744
- onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
713
+ },
714
+ onScroll: $e42e1063c40fb3ef$export$b9ecd428b558ff10(viewportProps.onScroll, (event)=>{
745
715
  const viewport = event.currentTarget;
746
- const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
747
- if (shouldExpandOnScrollRef?.current && contentWrapper) {
748
- const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
749
- if (scrolledBy > 0) {
750
- const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
751
- const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
752
- const cssHeight = parseFloat(contentWrapper.style.height);
753
- const prevHeight = Math.max(cssMinHeight, cssHeight);
754
- if (prevHeight < availableHeight) {
755
- const nextHeight = prevHeight + scrolledBy;
756
- const clampedNextHeight = Math.min(availableHeight, nextHeight);
757
- const heightDiff = nextHeight - clampedNextHeight;
758
- contentWrapper.style.height = clampedNextHeight + "px";
759
- if (contentWrapper.style.bottom === "0px") {
760
- viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
761
- contentWrapper.style.justifyContent = "flex-end";
762
- }
716
+ const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } = viewportContext;
717
+ if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
718
+ const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
719
+ if (scrolledBy > 0) {
720
+ const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
721
+ const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
722
+ const cssHeight = parseFloat(contentWrapper.style.height);
723
+ const prevHeight = Math.max(cssMinHeight, cssHeight);
724
+ if (prevHeight < availableHeight) {
725
+ const nextHeight = prevHeight + scrolledBy;
726
+ const clampedNextHeight = Math.min(availableHeight, nextHeight);
727
+ const heightDiff = nextHeight - clampedNextHeight;
728
+ contentWrapper.style.height = clampedNextHeight + 'px';
729
+ if (contentWrapper.style.bottom === '0px') {
730
+ viewport.scrollTop = heightDiff > 0 ? heightDiff : 0; // ensure the content stays pinned to the bottom
731
+ contentWrapper.style.justifyContent = 'flex-end';
732
+ }
733
+ }
763
734
  }
764
- }
765
735
  }
766
736
  prevScrollTopRef.current = viewport.scrollTop;
767
- })
768
- }
769
- ) })
770
- ] });
771
- }
772
- );
773
- SelectViewport.displayName = VIEWPORT_NAME;
774
- var GROUP_NAME = "SelectGroup";
775
- var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
776
- var SelectGroup = React.forwardRef(
777
- (props, forwardedRef) => {
778
- const { __scopeSelect, ...groupProps } = props;
779
- const groupId = useId();
780
- return /* @__PURE__ */ jsx(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
781
- }
782
- );
783
- SelectGroup.displayName = GROUP_NAME;
784
- var LABEL_NAME = "SelectLabel";
785
- var SelectLabel = React.forwardRef(
786
- (props, forwardedRef) => {
787
- const { __scopeSelect, ...labelProps } = props;
788
- const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
789
- return /* @__PURE__ */ jsx(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
790
- }
791
- );
792
- SelectLabel.displayName = LABEL_NAME;
793
- var ITEM_NAME = "SelectItem";
794
- var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
795
- var SelectItem = React.forwardRef(
796
- (props, forwardedRef) => {
797
- const {
798
- __scopeSelect,
799
- value,
800
- disabled = false,
801
- textValue: textValueProp,
802
- ...itemProps
803
- } = props;
804
- const context = useSelectContext(ITEM_NAME, __scopeSelect);
805
- const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
737
+ })
738
+ }))));
739
+ });
740
+ /* -------------------------------------------------------------------------------------------------
741
+ * SelectGroup
742
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$GROUP_NAME = 'SelectGroup';
743
+ const [$cc7e05a45900e73f$var$SelectGroupContextProvider, $cc7e05a45900e73f$var$useSelectGroupContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$GROUP_NAME);
744
+ const $cc7e05a45900e73f$export$ee25a334c55de1f4 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
745
+ const { __scopeSelect: __scopeSelect , ...groupProps } = props;
746
+ const groupId = $1746a345f3d73bb7$export$f680877a34711e37();
747
+ return /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectGroupContextProvider, {
748
+ scope: __scopeSelect,
749
+ id: groupId
750
+ }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
751
+ role: "group",
752
+ "aria-labelledby": groupId
753
+ }, groupProps, {
754
+ ref: forwardedRef
755
+ })));
756
+ });
757
+ /* -------------------------------------------------------------------------------------------------
758
+ * SelectLabel
759
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$LABEL_NAME = 'SelectLabel';
760
+ const $cc7e05a45900e73f$export$f67338d29bd972f8 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
761
+ const { __scopeSelect: __scopeSelect , ...labelProps } = props;
762
+ const groupContext = $cc7e05a45900e73f$var$useSelectGroupContext($cc7e05a45900e73f$var$LABEL_NAME, __scopeSelect);
763
+ return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
764
+ id: groupContext.id
765
+ }, labelProps, {
766
+ ref: forwardedRef
767
+ }));
768
+ });
769
+ /* -------------------------------------------------------------------------------------------------
770
+ * SelectItem
771
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_NAME = 'SelectItem';
772
+ const [$cc7e05a45900e73f$var$SelectItemContextProvider, $cc7e05a45900e73f$var$useSelectItemContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$ITEM_NAME);
773
+ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
774
+ const { __scopeSelect: __scopeSelect , value: value , disabled: disabled = false , textValue: textValueProp , ...itemProps } = props;
775
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
776
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
806
777
  const isSelected = context.value === value;
807
- const [textValue, setTextValue] = React.useState(textValueProp ?? "");
808
- const [isFocused, setIsFocused] = React.useState(false);
809
- const composedRefs = useComposedRefs(
810
- forwardedRef,
811
- (node) => contentContext.itemRefCallback?.(node, value, disabled)
812
- );
813
- const textId = useId();
814
- const pointerTypeRef = React.useRef("touch");
815
- const handleSelect = () => {
816
- if (!disabled) {
817
- context.onValueChange(value);
818
- context.onOpenChange(false);
819
- }
778
+ const [textValue, setTextValue] = useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
779
+ const [isFocused, setIsFocused] = useState(false);
780
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>{
781
+ var _contentContext$itemR;
782
+ return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
783
+ });
784
+ const textId = $1746a345f3d73bb7$export$f680877a34711e37();
785
+ const handleSelect = ()=>{
786
+ if (!disabled) {
787
+ context.onValueChange(value);
788
+ context.onOpenChange(false);
789
+ }
820
790
  };
821
- if (value === "") {
822
- throw new Error(
823
- "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
824
- );
825
- }
826
- return /* @__PURE__ */ jsx(
827
- SelectItemContextProvider,
828
- {
791
+ if (value === '') throw new Error('A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.');
792
+ return /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectItemContextProvider, {
829
793
  scope: __scopeSelect,
830
- value,
831
- disabled,
832
- textId,
833
- isSelected,
834
- onItemTextChange: React.useCallback((node) => {
835
- setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
836
- }, []),
837
- children: /* @__PURE__ */ jsx(
838
- Collection.ItemSlot,
839
- {
840
- scope: __scopeSelect,
841
- value,
842
- disabled,
843
- textValue,
844
- children: /* @__PURE__ */ jsx(
845
- Primitive.div,
846
- {
847
- role: "option",
848
- "aria-labelledby": textId,
849
- "data-highlighted": isFocused ? "" : void 0,
850
- "aria-selected": isSelected && isFocused,
851
- "data-state": isSelected ? "checked" : "unchecked",
852
- "aria-disabled": disabled || void 0,
853
- "data-disabled": disabled ? "" : void 0,
854
- tabIndex: disabled ? void 0 : -1,
855
- ...itemProps,
856
- ref: composedRefs,
857
- onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
858
- onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
859
- onClick: composeEventHandlers(itemProps.onClick, () => {
860
- if (pointerTypeRef.current !== "mouse") handleSelect();
861
- }),
862
- onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
863
- if (pointerTypeRef.current === "mouse") handleSelect();
864
- }),
865
- onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
866
- pointerTypeRef.current = event.pointerType;
867
- }),
868
- onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
869
- pointerTypeRef.current = event.pointerType;
870
- if (disabled) {
871
- contentContext.onItemLeave?.();
872
- } else if (pointerTypeRef.current === "mouse") {
873
- event.currentTarget.focus({ preventScroll: true });
874
- }
875
- }),
876
- onPointerLeave: composeEventHandlers(itemProps.onPointerLeave, (event) => {
877
- if (event.currentTarget === document.activeElement) {
878
- contentContext.onItemLeave?.();
879
- }
880
- }),
881
- onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => {
882
- const isTypingAhead = contentContext.searchRef?.current !== "";
883
- if (isTypingAhead && event.key === " ") return;
884
- if (SELECTION_KEYS.includes(event.key)) handleSelect();
885
- if (event.key === " ") event.preventDefault();
886
- })
887
- }
888
- )
889
- }
890
- )
891
- }
892
- );
893
- }
894
- );
895
- SelectItem.displayName = ITEM_NAME;
896
- var ITEM_TEXT_NAME = "SelectItemText";
897
- var SelectItemText = React.forwardRef(
898
- (props, forwardedRef) => {
899
- const { __scopeSelect, className, style, ...itemTextProps } = props;
900
- const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
901
- const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
902
- const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
903
- const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
904
- const [itemTextNode, setItemTextNode] = React.useState(null);
905
- const composedRefs = useComposedRefs(
906
- forwardedRef,
907
- (node) => setItemTextNode(node),
908
- itemContext.onItemTextChange,
909
- (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)
910
- );
911
- const textContent = itemTextNode?.textContent;
912
- const nativeOption = React.useMemo(
913
- () => /* @__PURE__ */ jsx("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
914
- [itemContext.disabled, itemContext.value, textContent]
915
- );
916
- const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
917
- useLayoutEffect2(() => {
918
- onNativeOptionAdd(nativeOption);
919
- return () => onNativeOptionRemove(nativeOption);
920
- }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
921
- return /* @__PURE__ */ jsxs(Fragment, { children: [
922
- /* @__PURE__ */ jsx(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
923
- itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null
924
- ] });
925
- }
926
- );
927
- SelectItemText.displayName = ITEM_TEXT_NAME;
928
- var ITEM_INDICATOR_NAME = "SelectItemIndicator";
929
- var SelectItemIndicator = React.forwardRef(
930
- (props, forwardedRef) => {
931
- const { __scopeSelect, ...itemIndicatorProps } = props;
932
- const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
933
- return itemContext.isSelected ? /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
934
- }
935
- );
936
- SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
937
- var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
938
- var SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
939
- const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
940
- const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
941
- const [canScrollUp, setCanScrollUp] = React.useState(false);
942
- const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
943
- useLayoutEffect2(() => {
944
- if (contentContext.viewport && contentContext.isPositioned) {
945
- let handleScroll2 = function() {
946
- const canScrollUp2 = viewport.scrollTop > 0;
947
- setCanScrollUp(canScrollUp2);
948
- };
949
- const viewport = contentContext.viewport;
950
- handleScroll2();
951
- viewport.addEventListener("scroll", handleScroll2);
952
- return () => viewport.removeEventListener("scroll", handleScroll2);
953
- }
954
- }, [contentContext.viewport, contentContext.isPositioned]);
955
- return canScrollUp ? /* @__PURE__ */ jsx(
956
- SelectScrollButtonImpl,
957
- {
958
- ...props,
959
- ref: composedRefs,
960
- onAutoScroll: () => {
961
- const { viewport, selectedItem } = contentContext;
962
- if (viewport && selectedItem) {
963
- viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
964
- }
965
- }
966
- }
967
- ) : null;
794
+ value: value,
795
+ disabled: disabled,
796
+ textId: textId,
797
+ isSelected: isSelected,
798
+ onItemTextChange: useCallback((node)=>{
799
+ setTextValue((prevTextValue)=>{
800
+ var _node$textContent;
801
+ return prevTextValue || ((_node$textContent = node === null || node === void 0 ? void 0 : node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '').trim();
802
+ });
803
+ }, [])
804
+ }, /*#__PURE__*/ createElement($cc7e05a45900e73f$var$Collection.ItemSlot, {
805
+ scope: __scopeSelect,
806
+ value: value,
807
+ disabled: disabled,
808
+ textValue: textValue
809
+ }, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
810
+ role: "option",
811
+ "aria-labelledby": textId,
812
+ "data-highlighted": isFocused ? '' : undefined // `isFocused` caveat fixes stuttering in VoiceOver
813
+ ,
814
+ "aria-selected": isSelected && isFocused,
815
+ "data-state": isSelected ? 'checked' : 'unchecked',
816
+ "aria-disabled": disabled || undefined,
817
+ "data-disabled": disabled ? '' : undefined,
818
+ tabIndex: disabled ? undefined : -1
819
+ }, itemProps, {
820
+ ref: composedRefs,
821
+ onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onFocus, ()=>setIsFocused(true)
822
+ ),
823
+ onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onBlur, ()=>setIsFocused(false)
824
+ ),
825
+ onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onPointerUp, handleSelect),
826
+ onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onPointerMove, (event)=>{
827
+ if (disabled) {
828
+ var _contentContext$onIte;
829
+ (_contentContext$onIte = contentContext.onItemLeave) === null || _contentContext$onIte === void 0 || _contentContext$onIte.call(contentContext);
830
+ } else // even though safari doesn't support this option, it's acceptable
831
+ // as it only means it might scroll a few pixels when using the pointer.
832
+ event.currentTarget.focus({
833
+ preventScroll: true
834
+ });
835
+ }),
836
+ onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onPointerLeave, (event)=>{
837
+ if (event.currentTarget === document.activeElement) {
838
+ var _contentContext$onIte2;
839
+ (_contentContext$onIte2 = contentContext.onItemLeave) === null || _contentContext$onIte2 === void 0 || _contentContext$onIte2.call(contentContext);
840
+ }
841
+ }),
842
+ onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(itemProps.onKeyDown, (event)=>{
843
+ var _contentContext$searc;
844
+ const isTypingAhead = ((_contentContext$searc = contentContext.searchRef) === null || _contentContext$searc === void 0 ? void 0 : _contentContext$searc.current) !== '';
845
+ if (isTypingAhead && event.key === ' ') return;
846
+ if ($cc7e05a45900e73f$var$SELECTION_KEYS.includes(event.key)) handleSelect(); // prevent page scroll if using the space key to select an item
847
+ if (event.key === ' ') event.preventDefault();
848
+ })
849
+ }))));
968
850
  });
969
- SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
970
- var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
971
- var SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
972
- const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
973
- const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
974
- const [canScrollDown, setCanScrollDown] = React.useState(false);
975
- const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
976
- useLayoutEffect2(() => {
977
- if (contentContext.viewport && contentContext.isPositioned) {
978
- let handleScroll2 = function() {
979
- const maxScroll = viewport.scrollHeight - viewport.clientHeight;
980
- const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll;
981
- setCanScrollDown(canScrollDown2);
982
- };
983
- const viewport = contentContext.viewport;
984
- handleScroll2();
985
- viewport.addEventListener("scroll", handleScroll2);
986
- return () => viewport.removeEventListener("scroll", handleScroll2);
987
- }
988
- }, [contentContext.viewport, contentContext.isPositioned]);
989
- return canScrollDown ? /* @__PURE__ */ jsx(
990
- SelectScrollButtonImpl,
991
- {
992
- ...props,
993
- ref: composedRefs,
994
- onAutoScroll: () => {
995
- const { viewport, selectedItem } = contentContext;
996
- if (viewport && selectedItem) {
997
- viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
851
+ /* -------------------------------------------------------------------------------------------------
852
+ * SelectItemText
853
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_TEXT_NAME = 'SelectItemText';
854
+ const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
855
+ // We ignore `className` and `style` as this part shouldn't be styled.
856
+ const { __scopeSelect: __scopeSelect , className: className , style: style , ...itemTextProps } = props;
857
+ const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
858
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
859
+ const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
860
+ const nativeOptionsContext = $cc7e05a45900e73f$var$useSelectNativeOptionsContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
861
+ const [itemTextNode, setItemTextNode] = useState(null);
862
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setItemTextNode(node)
863
+ , itemContext.onItemTextChange, (node)=>{
864
+ var _contentContext$itemT;
865
+ return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
866
+ });
867
+ const textContent = itemTextNode === null || itemTextNode === void 0 ? void 0 : itemTextNode.textContent;
868
+ const nativeOption = useMemo(()=>/*#__PURE__*/ createElement("option", {
869
+ key: itemContext.value,
870
+ value: itemContext.value,
871
+ disabled: itemContext.disabled
872
+ }, textContent)
873
+ , [
874
+ itemContext.disabled,
875
+ itemContext.value,
876
+ textContent
877
+ ]);
878
+ const { onNativeOptionAdd: onNativeOptionAdd , onNativeOptionRemove: onNativeOptionRemove } = nativeOptionsContext;
879
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
880
+ onNativeOptionAdd(nativeOption);
881
+ return ()=>onNativeOptionRemove(nativeOption)
882
+ ;
883
+ }, [
884
+ onNativeOptionAdd,
885
+ onNativeOptionRemove,
886
+ nativeOption
887
+ ]);
888
+ return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
889
+ id: itemContext.textId
890
+ }, itemTextProps, {
891
+ ref: composedRefs
892
+ })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? /*#__PURE__*/ createPortal(itemTextProps.children, context.valueNode) : null);
893
+ });
894
+ /* -------------------------------------------------------------------------------------------------
895
+ * SelectItemIndicator
896
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_INDICATOR_NAME = 'SelectItemIndicator';
897
+ const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
898
+ const { __scopeSelect: __scopeSelect , ...itemIndicatorProps } = props;
899
+ const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_INDICATOR_NAME, __scopeSelect);
900
+ return itemContext.isSelected ? /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
901
+ "aria-hidden": true
902
+ }, itemIndicatorProps, {
903
+ ref: forwardedRef
904
+ })) : null;
905
+ });
906
+ /* -------------------------------------------------------------------------------------------------
907
+ * SelectScrollUpButton
908
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';
909
+ const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
910
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
911
+ const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
912
+ const [canScrollUp1, setCanScrollUp] = useState(false);
913
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, viewportContext.onScrollButtonChange);
914
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
915
+ if (contentContext.viewport && contentContext.isPositioned) {
916
+ const viewport = contentContext.viewport;
917
+ function handleScroll() {
918
+ const canScrollUp = viewport.scrollTop > 0;
919
+ setCanScrollUp(canScrollUp);
920
+ }
921
+ handleScroll();
922
+ viewport.addEventListener('scroll', handleScroll);
923
+ return ()=>viewport.removeEventListener('scroll', handleScroll)
924
+ ;
998
925
  }
999
- }
1000
- }
1001
- ) : null;
926
+ }, [
927
+ contentContext.viewport,
928
+ contentContext.isPositioned
929
+ ]);
930
+ return canScrollUp1 ? /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
931
+ ref: composedRefs,
932
+ onAutoScroll: ()=>{
933
+ const { viewport: viewport , selectedItem: selectedItem } = contentContext;
934
+ if (viewport && selectedItem) viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
935
+ }
936
+ })) : null;
1002
937
  });
1003
- SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
1004
- var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
1005
- const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
1006
- const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
1007
- const autoScrollTimerRef = React.useRef(null);
1008
- const getItems = useCollection(__scopeSelect);
1009
- const clearAutoScrollTimer = React.useCallback(() => {
1010
- if (autoScrollTimerRef.current !== null) {
1011
- window.clearInterval(autoScrollTimerRef.current);
1012
- autoScrollTimerRef.current = null;
1013
- }
1014
- }, []);
1015
- React.useEffect(() => {
1016
- return () => clearAutoScrollTimer();
1017
- }, [clearAutoScrollTimer]);
1018
- useLayoutEffect2(() => {
1019
- const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
1020
- activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
1021
- }, [getItems]);
1022
- return /* @__PURE__ */ jsx(
1023
- Primitive.div,
1024
- {
1025
- "aria-hidden": true,
1026
- ...scrollIndicatorProps,
1027
- ref: forwardedRef,
1028
- style: { flexShrink: 0, ...scrollIndicatorProps.style },
1029
- onPointerDown: composeEventHandlers(scrollIndicatorProps.onPointerDown, () => {
1030
- if (autoScrollTimerRef.current === null) {
1031
- autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
938
+ /* -------------------------------------------------------------------------------------------------
939
+ * SelectScrollDownButton
940
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
941
+ const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
942
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
943
+ const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
944
+ const [canScrollDown1, setCanScrollDown] = useState(false);
945
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, viewportContext.onScrollButtonChange);
946
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
947
+ if (contentContext.viewport && contentContext.isPositioned) {
948
+ const viewport = contentContext.viewport;
949
+ function handleScroll() {
950
+ const maxScroll = viewport.scrollHeight - viewport.clientHeight; // we use Math.ceil here because if the UI is zoomed-in
951
+ // `scrollTop` is not always reported as an integer
952
+ const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
953
+ setCanScrollDown(canScrollDown);
954
+ }
955
+ handleScroll();
956
+ viewport.addEventListener('scroll', handleScroll);
957
+ return ()=>viewport.removeEventListener('scroll', handleScroll)
958
+ ;
1032
959
  }
1033
- }),
1034
- onPointerMove: composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
1035
- contentContext.onItemLeave?.();
1036
- if (autoScrollTimerRef.current === null) {
1037
- autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
960
+ }, [
961
+ contentContext.viewport,
962
+ contentContext.isPositioned
963
+ ]);
964
+ return canScrollDown1 ? /*#__PURE__*/ createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
965
+ ref: composedRefs,
966
+ onAutoScroll: ()=>{
967
+ const { viewport: viewport , selectedItem: selectedItem } = contentContext;
968
+ if (viewport && selectedItem) viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
1038
969
  }
1039
- }),
1040
- onPointerLeave: composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
1041
- clearAutoScrollTimer();
1042
- })
1043
- }
1044
- );
970
+ })) : null;
1045
971
  });
1046
- var SEPARATOR_NAME = "SelectSeparator";
1047
- var SelectSeparator = React.forwardRef(
1048
- (props, forwardedRef) => {
1049
- const { __scopeSelect, ...separatorProps } = props;
1050
- return /* @__PURE__ */ jsx(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
1051
- }
1052
- );
1053
- SelectSeparator.displayName = SEPARATOR_NAME;
1054
- var ARROW_NAME = "SelectArrow";
1055
- var SelectArrow = React.forwardRef(
1056
- (props, forwardedRef) => {
1057
- const { __scopeSelect, ...arrowProps } = props;
1058
- const popperScope = usePopperScope(__scopeSelect);
1059
- const context = useSelectContext(ARROW_NAME, __scopeSelect);
1060
- const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
1061
- return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
1062
- }
1063
- );
1064
- SelectArrow.displayName = ARROW_NAME;
1065
- var BUBBLE_INPUT_NAME = "SelectBubbleInput";
1066
- var SelectBubbleInput = React.forwardRef(
1067
- ({ __scopeSelect, value, ...props }, forwardedRef) => {
1068
- const ref = React.useRef(null);
1069
- const composedRefs = useComposedRefs(forwardedRef, ref);
1070
- const prevValue = usePrevious(value);
1071
- React.useEffect(() => {
1072
- const select = ref.current;
1073
- if (!select) return;
1074
- const selectProto = window.HTMLSelectElement.prototype;
1075
- const descriptor = Object.getOwnPropertyDescriptor(
1076
- selectProto,
1077
- "value"
1078
- );
1079
- const setValue = descriptor.set;
1080
- if (prevValue !== value && setValue) {
1081
- const event = new Event("change", { bubbles: true });
1082
- setValue.call(select, value);
1083
- select.dispatchEvent(event);
1084
- }
1085
- }, [prevValue, value]);
1086
- return /* @__PURE__ */ jsx(
1087
- Primitive.select,
1088
- {
1089
- ...props,
1090
- style: { ...VISUALLY_HIDDEN_STYLES, ...props.style },
972
+ const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
973
+ const { __scopeSelect: __scopeSelect , onAutoScroll: onAutoScroll , ...scrollIndicatorProps } = props;
974
+ const contentContext = $cc7e05a45900e73f$var$useSelectContentContext('SelectScrollButton', __scopeSelect);
975
+ const autoScrollTimerRef = useRef(null);
976
+ const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
977
+ const clearAutoScrollTimer = useCallback(()=>{
978
+ if (autoScrollTimerRef.current !== null) {
979
+ window.clearInterval(autoScrollTimerRef.current);
980
+ autoScrollTimerRef.current = null;
981
+ }
982
+ }, []);
983
+ useEffect(()=>{
984
+ return ()=>clearAutoScrollTimer()
985
+ ;
986
+ }, [
987
+ clearAutoScrollTimer
988
+ ]); // When the viewport becomes scrollable on either side, the relevant scroll button will mount.
989
+ // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)
990
+ // the viewport, potentially causing the active item to now be partially out of view.
991
+ // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.
992
+ $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
993
+ var _activeItem$ref$curre;
994
+ const activeItem = getItems().find((item)=>item.ref.current === document.activeElement
995
+ );
996
+ activeItem === null || activeItem === void 0 || (_activeItem$ref$curre = activeItem.ref.current) === null || _activeItem$ref$curre === void 0 || _activeItem$ref$curre.scrollIntoView({
997
+ block: 'nearest'
998
+ });
999
+ }, [
1000
+ getItems
1001
+ ]);
1002
+ return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
1003
+ "aria-hidden": true
1004
+ }, scrollIndicatorProps, {
1005
+ ref: forwardedRef,
1006
+ style: {
1007
+ flexShrink: 0,
1008
+ ...scrollIndicatorProps.style
1009
+ },
1010
+ onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(scrollIndicatorProps.onPointerDown, ()=>{
1011
+ if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
1012
+ }),
1013
+ onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(scrollIndicatorProps.onPointerMove, ()=>{
1014
+ var _contentContext$onIte3;
1015
+ (_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
1016
+ if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
1017
+ }),
1018
+ onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(scrollIndicatorProps.onPointerLeave, ()=>{
1019
+ clearAutoScrollTimer();
1020
+ })
1021
+ }));
1022
+ });
1023
+ const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
1024
+ const { __scopeSelect: __scopeSelect , ...separatorProps } = props;
1025
+ return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
1026
+ "aria-hidden": true
1027
+ }, separatorProps, {
1028
+ ref: forwardedRef
1029
+ }));
1030
+ });
1031
+ /* -----------------------------------------------------------------------------------------------*/ function $cc7e05a45900e73f$var$shouldShowPlaceholder(value) {
1032
+ return value === '' || value === undefined;
1033
+ }
1034
+ const $cc7e05a45900e73f$var$BubbleSelect = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
1035
+ const { value: value , ...selectProps } = props;
1036
+ const ref = useRef(null);
1037
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
1038
+ const prevValue = $010c2913dbd2fe3d$export$5cae361ad82dce8b(value); // Bubble value change to parents (e.g form change event)
1039
+ useEffect(()=>{
1040
+ const select = ref.current;
1041
+ const selectProto = window.HTMLSelectElement.prototype;
1042
+ const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value');
1043
+ const setValue = descriptor.set;
1044
+ if (prevValue !== value && setValue) {
1045
+ const event = new Event('change', {
1046
+ bubbles: true
1047
+ });
1048
+ setValue.call(select, value);
1049
+ select.dispatchEvent(event);
1050
+ }
1051
+ }, [
1052
+ prevValue,
1053
+ value
1054
+ ]);
1055
+ /**
1056
+ * We purposefully use a `select` here to support form autofill as much
1057
+ * as possible.
1058
+ *
1059
+ * We purposefully do not add the `value` attribute here to allow the value
1060
+ * to be set programatically and bubble to any parent form `onChange` event.
1061
+ * Adding the `value` will cause React to consider the programatic
1062
+ * dispatch a duplicate and it will get swallowed.
1063
+ *
1064
+ * We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
1065
+ * won't work otherwise.
1066
+ */ return /*#__PURE__*/ createElement($ea1ef594cf570d83$export$439d29a4e110a164, {
1067
+ asChild: true
1068
+ }, /*#__PURE__*/ createElement("select", _extends({}, selectProps, {
1091
1069
  ref: composedRefs,
1092
1070
  defaultValue: value
1093
- }
1094
- );
1095
- }
1096
- );
1097
- SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
1098
- function shouldShowPlaceholder(value) {
1099
- return value === "" || value === void 0;
1100
- }
1101
- function useTypeaheadSearch(onSearchChange) {
1102
- const handleSearchChange = useCallbackRef(onSearchChange);
1103
- const searchRef = React.useRef("");
1104
- const timerRef = React.useRef(0);
1105
- const handleTypeaheadSearch = React.useCallback(
1106
- (key) => {
1107
- const search = searchRef.current + key;
1108
- handleSearchChange(search);
1109
- (function updateSearch(value) {
1110
- searchRef.current = value;
1071
+ })));
1072
+ });
1073
+ $cc7e05a45900e73f$var$BubbleSelect.displayName = 'BubbleSelect';
1074
+ function $cc7e05a45900e73f$var$useTypeaheadSearch(onSearchChange) {
1075
+ const handleSearchChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onSearchChange);
1076
+ const searchRef = useRef('');
1077
+ const timerRef = useRef(0);
1078
+ const handleTypeaheadSearch = useCallback((key)=>{
1079
+ const search = searchRef.current + key;
1080
+ handleSearchChange(search);
1081
+ (function updateSearch(value) {
1082
+ searchRef.current = value;
1083
+ window.clearTimeout(timerRef.current); // Reset `searchRef` 1 second after it was last updated
1084
+ if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
1085
+ , 1000);
1086
+ })(search);
1087
+ }, [
1088
+ handleSearchChange
1089
+ ]);
1090
+ const resetTypeahead = useCallback(()=>{
1091
+ searchRef.current = '';
1111
1092
  window.clearTimeout(timerRef.current);
1112
- if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
1113
- })(search);
1114
- },
1115
- [handleSearchChange]
1116
- );
1117
- const resetTypeahead = React.useCallback(() => {
1118
- searchRef.current = "";
1119
- window.clearTimeout(timerRef.current);
1120
- }, []);
1121
- React.useEffect(() => {
1122
- return () => window.clearTimeout(timerRef.current);
1123
- }, []);
1124
- return [searchRef, handleTypeaheadSearch, resetTypeahead];
1093
+ }, []);
1094
+ useEffect(()=>{
1095
+ return ()=>window.clearTimeout(timerRef.current)
1096
+ ;
1097
+ }, []);
1098
+ return [
1099
+ searchRef,
1100
+ handleTypeaheadSearch,
1101
+ resetTypeahead
1102
+ ];
1125
1103
  }
1126
- function findNextItem(items, search, currentItem) {
1127
- const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
1128
- const normalizedSearch = isRepeated ? search[0] : search;
1129
- const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
1130
- let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));
1131
- const excludeCurrentItem = normalizedSearch.length === 1;
1132
- if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
1133
- const nextItem = wrappedItems.find(
1134
- (item) => item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
1135
- );
1136
- return nextItem !== currentItem ? nextItem : void 0;
1104
+ /**
1105
+ * This is the "meat" of the typeahead matching logic. It takes in a list of items,
1106
+ * the search and the current item, and returns the next item (or `undefined`).
1107
+ *
1108
+ * We normalize the search because if a user has repeatedly pressed a character,
1109
+ * we want the exact same behavior as if we only had that one character
1110
+ * (ie. cycle through items starting with that character)
1111
+ *
1112
+ * We also reorder the items by wrapping the array around the current item.
1113
+ * This is so we always look forward from the current item, and picking the first
1114
+ * item will always be the correct one.
1115
+ *
1116
+ * Finally, if the normalized search is exactly one character, we exclude the
1117
+ * current item from the values because otherwise it would be the first to match always
1118
+ * and focus would never move. This is as opposed to the regular case, where we
1119
+ * don't want focus to move if the current item still matches.
1120
+ */ function $cc7e05a45900e73f$var$findNextItem(items, search, currentItem) {
1121
+ const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
1122
+ );
1123
+ const normalizedSearch = isRepeated ? search[0] : search;
1124
+ const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
1125
+ let wrappedItems = $cc7e05a45900e73f$var$wrapArray(items, Math.max(currentItemIndex, 0));
1126
+ const excludeCurrentItem = normalizedSearch.length === 1;
1127
+ if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v)=>v !== currentItem
1128
+ );
1129
+ const nextItem = wrappedItems.find((item)=>item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
1130
+ );
1131
+ return nextItem !== currentItem ? nextItem : undefined;
1137
1132
  }
1138
- function wrapArray(array, startIndex) {
1139
- return array.map((_, index) => array[(startIndex + index) % array.length]);
1133
+ /**
1134
+ * Wraps an array around itself at a given start index
1135
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
1136
+ */ function $cc7e05a45900e73f$var$wrapArray(array, startIndex) {
1137
+ return array.map((_, index)=>array[(startIndex + index) % array.length]
1138
+ );
1140
1139
  }
1141
- var Root2 = Select;
1142
- var Trigger = SelectTrigger;
1143
- var Value = SelectValue;
1144
- var Icon = SelectIcon;
1145
- var Portal = SelectPortal;
1146
- var Content2 = SelectContent;
1147
- var Viewport = SelectViewport;
1148
- var Group = SelectGroup;
1149
- var Label = SelectLabel;
1150
- var Item = SelectItem;
1151
- var ItemText = SelectItemText;
1152
- var ItemIndicator = SelectItemIndicator;
1153
- var ScrollUpButton = SelectScrollUpButton;
1154
- var ScrollDownButton = SelectScrollDownButton;
1155
- var Separator = SelectSeparator;
1140
+ const $cc7e05a45900e73f$export$be92b6f5f03c0fe9 = $cc7e05a45900e73f$export$ef9b1a59e592288f;
1141
+ const $cc7e05a45900e73f$export$41fb9f06171c75f4 = $cc7e05a45900e73f$export$3ac1e88a1c0b9f1;
1142
+ const $cc7e05a45900e73f$export$4c8d1a57a761ef94 = $cc7e05a45900e73f$export$e288731fd71264f0;
1143
+ const $cc7e05a45900e73f$export$f04a61298a47a40f = $cc7e05a45900e73f$export$99b400cabb58c515;
1144
+ const $cc7e05a45900e73f$export$602eac185826482c = $cc7e05a45900e73f$export$b2af6c9944296213;
1145
+ const $cc7e05a45900e73f$export$7c6e2c02157bb7d2 = $cc7e05a45900e73f$export$c973a4b3cb86a03d;
1146
+ const $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 = $cc7e05a45900e73f$export$9ed6e7b40248d36d;
1147
+ const $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 = $cc7e05a45900e73f$export$ee25a334c55de1f4;
1148
+ const $cc7e05a45900e73f$export$b04be29aa201d4f5 = $cc7e05a45900e73f$export$f67338d29bd972f8;
1149
+ const $cc7e05a45900e73f$export$6d08773d2e66f8f2 = $cc7e05a45900e73f$export$13ef48a934230896;
1150
+ const $cc7e05a45900e73f$export$d6e5bf9c43ea9319 = $cc7e05a45900e73f$export$3572fb0fb821ff49;
1151
+ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b9198de19accfe6;
1152
+ const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
1153
+ const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
1154
+ const $cc7e05a45900e73f$export$1ff3c3f08ae963c0 = $cc7e05a45900e73f$export$eba4b1df07cb1d3;
1156
1155
 
1157
- export { Content2 as Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root2 as Root, ScrollDownButton, ScrollUpButton, Select, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, Trigger, Value, Viewport, createSelectScope };
1156
+ export { $cc7e05a45900e73f$export$7c6e2c02157bb7d2 as Content, $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 as Group, $cc7e05a45900e73f$export$f04a61298a47a40f as Icon, $cc7e05a45900e73f$export$6d08773d2e66f8f2 as Item, $cc7e05a45900e73f$export$c3468e2714d175fa as ItemIndicator, $cc7e05a45900e73f$export$d6e5bf9c43ea9319 as ItemText, $cc7e05a45900e73f$export$b04be29aa201d4f5 as Label, $cc7e05a45900e73f$export$602eac185826482c as Portal, $cc7e05a45900e73f$export$be92b6f5f03c0fe9 as Root, $cc7e05a45900e73f$export$bf1aedc3039c8d63 as ScrollDownButton, $cc7e05a45900e73f$export$2f60d3ec9ad468f2 as ScrollUpButton, $cc7e05a45900e73f$export$ef9b1a59e592288f as Select, $cc7e05a45900e73f$export$c973a4b3cb86a03d as SelectContent, $cc7e05a45900e73f$export$ee25a334c55de1f4 as SelectGroup, $cc7e05a45900e73f$export$99b400cabb58c515 as SelectIcon, $cc7e05a45900e73f$export$13ef48a934230896 as SelectItem, $cc7e05a45900e73f$export$6b9198de19accfe6 as SelectItemIndicator, $cc7e05a45900e73f$export$3572fb0fb821ff49 as SelectItemText, $cc7e05a45900e73f$export$f67338d29bd972f8 as SelectLabel, $cc7e05a45900e73f$export$b2af6c9944296213 as SelectPortal, $cc7e05a45900e73f$export$ff951e476c12189 as SelectScrollDownButton, $cc7e05a45900e73f$export$d8117927658af6d7 as SelectScrollUpButton, $cc7e05a45900e73f$export$eba4b1df07cb1d3 as SelectSeparator, $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 as SelectTrigger, $cc7e05a45900e73f$export$e288731fd71264f0 as SelectValue, $cc7e05a45900e73f$export$9ed6e7b40248d36d as SelectViewport, $cc7e05a45900e73f$export$1ff3c3f08ae963c0 as Separator, $cc7e05a45900e73f$export$41fb9f06171c75f4 as Trigger, $cc7e05a45900e73f$export$4c8d1a57a761ef94 as Value, $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 as Viewport, $cc7e05a45900e73f$export$286727a75dc039bd as createSelectScope };
1158
1157
  //# sourceMappingURL=index.mjs.js.map