@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.34

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 (427) hide show
  1. package/dist/cjs/components/Accordion/Accordion.js +4 -4
  2. package/dist/cjs/components/Accordion/AccordionContent.js +2 -2
  3. package/dist/cjs/components/Accordion/AccordionHeading.js +4 -4
  4. package/dist/cjs/components/Accordion/AccordionItem.js +13 -13
  5. package/dist/cjs/components/Alert/Alert.js +4 -4
  6. package/dist/cjs/components/Avatar/Avatar.js +6 -6
  7. package/dist/cjs/components/Badge/Badge.js +4 -10
  8. package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js +11 -0
  9. package/dist/cjs/components/Breadcrumbs/BreadcrumbsItem.js +4 -4
  10. package/dist/cjs/components/Breadcrumbs/BreadcrumbsLink.js +4 -4
  11. package/dist/cjs/components/Breadcrumbs/BreadcrumbsList.js +8 -10
  12. package/dist/cjs/components/Breadcrumbs/index.js +11 -20
  13. package/dist/cjs/components/Button/Button.js +7 -7
  14. package/dist/cjs/components/Card/Card.js +6 -6
  15. package/dist/cjs/components/Card/CardContent.js +6 -6
  16. package/dist/cjs/components/Card/CardFooter.js +6 -6
  17. package/dist/cjs/components/Card/CardHeader.js +6 -6
  18. package/dist/cjs/components/Card/CardMedia.js +6 -6
  19. package/dist/cjs/components/Chip/Group/Group.js +5 -5
  20. package/dist/cjs/components/Chip/Removable/Removable.js +5 -5
  21. package/dist/cjs/components/Chip/Toggle/Toggle.js +5 -5
  22. package/dist/cjs/components/Divider/Divider.js +4 -4
  23. package/dist/cjs/components/Dropdown/Dropdown.js +23 -0
  24. package/dist/cjs/components/Dropdown/DropdownContext.js +26 -0
  25. package/dist/cjs/components/Dropdown/DropdownHeading.js +15 -0
  26. package/dist/cjs/components/Dropdown/DropdownItem.js +14 -0
  27. package/dist/cjs/components/Dropdown/DropdownList.js +12 -0
  28. package/dist/cjs/components/Dropdown/DropdownTrigger.js +13 -0
  29. package/dist/cjs/components/Dropdown/index.js +41 -0
  30. package/dist/cjs/components/ErrorSummary/ErrorSummary.js +20 -0
  31. package/dist/cjs/components/ErrorSummary/ErrorSummaryHeading.js +6 -7
  32. package/dist/cjs/components/ErrorSummary/ErrorSummaryItem.js +2 -2
  33. package/dist/cjs/components/ErrorSummary/ErrorSummaryList.js +4 -4
  34. package/dist/cjs/components/ErrorSummary/index.js +8 -10
  35. package/dist/cjs/components/HelpText/HelpText.js +4 -10
  36. package/dist/cjs/components/Link/Link.js +6 -6
  37. package/dist/cjs/components/List/ListItem.js +4 -4
  38. package/dist/cjs/components/List/Lists.js +7 -7
  39. package/dist/cjs/components/Modal/ModaContent.js +6 -6
  40. package/dist/cjs/components/Modal/ModalDialog.js +14 -14
  41. package/dist/cjs/components/Modal/ModalFooter.js +6 -6
  42. package/dist/cjs/components/Modal/ModalHeader.js +8 -9
  43. package/dist/cjs/components/Modal/ModalRoot.js +6 -6
  44. package/dist/cjs/components/Modal/ModalTrigger.js +6 -6
  45. package/dist/cjs/components/Modal/useModalState.js +3 -3
  46. package/dist/cjs/components/Modal/useScrollLock.js +2 -2
  47. package/dist/cjs/components/Pagination/Pagination.js +2 -2
  48. package/dist/cjs/components/Pagination/PaginationButton.js +4 -4
  49. package/dist/cjs/components/Pagination/PaginationEllipsis.js +5 -5
  50. package/dist/cjs/components/Pagination/PaginationItem.js +7 -7
  51. package/dist/cjs/components/Pagination/PaginationList.js +7 -7
  52. package/dist/cjs/components/Pagination/PaginationNextPrev.js +3 -3
  53. package/dist/cjs/components/Pagination/PaginationRoot.js +5 -5
  54. package/dist/cjs/components/Pagination/usePagination.js +3 -3
  55. package/dist/cjs/components/Popover/Popover.js +20 -18
  56. package/dist/cjs/components/Popover/PopoverContext.js +4 -4
  57. package/dist/cjs/components/Popover/PopoverTrigger.js +6 -6
  58. package/dist/cjs/components/SkipLink/SkipLink.js +2 -2
  59. package/dist/cjs/components/Table/Table.js +4 -4
  60. package/dist/cjs/components/Table/TableBody.js +2 -2
  61. package/dist/cjs/components/Table/TableCell.js +2 -2
  62. package/dist/cjs/components/Table/TableHead.js +2 -2
  63. package/dist/cjs/components/Table/TableHeaderCell.js +2 -2
  64. package/dist/cjs/components/Table/TableRow.js +2 -2
  65. package/dist/cjs/components/Tabs/Tabs.js +45 -0
  66. package/dist/cjs/components/Tabs/TabsList.js +25 -0
  67. package/dist/cjs/components/Tabs/TabsPanel.js +23 -0
  68. package/dist/cjs/components/Tabs/TabsTab.js +22 -0
  69. package/dist/cjs/components/Tabs/index.js +18 -20
  70. package/dist/cjs/components/Tag/Tag.js +4 -4
  71. package/dist/cjs/components/ToggleGroup/ToggleGroup.js +41 -0
  72. package/dist/cjs/components/ToggleGroup/{ToggleGroupItem/ToggleGroupItem.js → ToggleGroupItem.js} +5 -6
  73. package/dist/cjs/components/ToggleGroup/index.js +5 -8
  74. package/dist/cjs/components/ToggleGroup/{ToggleGroupItem/useToggleGroupitem.js → useToggleGroupitem.js} +5 -5
  75. package/dist/cjs/components/Tooltip/Tooltip.js +26 -28
  76. package/dist/cjs/components/Typography/Heading/Heading.js +6 -6
  77. package/dist/cjs/components/Typography/Ingress/Ingress.js +6 -6
  78. package/dist/cjs/components/Typography/Label/Label.js +6 -6
  79. package/dist/cjs/components/Typography/Paragraph/Paragraph.js +6 -6
  80. package/dist/cjs/components/Typography/ValidationMessage/ValidationMessage.js +15 -0
  81. package/dist/cjs/components/form/CharacterCounter.js +2 -2
  82. package/dist/cjs/components/form/Checkbox/Checkbox.js +6 -6
  83. package/dist/cjs/components/form/Checkbox/CheckboxGroup.js +6 -6
  84. package/dist/cjs/components/form/Checkbox/useCheckbox.js +2 -2
  85. package/dist/cjs/components/form/Combobox/Combobox.js +17 -17
  86. package/dist/cjs/components/form/Combobox/ComboboxContext.js +2 -2
  87. package/dist/cjs/components/form/Combobox/ComboboxIdContext.js +6 -6
  88. package/dist/cjs/components/form/Combobox/Custom.js +12 -12
  89. package/dist/cjs/components/form/Combobox/Empty.js +5 -5
  90. package/dist/cjs/components/form/Combobox/Option/Description.js +4 -4
  91. package/dist/cjs/components/form/Combobox/Option/Option.js +11 -7
  92. package/dist/cjs/components/form/Combobox/Option/SelectedIcon.js +2 -2
  93. package/dist/cjs/components/form/Combobox/Option/useComboboxOption.js +8 -8
  94. package/dist/cjs/components/form/Combobox/internal/ComboboxChips.js +2 -2
  95. package/dist/cjs/components/form/Combobox/internal/ComboboxClearButton.js +5 -5
  96. package/dist/cjs/components/form/Combobox/internal/ComboboxError.js +2 -2
  97. package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +7 -7
  98. package/dist/cjs/components/form/Combobox/internal/ComboboxLabel.js +2 -2
  99. package/dist/cjs/components/form/Combobox/useCombobox.js +11 -10
  100. package/dist/cjs/components/form/Combobox/useFloatingCombobox.js +14 -16
  101. package/dist/cjs/components/form/Combobox/utilities.js +2 -7
  102. package/dist/cjs/components/form/Fieldset/Fieldset.js +10 -12
  103. package/dist/cjs/components/form/Fieldset/FieldsetContext.js +2 -2
  104. package/dist/cjs/components/form/Radio/Radio.js +4 -4
  105. package/dist/cjs/components/form/Radio/RadioGroup.js +6 -6
  106. package/dist/cjs/components/form/Radio/useRadio.js +2 -2
  107. package/dist/cjs/components/form/Search/Search.js +11 -11
  108. package/dist/cjs/components/form/Search/useSearch.js +2 -2
  109. package/dist/cjs/components/form/Select/Select.js +5 -5
  110. package/dist/cjs/components/form/Select/SelectOptgroup.js +4 -4
  111. package/dist/cjs/components/form/Select/SelectOption.js +4 -4
  112. package/dist/cjs/components/form/Select/useSelect.js +2 -2
  113. package/dist/cjs/components/form/Switch/Switch.js +4 -4
  114. package/dist/cjs/components/form/Switch/useSwitch.js +2 -2
  115. package/dist/cjs/components/form/Textarea/Textarea.js +8 -8
  116. package/dist/cjs/components/form/Textarea/useTextarea.js +2 -2
  117. package/dist/cjs/components/form/Textfield/Textfield.js +9 -9
  118. package/dist/cjs/components/form/Textfield/useTextfield.js +2 -2
  119. package/dist/cjs/components/form/useFormField.js +5 -5
  120. package/dist/cjs/components/loaders/Skeleton/Skeleton.js +18 -0
  121. package/dist/cjs/components/loaders/Spinner/Spinner.js +2 -2
  122. package/dist/cjs/index.js +53 -69
  123. package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js +6 -6
  124. package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js +12 -12
  125. package/dist/cjs/utilities/RovingFocus/useRovingFocus.js +2 -2
  126. package/dist/cjs/utilities/hooks/useDebounceCallback/useDebounceCallback.js +3 -3
  127. package/dist/cjs/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js +2 -2
  128. package/dist/cjs/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js +2 -2
  129. package/dist/esm/components/Accordion/Accordion.js +2 -2
  130. package/dist/esm/components/Accordion/AccordionHeading.js +2 -2
  131. package/dist/esm/components/Accordion/AccordionItem.js +4 -4
  132. package/dist/esm/components/Alert/Alert.js +2 -2
  133. package/dist/esm/components/Avatar/Avatar.js +3 -3
  134. package/dist/esm/components/Badge/Badge.js +4 -10
  135. package/dist/esm/components/Breadcrumbs/Breadcrumbs.js +9 -0
  136. package/dist/esm/components/Breadcrumbs/BreadcrumbsItem.js +3 -3
  137. package/dist/esm/components/Breadcrumbs/BreadcrumbsLink.js +3 -3
  138. package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js +4 -6
  139. package/dist/esm/components/Breadcrumbs/index.js +12 -19
  140. package/dist/esm/components/Button/Button.js +4 -4
  141. package/dist/esm/components/Card/Card.js +3 -3
  142. package/dist/esm/components/Card/CardContent.js +3 -3
  143. package/dist/esm/components/Card/CardFooter.js +3 -3
  144. package/dist/esm/components/Card/CardHeader.js +3 -3
  145. package/dist/esm/components/Card/CardMedia.js +3 -3
  146. package/dist/esm/components/Chip/Group/Group.js +2 -2
  147. package/dist/esm/components/Chip/Removable/Removable.js +2 -2
  148. package/dist/esm/components/Chip/Toggle/Toggle.js +2 -2
  149. package/dist/esm/components/Divider/Divider.js +2 -2
  150. package/dist/esm/components/Dropdown/Dropdown.js +20 -0
  151. package/dist/esm/components/Dropdown/DropdownContext.js +24 -0
  152. package/dist/esm/components/Dropdown/DropdownHeading.js +13 -0
  153. package/dist/esm/components/Dropdown/DropdownItem.js +12 -0
  154. package/dist/esm/components/Dropdown/DropdownList.js +10 -0
  155. package/dist/esm/components/Dropdown/DropdownTrigger.js +11 -0
  156. package/dist/esm/components/Dropdown/index.js +34 -0
  157. package/dist/esm/components/ErrorSummary/ErrorSummary.js +17 -0
  158. package/dist/esm/components/ErrorSummary/ErrorSummaryHeading.js +2 -3
  159. package/dist/esm/components/ErrorSummary/ErrorSummaryList.js +1 -1
  160. package/dist/esm/components/ErrorSummary/index.js +9 -10
  161. package/dist/esm/components/HelpText/HelpText.js +5 -11
  162. package/dist/esm/components/Link/Link.js +3 -3
  163. package/dist/esm/components/List/ListItem.js +1 -1
  164. package/dist/esm/components/List/Lists.js +3 -3
  165. package/dist/esm/components/Modal/ModaContent.js +3 -3
  166. package/dist/esm/components/Modal/ModalDialog.js +4 -4
  167. package/dist/esm/components/Modal/ModalFooter.js +3 -3
  168. package/dist/esm/components/Modal/ModalHeader.js +4 -5
  169. package/dist/esm/components/Modal/ModalTrigger.js +2 -2
  170. package/dist/esm/components/Pagination/PaginationButton.js +1 -1
  171. package/dist/esm/components/Pagination/PaginationEllipsis.js +2 -2
  172. package/dist/esm/components/Pagination/PaginationItem.js +3 -3
  173. package/dist/esm/components/Pagination/PaginationList.js +3 -3
  174. package/dist/esm/components/Pagination/PaginationRoot.js +1 -1
  175. package/dist/esm/components/Popover/Popover.js +7 -5
  176. package/dist/esm/components/Popover/PopoverTrigger.js +2 -2
  177. package/dist/esm/components/SkipLink/SkipLink.js +2 -2
  178. package/dist/esm/components/Table/Table.js +2 -2
  179. package/dist/esm/components/Tabs/{TabsRoot.js → Tabs.js} +11 -12
  180. package/dist/esm/components/Tabs/{TabList.js → TabsList.js} +6 -7
  181. package/dist/esm/components/Tabs/TabsPanel.js +21 -0
  182. package/dist/esm/components/Tabs/TabsTab.js +20 -0
  183. package/dist/esm/components/Tabs/index.js +16 -17
  184. package/dist/esm/components/Tag/Tag.js +2 -2
  185. package/dist/esm/components/ToggleGroup/ToggleGroup.js +38 -0
  186. package/dist/esm/components/ToggleGroup/ToggleGroupItem.js +18 -0
  187. package/dist/esm/components/ToggleGroup/index.js +6 -8
  188. package/dist/esm/components/ToggleGroup/{ToggleGroupItem/useToggleGroupitem.js → useToggleGroupitem.js} +1 -1
  189. package/dist/esm/components/Tooltip/Tooltip.js +3 -5
  190. package/dist/esm/components/Typography/Heading/Heading.js +3 -3
  191. package/dist/esm/components/Typography/Ingress/Ingress.js +3 -3
  192. package/dist/esm/components/Typography/Label/Label.js +3 -3
  193. package/dist/esm/components/Typography/Paragraph/Paragraph.js +3 -3
  194. package/dist/esm/components/Typography/ValidationMessage/ValidationMessage.js +13 -0
  195. package/dist/esm/components/form/CharacterCounter.js +2 -2
  196. package/dist/esm/components/form/Checkbox/Checkbox.js +3 -3
  197. package/dist/esm/components/form/Checkbox/CheckboxGroup.js +2 -2
  198. package/dist/esm/components/form/Combobox/Combobox.js +5 -5
  199. package/dist/esm/components/form/Combobox/Custom.js +4 -4
  200. package/dist/esm/components/form/Combobox/Empty.js +2 -2
  201. package/dist/esm/components/form/Combobox/Option/Description.js +2 -2
  202. package/dist/esm/components/form/Combobox/Option/Option.js +8 -5
  203. package/dist/esm/components/form/Combobox/Option/SelectedIcon.js +2 -2
  204. package/dist/esm/components/form/Combobox/Option/useComboboxOption.js +2 -2
  205. package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js +2 -2
  206. package/dist/esm/components/form/Combobox/internal/ComboboxError.js +2 -2
  207. package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +3 -3
  208. package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js +2 -2
  209. package/dist/esm/components/form/Combobox/useCombobox.js +2 -1
  210. package/dist/esm/components/form/Combobox/useFloatingCombobox.js +1 -3
  211. package/dist/esm/components/form/Combobox/utilities.js +1 -5
  212. package/dist/esm/components/form/Fieldset/Fieldset.js +8 -10
  213. package/dist/esm/components/form/Radio/Radio.js +2 -2
  214. package/dist/esm/components/form/Radio/RadioGroup.js +2 -2
  215. package/dist/esm/components/form/Search/Search.js +5 -5
  216. package/dist/esm/components/form/Select/Select.js +3 -3
  217. package/dist/esm/components/form/Select/SelectOptgroup.js +1 -1
  218. package/dist/esm/components/form/Select/SelectOption.js +1 -1
  219. package/dist/esm/components/form/Switch/Switch.js +2 -2
  220. package/dist/esm/components/form/Textarea/Textarea.js +5 -5
  221. package/dist/esm/components/form/Textfield/Textfield.js +5 -5
  222. package/dist/esm/components/form/useFormField.js +2 -2
  223. package/dist/esm/components/loaders/Skeleton/Skeleton.js +16 -0
  224. package/dist/esm/components/loaders/Spinner/Spinner.js +2 -2
  225. package/dist/esm/index.js +12 -20
  226. package/dist/esm/utilities/RovingFocus/RovingFocusItem.js +2 -2
  227. package/dist/esm/utilities/RovingFocus/RovingFocusRoot.js +2 -2
  228. package/dist/types/components/Badge/Badge.d.ts.map +1 -1
  229. package/dist/types/components/Breadcrumbs/{BreadcrumbsNav.d.ts → Breadcrumbs.d.ts} +13 -3
  230. package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
  231. package/dist/types/components/Breadcrumbs/BreadcrumbsItem.d.ts.map +1 -1
  232. package/dist/types/components/Breadcrumbs/BreadcrumbsLink.d.ts.map +1 -1
  233. package/dist/types/components/Breadcrumbs/BreadcrumbsList.d.ts.map +1 -1
  234. package/dist/types/components/Breadcrumbs/index.d.ts +17 -25
  235. package/dist/types/components/Breadcrumbs/index.d.ts.map +1 -1
  236. package/dist/types/components/Button/Button.d.ts +12 -2
  237. package/dist/types/components/Button/Button.d.ts.map +1 -1
  238. package/dist/types/components/Dropdown/Dropdown.d.ts +23 -0
  239. package/dist/types/components/Dropdown/Dropdown.d.ts.map +1 -0
  240. package/dist/types/components/Dropdown/DropdownContext.d.ts +22 -0
  241. package/dist/types/components/Dropdown/DropdownContext.d.ts.map +1 -0
  242. package/dist/types/components/Dropdown/DropdownHeading.d.ts +4 -0
  243. package/dist/types/components/Dropdown/DropdownHeading.d.ts.map +1 -0
  244. package/dist/types/components/Dropdown/DropdownItem.d.ts +4 -0
  245. package/dist/types/components/Dropdown/DropdownItem.d.ts.map +1 -0
  246. package/dist/types/components/Dropdown/DropdownList.d.ts +4 -0
  247. package/dist/types/components/Dropdown/DropdownList.d.ts.map +1 -0
  248. package/dist/types/components/Dropdown/DropdownTrigger.d.ts +17 -0
  249. package/dist/types/components/Dropdown/DropdownTrigger.d.ts.map +1 -0
  250. package/dist/types/components/Dropdown/index.d.ts +49 -0
  251. package/dist/types/components/Dropdown/index.d.ts.map +1 -0
  252. package/dist/types/components/ErrorSummary/{ErrorSummaryRoot.d.ts → ErrorSummary.d.ts} +2 -2
  253. package/dist/types/components/ErrorSummary/ErrorSummary.d.ts.map +1 -0
  254. package/dist/types/components/ErrorSummary/ErrorSummaryHeading.d.ts.map +1 -1
  255. package/dist/types/components/ErrorSummary/index.d.ts +19 -12
  256. package/dist/types/components/ErrorSummary/index.d.ts.map +1 -1
  257. package/dist/types/components/HelpText/HelpText.d.ts +6 -6
  258. package/dist/types/components/HelpText/HelpText.d.ts.map +1 -1
  259. package/dist/types/components/Modal/ModalHeader.d.ts.map +1 -1
  260. package/dist/types/components/Modal/ModalTrigger.d.ts +3 -2
  261. package/dist/types/components/Modal/ModalTrigger.d.ts.map +1 -1
  262. package/dist/types/components/Popover/Popover.d.ts +2 -0
  263. package/dist/types/components/Popover/Popover.d.ts.map +1 -1
  264. package/dist/types/components/Popover/PopoverTrigger.d.ts +3 -2
  265. package/dist/types/components/Popover/PopoverTrigger.d.ts.map +1 -1
  266. package/dist/types/components/Tabs/{TabsRoot.d.ts → Tabs.d.ts} +9 -9
  267. package/dist/types/components/Tabs/Tabs.d.ts.map +1 -0
  268. package/dist/types/components/Tabs/{TabList.d.ts → TabsList.d.ts} +3 -2
  269. package/dist/types/components/Tabs/TabsList.d.ts.map +1 -0
  270. package/dist/types/components/Tabs/{TabContent.d.ts → TabsPanel.d.ts} +6 -6
  271. package/dist/types/components/Tabs/TabsPanel.d.ts.map +1 -0
  272. package/dist/types/components/Tabs/{Tab.d.ts → TabsTab.d.ts} +3 -3
  273. package/dist/types/components/Tabs/TabsTab.d.ts.map +1 -0
  274. package/dist/types/components/Tabs/index.d.ts +27 -20
  275. package/dist/types/components/Tabs/index.d.ts.map +1 -1
  276. package/dist/types/components/ToggleGroup/{ToggleGroupRoot.d.ts → ToggleGroup.d.ts} +4 -4
  277. package/dist/types/components/ToggleGroup/ToggleGroup.d.ts.map +1 -0
  278. package/dist/types/components/ToggleGroup/{ToggleGroupItem/ToggleGroupItem.d.ts → ToggleGroupItem.d.ts} +2 -2
  279. package/dist/types/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -0
  280. package/dist/types/components/ToggleGroup/index.d.ts +8 -9
  281. package/dist/types/components/ToggleGroup/index.d.ts.map +1 -1
  282. package/dist/types/components/ToggleGroup/{ToggleGroupItem/useToggleGroupitem.d.ts → useToggleGroupitem.d.ts} +2 -2
  283. package/dist/types/components/ToggleGroup/useToggleGroupitem.d.ts.map +1 -0
  284. package/dist/types/components/Typography/{ErrorMessage/ErrorMessage.d.ts → ValidationMessage/ValidationMessage.d.ts} +4 -4
  285. package/dist/types/components/Typography/ValidationMessage/ValidationMessage.d.ts.map +1 -0
  286. package/dist/types/components/Typography/ValidationMessage/index.d.ts +2 -0
  287. package/dist/types/components/Typography/ValidationMessage/index.d.ts.map +1 -0
  288. package/dist/types/components/Typography/index.d.ts +1 -1
  289. package/dist/types/components/Typography/index.d.ts.map +1 -1
  290. package/dist/types/components/form/Combobox/Option/Option.d.ts +2 -1
  291. package/dist/types/components/form/Combobox/Option/Option.d.ts.map +1 -1
  292. package/dist/types/components/form/Combobox/useCombobox.d.ts +1 -1
  293. package/dist/types/components/form/Combobox/useCombobox.d.ts.map +1 -1
  294. package/dist/types/components/form/Combobox/utilities.d.ts +0 -2
  295. package/dist/types/components/form/Combobox/utilities.d.ts.map +1 -1
  296. package/dist/types/components/form/Fieldset/Fieldset.d.ts +1 -1
  297. package/dist/types/components/form/Fieldset/Fieldset.d.ts.map +1 -1
  298. package/dist/types/components/form/Textarea/Textarea.d.ts.map +1 -1
  299. package/dist/types/components/form/Textfield/Textfield.d.ts.map +1 -1
  300. package/dist/types/components/index.d.ts +1 -1
  301. package/dist/types/components/index.d.ts.map +1 -1
  302. package/dist/types/components/loaders/Skeleton/Skeleton.d.ts +34 -0
  303. package/dist/types/components/loaders/Skeleton/Skeleton.d.ts.map +1 -0
  304. package/dist/types/components/loaders/Skeleton/index.d.ts +7 -19
  305. package/dist/types/components/loaders/Skeleton/index.d.ts.map +1 -1
  306. package/package.json +3 -3
  307. package/dist/cjs/components/Breadcrumbs/BreadcrumbsNav.js +0 -11
  308. package/dist/cjs/components/Breadcrumbs/BreadcrumbsRoot.js +0 -11
  309. package/dist/cjs/components/DropdownMenu/DropdownMenuContent.js +0 -55
  310. package/dist/cjs/components/DropdownMenu/DropdownMenuGroup.js +0 -16
  311. package/dist/cjs/components/DropdownMenu/DropdownMenuItem.js +0 -15
  312. package/dist/cjs/components/DropdownMenu/DropdownMenuRoot.js +0 -49
  313. package/dist/cjs/components/DropdownMenu/DropdownMenuTrigger.js +0 -22
  314. package/dist/cjs/components/DropdownMenu/index.js +0 -38
  315. package/dist/cjs/components/ErrorSummary/ErrorSummaryRoot.js +0 -21
  316. package/dist/cjs/components/HelpText/HelpTextIcon.js +0 -14
  317. package/dist/cjs/components/Tabs/Tab.js +0 -23
  318. package/dist/cjs/components/Tabs/TabContent.js +0 -24
  319. package/dist/cjs/components/Tabs/TabList.js +0 -26
  320. package/dist/cjs/components/Tabs/TabsRoot.js +0 -46
  321. package/dist/cjs/components/Tabs/useTab.js +0 -24
  322. package/dist/cjs/components/ToggleGroup/ToggleGroupRoot.js +0 -42
  323. package/dist/cjs/components/Typography/ErrorMessage/ErrorMessage.js +0 -16
  324. package/dist/cjs/components/form/Fieldset/useFieldset.js +0 -19
  325. package/dist/cjs/components/loaders/Skeleton/Circle/Circle.js +0 -15
  326. package/dist/cjs/components/loaders/Skeleton/Rectangle/Rectangle.js +0 -15
  327. package/dist/cjs/components/loaders/Skeleton/Text/Text.js +0 -15
  328. package/dist/cjs/components/loaders/Skeleton/index.js +0 -20
  329. package/dist/cjs/node_modules/@floating-ui/core/dist/floating-ui.core.js +0 -674
  330. package/dist/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +0 -661
  331. package/dist/cjs/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -164
  332. package/dist/cjs/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -22
  333. package/dist/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.js +0 -3302
  334. package/dist/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js +0 -165
  335. package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -68
  336. package/dist/cjs/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -11
  337. package/dist/cjs/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +0 -353
  338. package/dist/cjs/node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +0 -677
  339. package/dist/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -159
  340. package/dist/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -158
  341. package/dist/cjs/node_modules/@radix-ui/react-compose-refs/dist/index.js +0 -18
  342. package/dist/cjs/node_modules/@radix-ui/react-slot/dist/index.js +0 -104
  343. package/dist/cjs/node_modules/@tanstack/react-virtual/dist/esm/index.js +0 -70
  344. package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/index.js +0 -676
  345. package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/utils.js +0 -66
  346. package/dist/cjs/node_modules/@u-elements/u-details/dist/u-details.js +0 -117
  347. package/dist/cjs/node_modules/clsx/dist/lite.js +0 -9
  348. package/dist/cjs/node_modules/tabbable/dist/index.esm.js +0 -550
  349. package/dist/esm/components/Breadcrumbs/BreadcrumbsNav.js +0 -9
  350. package/dist/esm/components/Breadcrumbs/BreadcrumbsRoot.js +0 -9
  351. package/dist/esm/components/DropdownMenu/DropdownMenuContent.js +0 -53
  352. package/dist/esm/components/DropdownMenu/DropdownMenuGroup.js +0 -14
  353. package/dist/esm/components/DropdownMenu/DropdownMenuItem.js +0 -13
  354. package/dist/esm/components/DropdownMenu/DropdownMenuRoot.js +0 -46
  355. package/dist/esm/components/DropdownMenu/DropdownMenuTrigger.js +0 -20
  356. package/dist/esm/components/DropdownMenu/index.js +0 -31
  357. package/dist/esm/components/ErrorSummary/ErrorSummaryRoot.js +0 -18
  358. package/dist/esm/components/HelpText/HelpTextIcon.js +0 -12
  359. package/dist/esm/components/Tabs/Tab.js +0 -21
  360. package/dist/esm/components/Tabs/TabContent.js +0 -22
  361. package/dist/esm/components/Tabs/useTab.js +0 -22
  362. package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js +0 -19
  363. package/dist/esm/components/ToggleGroup/ToggleGroupRoot.js +0 -39
  364. package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.js +0 -14
  365. package/dist/esm/components/form/Fieldset/useFieldset.js +0 -17
  366. package/dist/esm/components/loaders/Skeleton/Circle/Circle.js +0 -13
  367. package/dist/esm/components/loaders/Skeleton/Rectangle/Rectangle.js +0 -13
  368. package/dist/esm/components/loaders/Skeleton/Text/Text.js +0 -13
  369. package/dist/esm/components/loaders/Skeleton/index.js +0 -15
  370. package/dist/esm/node_modules/@floating-ui/core/dist/floating-ui.core.js +0 -665
  371. package/dist/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +0 -653
  372. package/dist/esm/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -143
  373. package/dist/esm/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -16
  374. package/dist/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js +0 -3258
  375. package/dist/esm/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js +0 -144
  376. package/dist/esm/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -57
  377. package/dist/esm/node_modules/@floating-ui/react/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -9
  378. package/dist/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +0 -325
  379. package/dist/esm/node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +0 -667
  380. package/dist/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -139
  381. package/dist/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -136
  382. package/dist/esm/node_modules/@radix-ui/react-compose-refs/dist/index.js +0 -16
  383. package/dist/esm/node_modules/@radix-ui/react-slot/dist/index.js +0 -82
  384. package/dist/esm/node_modules/@tanstack/react-virtual/dist/esm/index.js +0 -43
  385. package/dist/esm/node_modules/@tanstack/virtual-core/dist/esm/index.js +0 -664
  386. package/dist/esm/node_modules/@tanstack/virtual-core/dist/esm/utils.js +0 -61
  387. package/dist/esm/node_modules/@u-elements/u-details/dist/u-details.js +0 -114
  388. package/dist/esm/node_modules/clsx/dist/lite.js +0 -4
  389. package/dist/esm/node_modules/tabbable/dist/index.esm.js +0 -546
  390. package/dist/types/components/Breadcrumbs/BreadcrumbsNav.d.ts.map +0 -1
  391. package/dist/types/components/Breadcrumbs/BreadcrumbsRoot.d.ts +0 -16
  392. package/dist/types/components/Breadcrumbs/BreadcrumbsRoot.d.ts.map +0 -1
  393. package/dist/types/components/DropdownMenu/DropdownMenuContent.d.ts +0 -8
  394. package/dist/types/components/DropdownMenu/DropdownMenuContent.d.ts.map +0 -1
  395. package/dist/types/components/DropdownMenu/DropdownMenuGroup.d.ts +0 -14
  396. package/dist/types/components/DropdownMenu/DropdownMenuGroup.d.ts.map +0 -1
  397. package/dist/types/components/DropdownMenu/DropdownMenuItem.d.ts +0 -4
  398. package/dist/types/components/DropdownMenu/DropdownMenuItem.d.ts.map +0 -1
  399. package/dist/types/components/DropdownMenu/DropdownMenuRoot.d.ts +0 -51
  400. package/dist/types/components/DropdownMenu/DropdownMenuRoot.d.ts.map +0 -1
  401. package/dist/types/components/DropdownMenu/DropdownMenuTrigger.d.ts +0 -14
  402. package/dist/types/components/DropdownMenu/DropdownMenuTrigger.d.ts.map +0 -1
  403. package/dist/types/components/DropdownMenu/index.d.ts +0 -30
  404. package/dist/types/components/DropdownMenu/index.d.ts.map +0 -1
  405. package/dist/types/components/ErrorSummary/ErrorSummaryRoot.d.ts.map +0 -1
  406. package/dist/types/components/HelpText/HelpTextIcon.d.ts +0 -10
  407. package/dist/types/components/HelpText/HelpTextIcon.d.ts.map +0 -1
  408. package/dist/types/components/Tabs/Tab.d.ts.map +0 -1
  409. package/dist/types/components/Tabs/TabContent.d.ts.map +0 -1
  410. package/dist/types/components/Tabs/TabList.d.ts.map +0 -1
  411. package/dist/types/components/Tabs/TabsRoot.d.ts.map +0 -1
  412. package/dist/types/components/Tabs/useTab.d.ts +0 -10
  413. package/dist/types/components/Tabs/useTab.d.ts.map +0 -1
  414. package/dist/types/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.d.ts.map +0 -1
  415. package/dist/types/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.d.ts.map +0 -1
  416. package/dist/types/components/ToggleGroup/ToggleGroupRoot.d.ts.map +0 -1
  417. package/dist/types/components/Typography/ErrorMessage/ErrorMessage.d.ts.map +0 -1
  418. package/dist/types/components/Typography/ErrorMessage/index.d.ts +0 -2
  419. package/dist/types/components/Typography/ErrorMessage/index.d.ts.map +0 -1
  420. package/dist/types/components/form/Fieldset/useFieldset.d.ts +0 -17
  421. package/dist/types/components/form/Fieldset/useFieldset.d.ts.map +0 -1
  422. package/dist/types/components/loaders/Skeleton/Circle/Circle.d.ts +0 -13
  423. package/dist/types/components/loaders/Skeleton/Circle/Circle.d.ts.map +0 -1
  424. package/dist/types/components/loaders/Skeleton/Rectangle/Rectangle.d.ts +0 -13
  425. package/dist/types/components/loaders/Skeleton/Rectangle/Rectangle.d.ts.map +0 -1
  426. package/dist/types/components/loaders/Skeleton/Text/Text.d.ts +0 -13
  427. package/dist/types/components/loaders/Skeleton/Text/Text.d.ts.map +0 -1
@@ -1,3302 +0,0 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- var React = require('react');
5
- var floatingUi_react_utils = require('./floating-ui.react.utils.js');
6
- var floatingUi_utils = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
7
- var floatingUi_utils_dom$1 = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js');
8
- var index_esm = require('../../../tabbable/dist/index.esm.js');
9
- var ReactDOM = require('react-dom');
10
- var floatingUi_reactDom = require('../../react-dom/dist/floating-ui.react-dom.js');
11
- var floatingUi_utils_dom = require('../../utils/dist/floating-ui.utils.dom.js');
12
-
13
- function _interopNamespaceDefault(e) {
14
- var n = Object.create(null);
15
- if (e) {
16
- Object.keys(e).forEach(function (k) {
17
- if (k !== 'default') {
18
- var d = Object.getOwnPropertyDescriptor(e, k);
19
- Object.defineProperty(n, k, d.get ? d : {
20
- enumerable: true,
21
- get: function () { return e[k]; }
22
- });
23
- }
24
- });
25
- }
26
- n.default = e;
27
- return Object.freeze(n);
28
- }
29
-
30
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
31
- var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
32
-
33
- /**
34
- * Merges an array of refs into a single memoized callback ref or `null`.
35
- * @see https://floating-ui.com/docs/react-utils#usemergerefs
36
- */
37
- function useMergeRefs(refs) {
38
- return React__namespace.useMemo(() => {
39
- if (refs.every(ref => ref == null)) {
40
- return null;
41
- }
42
- return value => {
43
- refs.forEach(ref => {
44
- if (typeof ref === 'function') {
45
- ref(value);
46
- } else if (ref != null) {
47
- ref.current = value;
48
- }
49
- });
50
- };
51
- // eslint-disable-next-line react-hooks/exhaustive-deps
52
- }, refs);
53
- }
54
-
55
- // https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
56
- const SafeReact = {
57
- ...React__namespace
58
- };
59
-
60
- const useInsertionEffect = SafeReact.useInsertionEffect;
61
- const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
62
- function useEffectEvent(callback) {
63
- const ref = React__namespace.useRef(() => {
64
- if (process.env.NODE_ENV !== "production") {
65
- throw new Error('Cannot call an event handler while rendering.');
66
- }
67
- });
68
- useSafeInsertionEffect(() => {
69
- ref.current = callback;
70
- });
71
- return React__namespace.useCallback(function () {
72
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
73
- args[_key] = arguments[_key];
74
- }
75
- return ref.current == null ? void 0 : ref.current(...args);
76
- }, []);
77
- }
78
-
79
- const ARROW_UP = 'ArrowUp';
80
- const ARROW_DOWN = 'ArrowDown';
81
- const ARROW_LEFT = 'ArrowLeft';
82
- const ARROW_RIGHT = 'ArrowRight';
83
- function isDifferentRow(index, cols, prevRow) {
84
- return Math.floor(index / cols) !== prevRow;
85
- }
86
- function isIndexOutOfBounds(listRef, index) {
87
- return index < 0 || index >= listRef.current.length;
88
- }
89
- function getMinIndex(listRef, disabledIndices) {
90
- return findNonDisabledIndex(listRef, {
91
- disabledIndices
92
- });
93
- }
94
- function getMaxIndex(listRef, disabledIndices) {
95
- return findNonDisabledIndex(listRef, {
96
- decrement: true,
97
- startingIndex: listRef.current.length,
98
- disabledIndices
99
- });
100
- }
101
- function findNonDisabledIndex(listRef, _temp) {
102
- let {
103
- startingIndex = -1,
104
- decrement = false,
105
- disabledIndices,
106
- amount = 1
107
- } = _temp === void 0 ? {} : _temp;
108
- const list = listRef.current;
109
- let index = startingIndex;
110
- do {
111
- index += decrement ? -amount : amount;
112
- } while (index >= 0 && index <= list.length - 1 && isDisabled(list, index, disabledIndices));
113
- return index;
114
- }
115
- function getGridNavigatedIndex(elementsRef, _ref) {
116
- let {
117
- event,
118
- orientation,
119
- loop,
120
- cols,
121
- disabledIndices,
122
- minIndex,
123
- maxIndex,
124
- prevIndex,
125
- stopEvent: stop = false
126
- } = _ref;
127
- let nextIndex = prevIndex;
128
- if (event.key === ARROW_UP) {
129
- stop && floatingUi_react_utils.stopEvent(event);
130
- if (prevIndex === -1) {
131
- nextIndex = maxIndex;
132
- } else {
133
- nextIndex = findNonDisabledIndex(elementsRef, {
134
- startingIndex: nextIndex,
135
- amount: cols,
136
- decrement: true,
137
- disabledIndices
138
- });
139
- if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
140
- const col = prevIndex % cols;
141
- const maxCol = maxIndex % cols;
142
- const offset = maxIndex - (maxCol - col);
143
- if (maxCol === col) {
144
- nextIndex = maxIndex;
145
- } else {
146
- nextIndex = maxCol > col ? offset : offset - cols;
147
- }
148
- }
149
- }
150
- if (isIndexOutOfBounds(elementsRef, nextIndex)) {
151
- nextIndex = prevIndex;
152
- }
153
- }
154
- if (event.key === ARROW_DOWN) {
155
- stop && floatingUi_react_utils.stopEvent(event);
156
- if (prevIndex === -1) {
157
- nextIndex = minIndex;
158
- } else {
159
- nextIndex = findNonDisabledIndex(elementsRef, {
160
- startingIndex: prevIndex,
161
- amount: cols,
162
- disabledIndices
163
- });
164
- if (loop && prevIndex + cols > maxIndex) {
165
- nextIndex = findNonDisabledIndex(elementsRef, {
166
- startingIndex: prevIndex % cols - cols,
167
- amount: cols,
168
- disabledIndices
169
- });
170
- }
171
- }
172
- if (isIndexOutOfBounds(elementsRef, nextIndex)) {
173
- nextIndex = prevIndex;
174
- }
175
- }
176
-
177
- // Remains on the same row/column.
178
- if (orientation === 'both') {
179
- const prevRow = floatingUi_utils.floor(prevIndex / cols);
180
- if (event.key === ARROW_RIGHT) {
181
- stop && floatingUi_react_utils.stopEvent(event);
182
- if (prevIndex % cols !== cols - 1) {
183
- nextIndex = findNonDisabledIndex(elementsRef, {
184
- startingIndex: prevIndex,
185
- disabledIndices
186
- });
187
- if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
188
- nextIndex = findNonDisabledIndex(elementsRef, {
189
- startingIndex: prevIndex - prevIndex % cols - 1,
190
- disabledIndices
191
- });
192
- }
193
- } else if (loop) {
194
- nextIndex = findNonDisabledIndex(elementsRef, {
195
- startingIndex: prevIndex - prevIndex % cols - 1,
196
- disabledIndices
197
- });
198
- }
199
- if (isDifferentRow(nextIndex, cols, prevRow)) {
200
- nextIndex = prevIndex;
201
- }
202
- }
203
- if (event.key === ARROW_LEFT) {
204
- stop && floatingUi_react_utils.stopEvent(event);
205
- if (prevIndex % cols !== 0) {
206
- nextIndex = findNonDisabledIndex(elementsRef, {
207
- startingIndex: prevIndex,
208
- decrement: true,
209
- disabledIndices
210
- });
211
- if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
212
- nextIndex = findNonDisabledIndex(elementsRef, {
213
- startingIndex: prevIndex + (cols - prevIndex % cols),
214
- decrement: true,
215
- disabledIndices
216
- });
217
- }
218
- } else if (loop) {
219
- nextIndex = findNonDisabledIndex(elementsRef, {
220
- startingIndex: prevIndex + (cols - prevIndex % cols),
221
- decrement: true,
222
- disabledIndices
223
- });
224
- }
225
- if (isDifferentRow(nextIndex, cols, prevRow)) {
226
- nextIndex = prevIndex;
227
- }
228
- }
229
- const lastRow = floatingUi_utils.floor(maxIndex / cols) === prevRow;
230
- if (isIndexOutOfBounds(elementsRef, nextIndex)) {
231
- if (loop && lastRow) {
232
- nextIndex = event.key === ARROW_LEFT ? maxIndex : findNonDisabledIndex(elementsRef, {
233
- startingIndex: prevIndex - prevIndex % cols - 1,
234
- disabledIndices
235
- });
236
- } else {
237
- nextIndex = prevIndex;
238
- }
239
- }
240
- }
241
- return nextIndex;
242
- }
243
-
244
- /** For each cell index, gets the item index that occupies that cell */
245
- function buildCellMap(sizes, cols, dense) {
246
- const cellMap = [];
247
- let startIndex = 0;
248
- sizes.forEach((_ref2, index) => {
249
- let {
250
- width,
251
- height
252
- } = _ref2;
253
- if (width > cols) {
254
- if (process.env.NODE_ENV !== "production") {
255
- throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
256
- }
257
- }
258
- let itemPlaced = false;
259
- if (dense) {
260
- startIndex = 0;
261
- }
262
- while (!itemPlaced) {
263
- const targetCells = [];
264
- for (let i = 0; i < width; i++) {
265
- for (let j = 0; j < height; j++) {
266
- targetCells.push(startIndex + i + j * cols);
267
- }
268
- }
269
- if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
270
- targetCells.forEach(cell => {
271
- cellMap[cell] = index;
272
- });
273
- itemPlaced = true;
274
- } else {
275
- startIndex++;
276
- }
277
- }
278
- });
279
-
280
- // convert into a non-sparse array
281
- return [...cellMap];
282
- }
283
-
284
- /** Gets cell index of an item's corner or -1 when index is -1. */
285
- function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
286
- if (index === -1) return -1;
287
- const firstCellIndex = cellMap.indexOf(index);
288
- const sizeItem = sizes[index];
289
- switch (corner) {
290
- case 'tl':
291
- return firstCellIndex;
292
- case 'tr':
293
- if (!sizeItem) {
294
- return firstCellIndex;
295
- }
296
- return firstCellIndex + sizeItem.width - 1;
297
- case 'bl':
298
- if (!sizeItem) {
299
- return firstCellIndex;
300
- }
301
- return firstCellIndex + (sizeItem.height - 1) * cols;
302
- case 'br':
303
- return cellMap.lastIndexOf(index);
304
- }
305
- }
306
-
307
- /** Gets all cell indices that correspond to the specified indices */
308
- function getCellIndices(indices, cellMap) {
309
- return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
310
- }
311
- function isDisabled(list, index, disabledIndices) {
312
- if (disabledIndices) {
313
- return disabledIndices.includes(index);
314
- }
315
- const element = list[index];
316
- return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
317
- }
318
-
319
- let rafId = 0;
320
- function enqueueFocus(el, options) {
321
- if (options === void 0) {
322
- options = {};
323
- }
324
- const {
325
- preventScroll = false,
326
- cancelPrevious = true,
327
- sync = false
328
- } = options;
329
- cancelPrevious && cancelAnimationFrame(rafId);
330
- const exec = () => el == null ? void 0 : el.focus({
331
- preventScroll
332
- });
333
- if (sync) {
334
- exec();
335
- } else {
336
- rafId = requestAnimationFrame(exec);
337
- }
338
- }
339
-
340
- var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
341
-
342
- function _extends() {
343
- _extends = Object.assign ? Object.assign.bind() : function (target) {
344
- for (var i = 1; i < arguments.length; i++) {
345
- var source = arguments[i];
346
- for (var key in source) {
347
- if (Object.prototype.hasOwnProperty.call(source, key)) {
348
- target[key] = source[key];
349
- }
350
- }
351
- }
352
- return target;
353
- };
354
- return _extends.apply(this, arguments);
355
- }
356
-
357
- let serverHandoffComplete = false;
358
- let count = 0;
359
- const genId = () => // Ensure the id is unique with multiple independent versions of Floating UI
360
- // on <React 18
361
- "floating-ui-" + Math.random().toString(36).slice(2, 6) + count++;
362
- function useFloatingId() {
363
- const [id, setId] = React__namespace.useState(() => serverHandoffComplete ? genId() : undefined);
364
- index(() => {
365
- if (id == null) {
366
- setId(genId());
367
- }
368
- // eslint-disable-next-line react-hooks/exhaustive-deps
369
- }, []);
370
- React__namespace.useEffect(() => {
371
- serverHandoffComplete = true;
372
- }, []);
373
- return id;
374
- }
375
- const useReactId = SafeReact.useId;
376
-
377
- /**
378
- * Uses React 18's built-in `useId()` when available, or falls back to a
379
- * slightly less performant (requiring a double render) implementation for
380
- * earlier React versions.
381
- * @see https://floating-ui.com/docs/react-utils#useid
382
- */
383
- const useId = useReactId || useFloatingId;
384
-
385
- let devMessageSet;
386
- if (process.env.NODE_ENV !== "production") {
387
- devMessageSet = /*#__PURE__*/new Set();
388
- }
389
- function warn() {
390
- var _devMessageSet;
391
- for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
392
- messages[_key] = arguments[_key];
393
- }
394
- const message = "Floating UI: " + messages.join(' ');
395
- if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
396
- var _devMessageSet2;
397
- (_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
398
- console.warn(message);
399
- }
400
- }
401
- function error() {
402
- var _devMessageSet3;
403
- for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
404
- messages[_key2] = arguments[_key2];
405
- }
406
- const message = "Floating UI: " + messages.join(' ');
407
- if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
408
- var _devMessageSet4;
409
- (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
410
- console.error(message);
411
- }
412
- }
413
-
414
- /**
415
- * Renders a pointing arrow triangle.
416
- * @see https://floating-ui.com/docs/FloatingArrow
417
- */
418
- const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function FloatingArrow(props, ref) {
419
- const {
420
- context: {
421
- placement,
422
- elements: {
423
- floating
424
- },
425
- middlewareData: {
426
- arrow,
427
- shift
428
- }
429
- },
430
- width = 14,
431
- height = 7,
432
- tipRadius = 0,
433
- strokeWidth = 0,
434
- staticOffset,
435
- stroke,
436
- d,
437
- style: {
438
- transform,
439
- ...restStyle
440
- } = {},
441
- ...rest
442
- } = props;
443
- if (process.env.NODE_ENV !== "production") {
444
- if (!ref) {
445
- warn('The `ref` prop is required for `FloatingArrow`.');
446
- }
447
- }
448
- const clipPathId = useId();
449
- const [isRTL, setIsRTL] = React__namespace.useState(false);
450
-
451
- // https://github.com/floating-ui/floating-ui/issues/2932
452
- index(() => {
453
- if (!floating) return;
454
- const isRTL = floatingUi_utils_dom$1.getComputedStyle(floating).direction === 'rtl';
455
- if (isRTL) {
456
- setIsRTL(true);
457
- }
458
- }, [floating]);
459
- if (!floating) {
460
- return null;
461
- }
462
- const [side, alignment] = placement.split('-');
463
- const isVerticalSide = side === 'top' || side === 'bottom';
464
- let computedStaticOffset = staticOffset;
465
- if (isVerticalSide && shift != null && shift.x || !isVerticalSide && shift != null && shift.y) {
466
- computedStaticOffset = null;
467
- }
468
-
469
- // Strokes must be double the border width, this ensures the stroke's width
470
- // works as you'd expect.
471
- const computedStrokeWidth = strokeWidth * 2;
472
- const halfStrokeWidth = computedStrokeWidth / 2;
473
- const svgX = width / 2 * (tipRadius / -8 + 1);
474
- const svgY = height / 2 * tipRadius / 4;
475
- const isCustomShape = !!d;
476
- const yOffsetProp = computedStaticOffset && alignment === 'end' ? 'bottom' : 'top';
477
- let xOffsetProp = computedStaticOffset && alignment === 'end' ? 'right' : 'left';
478
- if (computedStaticOffset && isRTL) {
479
- xOffsetProp = alignment === 'end' ? 'left' : 'right';
480
- }
481
- const arrowX = (arrow == null ? void 0 : arrow.x) != null ? computedStaticOffset || arrow.x : '';
482
- const arrowY = (arrow == null ? void 0 : arrow.y) != null ? computedStaticOffset || arrow.y : '';
483
- const dValue = d || 'M0,0' + (" H" + width) + (" L" + (width - svgX) + "," + (height - svgY)) + (" Q" + width / 2 + "," + height + " " + svgX + "," + (height - svgY)) + ' Z';
484
- const rotation = {
485
- top: isCustomShape ? 'rotate(180deg)' : '',
486
- left: isCustomShape ? 'rotate(90deg)' : 'rotate(-90deg)',
487
- bottom: isCustomShape ? '' : 'rotate(180deg)',
488
- right: isCustomShape ? 'rotate(-90deg)' : 'rotate(90deg)'
489
- }[side];
490
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({}, rest, {
491
- "aria-hidden": true,
492
- ref: ref,
493
- width: isCustomShape ? width : width + computedStrokeWidth,
494
- height: width,
495
- viewBox: "0 0 " + width + " " + (height > width ? height : width),
496
- style: {
497
- position: 'absolute',
498
- pointerEvents: 'none',
499
- [xOffsetProp]: arrowX,
500
- [yOffsetProp]: arrowY,
501
- [side]: isVerticalSide || isCustomShape ? '100%' : "calc(100% - " + computedStrokeWidth / 2 + "px)",
502
- transform: "" + rotation + (transform != null ? transform : ''),
503
- ...restStyle
504
- }
505
- }), computedStrokeWidth > 0 && /*#__PURE__*/React__namespace.createElement("path", {
506
- clipPath: "url(#" + clipPathId + ")",
507
- fill: "none",
508
- stroke: stroke
509
- // Account for the stroke on the fill path rendered below.
510
- ,
511
- strokeWidth: computedStrokeWidth + (d ? 0 : 1),
512
- d: dValue
513
- }), /*#__PURE__*/React__namespace.createElement("path", {
514
- stroke: computedStrokeWidth && !d ? rest.fill : 'none',
515
- d: dValue
516
- }), /*#__PURE__*/React__namespace.createElement("clipPath", {
517
- id: clipPathId
518
- }, /*#__PURE__*/React__namespace.createElement("rect", {
519
- x: -halfStrokeWidth,
520
- y: halfStrokeWidth * (isCustomShape ? -1 : 1),
521
- width: width + computedStrokeWidth,
522
- height: width
523
- })));
524
- });
525
-
526
- function createPubSub() {
527
- const map = new Map();
528
- return {
529
- emit(event, data) {
530
- var _map$get;
531
- (_map$get = map.get(event)) == null || _map$get.forEach(handler => handler(data));
532
- },
533
- on(event, listener) {
534
- map.set(event, [...(map.get(event) || []), listener]);
535
- },
536
- off(event, listener) {
537
- var _map$get2;
538
- map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter(l => l !== listener)) || []);
539
- }
540
- };
541
- }
542
-
543
- const FloatingNodeContext = /*#__PURE__*/React__namespace.createContext(null);
544
- const FloatingTreeContext = /*#__PURE__*/React__namespace.createContext(null);
545
-
546
- /**
547
- * Returns the parent node id for nested floating elements, if available.
548
- * Returns `null` for top-level floating elements.
549
- */
550
- const useFloatingParentNodeId = () => {
551
- var _React$useContext;
552
- return ((_React$useContext = React__namespace.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
553
- };
554
-
555
- /**
556
- * Returns the nearest floating tree context, if available.
557
- */
558
- const useFloatingTree = () => React__namespace.useContext(FloatingTreeContext);
559
-
560
- function createAttribute(name) {
561
- return "data-floating-ui-" + name;
562
- }
563
-
564
- function useLatestRef(value) {
565
- const ref = React.useRef(value);
566
- index(() => {
567
- ref.current = value;
568
- });
569
- return ref;
570
- }
571
-
572
- const safePolygonIdentifier = /*#__PURE__*/createAttribute('safe-polygon');
573
- function getDelay(value, prop, pointerType) {
574
- if (pointerType && !floatingUi_react_utils.isMouseLikePointerType(pointerType)) {
575
- return 0;
576
- }
577
- if (typeof value === 'number') {
578
- return value;
579
- }
580
- return value == null ? void 0 : value[prop];
581
- }
582
- /**
583
- * Opens the floating element while hovering over the reference element, like
584
- * CSS `:hover`.
585
- * @see https://floating-ui.com/docs/useHover
586
- */
587
- function useHover(context, props) {
588
- if (props === void 0) {
589
- props = {};
590
- }
591
- const {
592
- open,
593
- onOpenChange,
594
- dataRef,
595
- events,
596
- elements
597
- } = context;
598
- const {
599
- enabled = true,
600
- delay = 0,
601
- handleClose = null,
602
- mouseOnly = false,
603
- restMs = 0,
604
- move = true
605
- } = props;
606
- const tree = useFloatingTree();
607
- const parentId = useFloatingParentNodeId();
608
- const handleCloseRef = useLatestRef(handleClose);
609
- const delayRef = useLatestRef(delay);
610
- const openRef = useLatestRef(open);
611
- const pointerTypeRef = React__namespace.useRef();
612
- const timeoutRef = React__namespace.useRef(-1);
613
- const handlerRef = React__namespace.useRef();
614
- const restTimeoutRef = React__namespace.useRef(-1);
615
- const blockMouseMoveRef = React__namespace.useRef(true);
616
- const performedPointerEventsMutationRef = React__namespace.useRef(false);
617
- const unbindMouseMoveRef = React__namespace.useRef(() => {});
618
- const isHoverOpen = React__namespace.useCallback(() => {
619
- var _dataRef$current$open;
620
- const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
621
- return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
622
- }, [dataRef]);
623
-
624
- // When closing before opening, clear the delay timeouts to cancel it
625
- // from showing.
626
- React__namespace.useEffect(() => {
627
- if (!enabled) return;
628
- function onOpenChange(_ref) {
629
- let {
630
- open
631
- } = _ref;
632
- if (!open) {
633
- clearTimeout(timeoutRef.current);
634
- clearTimeout(restTimeoutRef.current);
635
- blockMouseMoveRef.current = true;
636
- }
637
- }
638
- events.on('openchange', onOpenChange);
639
- return () => {
640
- events.off('openchange', onOpenChange);
641
- };
642
- }, [enabled, events]);
643
- React__namespace.useEffect(() => {
644
- if (!enabled) return;
645
- if (!handleCloseRef.current) return;
646
- if (!open) return;
647
- function onLeave(event) {
648
- if (isHoverOpen()) {
649
- onOpenChange(false, event, 'hover');
650
- }
651
- }
652
- const html = floatingUi_react_utils.getDocument(elements.floating).documentElement;
653
- html.addEventListener('mouseleave', onLeave);
654
- return () => {
655
- html.removeEventListener('mouseleave', onLeave);
656
- };
657
- }, [elements.floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
658
- const closeWithDelay = React__namespace.useCallback(function (event, runElseBranch, reason) {
659
- if (runElseBranch === void 0) {
660
- runElseBranch = true;
661
- }
662
- if (reason === void 0) {
663
- reason = 'hover';
664
- }
665
- const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
666
- if (closeDelay && !handlerRef.current) {
667
- clearTimeout(timeoutRef.current);
668
- timeoutRef.current = window.setTimeout(() => onOpenChange(false, event, reason), closeDelay);
669
- } else if (runElseBranch) {
670
- clearTimeout(timeoutRef.current);
671
- onOpenChange(false, event, reason);
672
- }
673
- }, [delayRef, onOpenChange]);
674
- const cleanupMouseMoveHandler = useEffectEvent(() => {
675
- unbindMouseMoveRef.current();
676
- handlerRef.current = undefined;
677
- });
678
- const clearPointerEvents = useEffectEvent(() => {
679
- if (performedPointerEventsMutationRef.current) {
680
- const body = floatingUi_react_utils.getDocument(elements.floating).body;
681
- body.style.pointerEvents = '';
682
- body.removeAttribute(safePolygonIdentifier);
683
- performedPointerEventsMutationRef.current = false;
684
- }
685
- });
686
-
687
- // Registering the mouse events on the reference directly to bypass React's
688
- // delegation system. If the cursor was on a disabled element and then entered
689
- // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
690
- React__namespace.useEffect(() => {
691
- if (!enabled) return;
692
- function isClickLikeOpenEvent() {
693
- return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
694
- }
695
- function onMouseEnter(event) {
696
- clearTimeout(timeoutRef.current);
697
- blockMouseMoveRef.current = false;
698
- if (mouseOnly && !floatingUi_react_utils.isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && !getDelay(delayRef.current, 'open')) {
699
- return;
700
- }
701
- const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
702
- if (openDelay) {
703
- timeoutRef.current = window.setTimeout(() => {
704
- if (!openRef.current) {
705
- onOpenChange(true, event, 'hover');
706
- }
707
- }, openDelay);
708
- } else {
709
- onOpenChange(true, event, 'hover');
710
- }
711
- }
712
- function onMouseLeave(event) {
713
- if (isClickLikeOpenEvent()) return;
714
- unbindMouseMoveRef.current();
715
- const doc = floatingUi_react_utils.getDocument(elements.floating);
716
- clearTimeout(restTimeoutRef.current);
717
- if (handleCloseRef.current && dataRef.current.floatingContext) {
718
- // Prevent clearing `onScrollMouseLeave` timeout.
719
- if (!open) {
720
- clearTimeout(timeoutRef.current);
721
- }
722
- handlerRef.current = handleCloseRef.current({
723
- ...dataRef.current.floatingContext,
724
- tree,
725
- x: event.clientX,
726
- y: event.clientY,
727
- onClose() {
728
- clearPointerEvents();
729
- cleanupMouseMoveHandler();
730
- closeWithDelay(event, true, 'safe-polygon');
731
- }
732
- });
733
- const handler = handlerRef.current;
734
- doc.addEventListener('mousemove', handler);
735
- unbindMouseMoveRef.current = () => {
736
- doc.removeEventListener('mousemove', handler);
737
- };
738
- return;
739
- }
740
-
741
- // Allow interactivity without `safePolygon` on touch devices. With a
742
- // pointer, a short close delay is an alternative, so it should work
743
- // consistently.
744
- const shouldClose = pointerTypeRef.current === 'touch' ? !floatingUi_react_utils.contains(elements.floating, event.relatedTarget) : true;
745
- if (shouldClose) {
746
- closeWithDelay(event);
747
- }
748
- }
749
-
750
- // Ensure the floating element closes after scrolling even if the pointer
751
- // did not move.
752
- // https://github.com/floating-ui/floating-ui/discussions/1692
753
- function onScrollMouseLeave(event) {
754
- if (isClickLikeOpenEvent()) return;
755
- if (!dataRef.current.floatingContext) return;
756
- handleCloseRef.current == null || handleCloseRef.current({
757
- ...dataRef.current.floatingContext,
758
- tree,
759
- x: event.clientX,
760
- y: event.clientY,
761
- onClose() {
762
- clearPointerEvents();
763
- cleanupMouseMoveHandler();
764
- closeWithDelay(event);
765
- }
766
- })(event);
767
- }
768
- if (floatingUi_utils_dom$1.isElement(elements.domReference)) {
769
- var _elements$floating;
770
- const ref = elements.domReference;
771
- open && ref.addEventListener('mouseleave', onScrollMouseLeave);
772
- (_elements$floating = elements.floating) == null || _elements$floating.addEventListener('mouseleave', onScrollMouseLeave);
773
- move && ref.addEventListener('mousemove', onMouseEnter, {
774
- once: true
775
- });
776
- ref.addEventListener('mouseenter', onMouseEnter);
777
- ref.addEventListener('mouseleave', onMouseLeave);
778
- return () => {
779
- var _elements$floating2;
780
- open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
781
- (_elements$floating2 = elements.floating) == null || _elements$floating2.removeEventListener('mouseleave', onScrollMouseLeave);
782
- move && ref.removeEventListener('mousemove', onMouseEnter);
783
- ref.removeEventListener('mouseenter', onMouseEnter);
784
- ref.removeEventListener('mouseleave', onMouseLeave);
785
- };
786
- }
787
- }, [elements, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, openRef, tree, delayRef, handleCloseRef, dataRef]);
788
-
789
- // Block pointer-events of every element other than the reference and floating
790
- // while the floating element is open and has a `handleClose` handler. Also
791
- // handles nested floating elements.
792
- // https://github.com/floating-ui/floating-ui/issues/1722
793
- index(() => {
794
- var _handleCloseRef$curre;
795
- if (!enabled) return;
796
- if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
797
- performedPointerEventsMutationRef.current = true;
798
- const floatingEl = elements.floating;
799
- if (floatingUi_utils_dom$1.isElement(elements.domReference) && floatingEl) {
800
- var _tree$nodesRef$curren;
801
- const body = floatingUi_react_utils.getDocument(elements.floating).body;
802
- body.setAttribute(safePolygonIdentifier, '');
803
- const ref = elements.domReference;
804
- const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
805
- if (parentFloating) {
806
- parentFloating.style.pointerEvents = '';
807
- }
808
- body.style.pointerEvents = 'none';
809
- ref.style.pointerEvents = 'auto';
810
- floatingEl.style.pointerEvents = 'auto';
811
- return () => {
812
- body.style.pointerEvents = '';
813
- ref.style.pointerEvents = '';
814
- floatingEl.style.pointerEvents = '';
815
- };
816
- }
817
- }
818
- }, [enabled, open, parentId, elements, tree, handleCloseRef, isHoverOpen]);
819
- index(() => {
820
- if (!open) {
821
- pointerTypeRef.current = undefined;
822
- cleanupMouseMoveHandler();
823
- clearPointerEvents();
824
- }
825
- }, [open, cleanupMouseMoveHandler, clearPointerEvents]);
826
- React__namespace.useEffect(() => {
827
- return () => {
828
- cleanupMouseMoveHandler();
829
- clearTimeout(timeoutRef.current);
830
- clearTimeout(restTimeoutRef.current);
831
- clearPointerEvents();
832
- };
833
- }, [enabled, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents]);
834
- const reference = React__namespace.useMemo(() => {
835
- function setPointerRef(event) {
836
- pointerTypeRef.current = event.pointerType;
837
- }
838
- return {
839
- onPointerDown: setPointerRef,
840
- onPointerEnter: setPointerRef,
841
- onMouseMove(event) {
842
- const {
843
- nativeEvent
844
- } = event;
845
- function handleMouseMove() {
846
- if (!blockMouseMoveRef.current && !openRef.current) {
847
- onOpenChange(true, nativeEvent, 'hover');
848
- }
849
- }
850
- if (mouseOnly && !floatingUi_react_utils.isMouseLikePointerType(pointerTypeRef.current)) {
851
- return;
852
- }
853
- if (open || restMs === 0) {
854
- return;
855
- }
856
- clearTimeout(restTimeoutRef.current);
857
- if (pointerTypeRef.current === 'touch') {
858
- handleMouseMove();
859
- } else {
860
- restTimeoutRef.current = window.setTimeout(handleMouseMove, restMs);
861
- }
862
- }
863
- };
864
- }, [mouseOnly, onOpenChange, open, openRef, restMs]);
865
- const floating = React__namespace.useMemo(() => ({
866
- onMouseEnter() {
867
- clearTimeout(timeoutRef.current);
868
- },
869
- onMouseLeave(event) {
870
- closeWithDelay(event.nativeEvent, false);
871
- }
872
- }), [closeWithDelay]);
873
- return React__namespace.useMemo(() => enabled ? {
874
- reference,
875
- floating
876
- } : {}, [enabled, reference, floating]);
877
- }
878
-
879
- function getAncestors(nodes, id) {
880
- var _nodes$find;
881
- let allAncestors = [];
882
- let currentParentId = (_nodes$find = nodes.find(node => node.id === id)) == null ? void 0 : _nodes$find.parentId;
883
- while (currentParentId) {
884
- const currentNode = nodes.find(node => node.id === currentParentId);
885
- currentParentId = currentNode == null ? void 0 : currentNode.parentId;
886
- if (currentNode) {
887
- allAncestors = allAncestors.concat(currentNode);
888
- }
889
- }
890
- return allAncestors;
891
- }
892
-
893
- function getChildren(nodes, id) {
894
- let allChildren = nodes.filter(node => {
895
- var _node$context;
896
- return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
897
- });
898
- let currentChildren = allChildren;
899
- while (currentChildren.length) {
900
- currentChildren = nodes.filter(node => {
901
- var _currentChildren;
902
- return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some(n => {
903
- var _node$context2;
904
- return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
905
- });
906
- });
907
- allChildren = allChildren.concat(currentChildren);
908
- }
909
- return allChildren;
910
- }
911
- function getDeepestNode(nodes, id) {
912
- let deepestNodeId;
913
- let maxDepth = -1;
914
- function findDeepest(nodeId, depth) {
915
- if (depth > maxDepth) {
916
- deepestNodeId = nodeId;
917
- maxDepth = depth;
918
- }
919
- const children = getChildren(nodes, nodeId);
920
- children.forEach(child => {
921
- findDeepest(child.id, depth + 1);
922
- });
923
- }
924
- findDeepest(id, 0);
925
- return nodes.find(node => node.id === deepestNodeId);
926
- }
927
-
928
- // Modified to add conditional `aria-hidden` support:
929
- // https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
930
- let counterMap = /*#__PURE__*/new WeakMap();
931
- let uncontrolledElementsSet = /*#__PURE__*/new WeakSet();
932
- let markerMap = {};
933
- let lockCount = 0;
934
- const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
935
- const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
936
- const correctElements = (parent, targets) => targets.map(target => {
937
- if (parent.contains(target)) {
938
- return target;
939
- }
940
- const correctedTarget = unwrapHost(target);
941
- if (parent.contains(correctedTarget)) {
942
- return correctedTarget;
943
- }
944
- return null;
945
- }).filter(x => x != null);
946
- function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
947
- const markerName = 'data-floating-ui-inert';
948
- const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
949
- const avoidElements = correctElements(body, uncorrectedAvoidElements);
950
- const elementsToKeep = new Set();
951
- const elementsToStop = new Set(avoidElements);
952
- const hiddenElements = [];
953
- if (!markerMap[markerName]) {
954
- markerMap[markerName] = new WeakMap();
955
- }
956
- const markerCounter = markerMap[markerName];
957
- avoidElements.forEach(keep);
958
- deep(body);
959
- elementsToKeep.clear();
960
- function keep(el) {
961
- if (!el || elementsToKeep.has(el)) {
962
- return;
963
- }
964
- elementsToKeep.add(el);
965
- el.parentNode && keep(el.parentNode);
966
- }
967
- function deep(parent) {
968
- if (!parent || elementsToStop.has(parent)) {
969
- return;
970
- }
971
- [].forEach.call(parent.children, node => {
972
- if (floatingUi_utils_dom$1.getNodeName(node) === 'script') return;
973
- if (elementsToKeep.has(node)) {
974
- deep(node);
975
- } else {
976
- const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
977
- const alreadyHidden = attr !== null && attr !== 'false';
978
- const counterValue = (counterMap.get(node) || 0) + 1;
979
- const markerValue = (markerCounter.get(node) || 0) + 1;
980
- counterMap.set(node, counterValue);
981
- markerCounter.set(node, markerValue);
982
- hiddenElements.push(node);
983
- if (counterValue === 1 && alreadyHidden) {
984
- uncontrolledElementsSet.add(node);
985
- }
986
- if (markerValue === 1) {
987
- node.setAttribute(markerName, '');
988
- }
989
- if (!alreadyHidden && controlAttribute) {
990
- node.setAttribute(controlAttribute, 'true');
991
- }
992
- }
993
- });
994
- }
995
- lockCount++;
996
- return () => {
997
- hiddenElements.forEach(element => {
998
- const counterValue = (counterMap.get(element) || 0) - 1;
999
- const markerValue = (markerCounter.get(element) || 0) - 1;
1000
- counterMap.set(element, counterValue);
1001
- markerCounter.set(element, markerValue);
1002
- if (!counterValue) {
1003
- if (!uncontrolledElementsSet.has(element) && controlAttribute) {
1004
- element.removeAttribute(controlAttribute);
1005
- }
1006
- uncontrolledElementsSet.delete(element);
1007
- }
1008
- if (!markerValue) {
1009
- element.removeAttribute(markerName);
1010
- }
1011
- });
1012
- lockCount--;
1013
- if (!lockCount) {
1014
- counterMap = new WeakMap();
1015
- counterMap = new WeakMap();
1016
- uncontrolledElementsSet = new WeakSet();
1017
- markerMap = {};
1018
- }
1019
- };
1020
- }
1021
- function markOthers(avoidElements, ariaHidden, inert) {
1022
- if (ariaHidden === void 0) {
1023
- ariaHidden = false;
1024
- }
1025
- if (inert === void 0) {
1026
- inert = false;
1027
- }
1028
- const body = floatingUi_react_utils.getDocument(avoidElements[0]).body;
1029
- return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
1030
- }
1031
-
1032
- const getTabbableOptions = () => ({
1033
- getShadowRoot: true,
1034
- displayCheck:
1035
- // JSDOM does not support the `tabbable` library. To solve this we can
1036
- // check if `ResizeObserver` is a real function (not polyfilled), which
1037
- // determines if the current environment is JSDOM-like.
1038
- typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
1039
- });
1040
- function getTabbableIn(container, direction) {
1041
- const allTabbable = index_esm.tabbable(container, getTabbableOptions());
1042
- if (direction === 'prev') {
1043
- allTabbable.reverse();
1044
- }
1045
- const activeIndex = allTabbable.indexOf(floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(container)));
1046
- const nextTabbableElements = allTabbable.slice(activeIndex + 1);
1047
- return nextTabbableElements[0];
1048
- }
1049
- function getNextTabbable() {
1050
- return getTabbableIn(document.body, 'next');
1051
- }
1052
- function getPreviousTabbable() {
1053
- return getTabbableIn(document.body, 'prev');
1054
- }
1055
- function isOutsideEvent(event, container) {
1056
- const containerElement = container || event.currentTarget;
1057
- const relatedTarget = event.relatedTarget;
1058
- return !relatedTarget || !floatingUi_react_utils.contains(containerElement, relatedTarget);
1059
- }
1060
- function disableFocusInside(container) {
1061
- const tabbableElements = index_esm.tabbable(container, getTabbableOptions());
1062
- tabbableElements.forEach(element => {
1063
- element.dataset.tabindex = element.getAttribute('tabindex') || '';
1064
- element.setAttribute('tabindex', '-1');
1065
- });
1066
- }
1067
- function enableFocusInside(container) {
1068
- const elements = container.querySelectorAll('[data-tabindex]');
1069
- elements.forEach(element => {
1070
- const tabindex = element.dataset.tabindex;
1071
- delete element.dataset.tabindex;
1072
- if (tabindex) {
1073
- element.setAttribute('tabindex', tabindex);
1074
- } else {
1075
- element.removeAttribute('tabindex');
1076
- }
1077
- });
1078
- }
1079
- function getClosestTabbableElement(tabbableElements, element, floating) {
1080
- const elementIndex = tabbableElements.indexOf(element);
1081
- function traverseTabbableElements(next) {
1082
- const attr = createAttribute('focus-guard');
1083
- let index = elementIndex + (next ? 1 : 0);
1084
- let currentElement = tabbableElements[index];
1085
- while (currentElement && (!currentElement.isConnected || currentElement.hasAttribute(attr) || floatingUi_react_utils.contains(floating, currentElement))) {
1086
- if (next) {
1087
- index++;
1088
- } else {
1089
- index--;
1090
- }
1091
- currentElement = tabbableElements[index];
1092
- }
1093
- return currentElement;
1094
- }
1095
-
1096
- // First, try to find the next tabbable element
1097
- const next = traverseTabbableElements(true);
1098
- if (next) {
1099
- return next;
1100
- }
1101
-
1102
- // If we can't find a next tabbable element, try to find the previous one
1103
- return traverseTabbableElements(false);
1104
- }
1105
-
1106
- // See Diego Haz's Sandbox for making this logic work well on Safari/iOS:
1107
- // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/FocusTrap.tsx
1108
-
1109
- const HIDDEN_STYLES = {
1110
- border: 0,
1111
- clip: 'rect(0 0 0 0)',
1112
- height: '1px',
1113
- margin: '-1px',
1114
- overflow: 'hidden',
1115
- padding: 0,
1116
- position: 'fixed',
1117
- whiteSpace: 'nowrap',
1118
- width: '1px',
1119
- top: 0,
1120
- left: 0
1121
- };
1122
- let timeoutId;
1123
- function setActiveElementOnTab(event) {
1124
- if (event.key === 'Tab') {
1125
- event.target;
1126
- clearTimeout(timeoutId);
1127
- }
1128
- }
1129
- const FocusGuard = /*#__PURE__*/React__namespace.forwardRef(function FocusGuard(props, ref) {
1130
- const [role, setRole] = React__namespace.useState();
1131
- index(() => {
1132
- if (floatingUi_react_utils.isSafari()) {
1133
- // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
1134
- // on VoiceOver does trigger the onFocus event, so we can use the focus
1135
- // trap element. On Safari, only buttons trigger the onFocus event.
1136
- // NB: "group" role in the Sandbox no longer appears to work, must be a
1137
- // button role.
1138
- setRole('button');
1139
- }
1140
- document.addEventListener('keydown', setActiveElementOnTab);
1141
- return () => {
1142
- document.removeEventListener('keydown', setActiveElementOnTab);
1143
- };
1144
- }, []);
1145
- const restProps = {
1146
- ref,
1147
- tabIndex: 0,
1148
- // Role is only for VoiceOver
1149
- role,
1150
- 'aria-hidden': role ? undefined : true,
1151
- [createAttribute('focus-guard')]: '',
1152
- style: HIDDEN_STYLES
1153
- };
1154
- return /*#__PURE__*/React__namespace.createElement("span", _extends({}, props, restProps));
1155
- });
1156
-
1157
- const PortalContext = /*#__PURE__*/React__namespace.createContext(null);
1158
- const attr = /*#__PURE__*/createAttribute('portal');
1159
- /**
1160
- * @see https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode
1161
- */
1162
- function useFloatingPortalNode(props) {
1163
- if (props === void 0) {
1164
- props = {};
1165
- }
1166
- const {
1167
- id,
1168
- root
1169
- } = props;
1170
- const uniqueId = useId();
1171
- const portalContext = usePortalContext();
1172
- const [portalNode, setPortalNode] = React__namespace.useState(null);
1173
- const portalNodeRef = React__namespace.useRef(null);
1174
- index(() => {
1175
- return () => {
1176
- portalNode == null || portalNode.remove();
1177
- // Allow the subsequent layout effects to create a new node on updates.
1178
- // The portal node will still be cleaned up on unmount.
1179
- // https://github.com/floating-ui/floating-ui/issues/2454
1180
- queueMicrotask(() => {
1181
- portalNodeRef.current = null;
1182
- });
1183
- };
1184
- }, [portalNode]);
1185
- index(() => {
1186
- // Wait for the uniqueId to be generated before creating the portal node in
1187
- // React <18 (using `useFloatingId` instead of the native `useId`).
1188
- // https://github.com/floating-ui/floating-ui/issues/2778
1189
- if (!uniqueId) return;
1190
- if (portalNodeRef.current) return;
1191
- const existingIdRoot = id ? document.getElementById(id) : null;
1192
- if (!existingIdRoot) return;
1193
- const subRoot = document.createElement('div');
1194
- subRoot.id = uniqueId;
1195
- subRoot.setAttribute(attr, '');
1196
- existingIdRoot.appendChild(subRoot);
1197
- portalNodeRef.current = subRoot;
1198
- setPortalNode(subRoot);
1199
- }, [id, uniqueId]);
1200
- index(() => {
1201
- if (!uniqueId) return;
1202
- if (portalNodeRef.current) return;
1203
- let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
1204
- if (container && !floatingUi_utils_dom$1.isElement(container)) container = container.current;
1205
- container = container || document.body;
1206
- let idWrapper = null;
1207
- if (id) {
1208
- idWrapper = document.createElement('div');
1209
- idWrapper.id = id;
1210
- container.appendChild(idWrapper);
1211
- }
1212
- const subRoot = document.createElement('div');
1213
- subRoot.id = uniqueId;
1214
- subRoot.setAttribute(attr, '');
1215
- container = idWrapper || container;
1216
- container.appendChild(subRoot);
1217
- portalNodeRef.current = subRoot;
1218
- setPortalNode(subRoot);
1219
- }, [id, root, uniqueId, portalContext]);
1220
- return portalNode;
1221
- }
1222
- /**
1223
- * Portals the floating element into a given container element — by default,
1224
- * outside of the app root and into the body.
1225
- * This is necessary to ensure the floating element can appear outside any
1226
- * potential parent containers that cause clipping (such as `overflow: hidden`),
1227
- * while retaining its location in the React tree.
1228
- * @see https://floating-ui.com/docs/FloatingPortal
1229
- */
1230
- function FloatingPortal(props) {
1231
- const {
1232
- children,
1233
- id,
1234
- root = null,
1235
- preserveTabOrder = true
1236
- } = props;
1237
- const portalNode = useFloatingPortalNode({
1238
- id,
1239
- root
1240
- });
1241
- const [focusManagerState, setFocusManagerState] = React__namespace.useState(null);
1242
- const beforeOutsideRef = React__namespace.useRef(null);
1243
- const afterOutsideRef = React__namespace.useRef(null);
1244
- const beforeInsideRef = React__namespace.useRef(null);
1245
- const afterInsideRef = React__namespace.useRef(null);
1246
- const modal = focusManagerState == null ? void 0 : focusManagerState.modal;
1247
- const open = focusManagerState == null ? void 0 : focusManagerState.open;
1248
- const shouldRenderGuards =
1249
- // The FocusManager and therefore floating element are currently open/
1250
- // rendered.
1251
- !!focusManagerState &&
1252
- // Guards are only for non-modal focus management.
1253
- !focusManagerState.modal &&
1254
- // Don't render if unmount is transitioning.
1255
- focusManagerState.open && preserveTabOrder && !!(root || portalNode);
1256
-
1257
- // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
1258
- React__namespace.useEffect(() => {
1259
- if (!portalNode || !preserveTabOrder || modal) {
1260
- return;
1261
- }
1262
-
1263
- // Make sure elements inside the portal element are tabbable only when the
1264
- // portal has already been focused, either by tabbing into a focus trap
1265
- // element outside or using the mouse.
1266
- function onFocus(event) {
1267
- if (portalNode && isOutsideEvent(event)) {
1268
- const focusing = event.type === 'focusin';
1269
- const manageFocus = focusing ? enableFocusInside : disableFocusInside;
1270
- manageFocus(portalNode);
1271
- }
1272
- }
1273
- // Listen to the event on the capture phase so they run before the focus
1274
- // trap elements onFocus prop is called.
1275
- portalNode.addEventListener('focusin', onFocus, true);
1276
- portalNode.addEventListener('focusout', onFocus, true);
1277
- return () => {
1278
- portalNode.removeEventListener('focusin', onFocus, true);
1279
- portalNode.removeEventListener('focusout', onFocus, true);
1280
- };
1281
- }, [portalNode, preserveTabOrder, modal]);
1282
- React__namespace.useEffect(() => {
1283
- if (!portalNode) return;
1284
- if (open) return;
1285
- enableFocusInside(portalNode);
1286
- }, [open, portalNode]);
1287
- return /*#__PURE__*/React__namespace.createElement(PortalContext.Provider, {
1288
- value: React__namespace.useMemo(() => ({
1289
- preserveTabOrder,
1290
- beforeOutsideRef,
1291
- afterOutsideRef,
1292
- beforeInsideRef,
1293
- afterInsideRef,
1294
- portalNode,
1295
- setFocusManagerState
1296
- }), [preserveTabOrder, portalNode])
1297
- }, shouldRenderGuards && portalNode && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
1298
- "data-type": "outside",
1299
- ref: beforeOutsideRef,
1300
- onFocus: event => {
1301
- if (isOutsideEvent(event, portalNode)) {
1302
- var _beforeInsideRef$curr;
1303
- (_beforeInsideRef$curr = beforeInsideRef.current) == null || _beforeInsideRef$curr.focus();
1304
- } else {
1305
- const prevTabbable = getPreviousTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
1306
- prevTabbable == null || prevTabbable.focus();
1307
- }
1308
- }
1309
- }), shouldRenderGuards && portalNode && /*#__PURE__*/React__namespace.createElement("span", {
1310
- "aria-owns": portalNode.id,
1311
- style: HIDDEN_STYLES
1312
- }), portalNode && /*#__PURE__*/ReactDOM__namespace.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
1313
- "data-type": "outside",
1314
- ref: afterOutsideRef,
1315
- onFocus: event => {
1316
- if (isOutsideEvent(event, portalNode)) {
1317
- var _afterInsideRef$curre;
1318
- (_afterInsideRef$curre = afterInsideRef.current) == null || _afterInsideRef$curre.focus();
1319
- } else {
1320
- const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
1321
- nextTabbable == null || nextTabbable.focus();
1322
- (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent, 'focus-out'));
1323
- }
1324
- }
1325
- }));
1326
- }
1327
- const usePortalContext = () => React__namespace.useContext(PortalContext);
1328
-
1329
- const FOCUSABLE_ATTRIBUTE = 'data-floating-ui-focusable';
1330
- function getFloatingFocusElement(floatingElement) {
1331
- if (!floatingElement) {
1332
- return null;
1333
- }
1334
- // Try to find the element that has `{...getFloatingProps()}` spread on it.
1335
- // This indicates the floating element is acting as a positioning wrapper, and
1336
- // so focus should be managed on the child element with the event handlers and
1337
- // aria props.
1338
- return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector("[" + FOCUSABLE_ATTRIBUTE + "]") || floatingElement;
1339
- }
1340
-
1341
- const LIST_LIMIT = 20;
1342
- let previouslyFocusedElements = [];
1343
- function addPreviouslyFocusedElement(element) {
1344
- previouslyFocusedElements = previouslyFocusedElements.filter(el => el.isConnected);
1345
- let tabbableEl = element;
1346
- if (!tabbableEl || floatingUi_utils_dom$1.getNodeName(tabbableEl) === 'body') return;
1347
- if (!index_esm.isTabbable(tabbableEl, getTabbableOptions())) {
1348
- const tabbableChild = index_esm.tabbable(tabbableEl, getTabbableOptions())[0];
1349
- if (tabbableChild) {
1350
- tabbableEl = tabbableChild;
1351
- }
1352
- }
1353
- previouslyFocusedElements.push(tabbableEl);
1354
- if (previouslyFocusedElements.length > LIST_LIMIT) {
1355
- previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
1356
- }
1357
- }
1358
- function getPreviouslyFocusedElement() {
1359
- return previouslyFocusedElements.slice().reverse().find(el => el.isConnected);
1360
- }
1361
- const VisuallyHiddenDismiss = /*#__PURE__*/React__namespace.forwardRef(function VisuallyHiddenDismiss(props, ref) {
1362
- return /*#__PURE__*/React__namespace.createElement("button", _extends({}, props, {
1363
- type: "button",
1364
- ref: ref,
1365
- tabIndex: -1,
1366
- style: HIDDEN_STYLES
1367
- }));
1368
- });
1369
- /**
1370
- * Provides focus management for the floating element.
1371
- * @see https://floating-ui.com/docs/FloatingFocusManager
1372
- */
1373
- function FloatingFocusManager(props) {
1374
- const {
1375
- context,
1376
- children,
1377
- disabled = false,
1378
- order = ['content'],
1379
- guards: _guards = true,
1380
- initialFocus = 0,
1381
- returnFocus = true,
1382
- restoreFocus = false,
1383
- modal = true,
1384
- visuallyHiddenDismiss = false,
1385
- closeOnFocusOut = true
1386
- } = props;
1387
- const {
1388
- open,
1389
- refs,
1390
- nodeId,
1391
- onOpenChange,
1392
- events,
1393
- dataRef,
1394
- floatingId,
1395
- elements: {
1396
- domReference,
1397
- floating
1398
- }
1399
- } = context;
1400
- const ignoreInitialFocus = typeof initialFocus === 'number' && initialFocus < 0;
1401
- // If the reference is a combobox and is typeable (e.g. input/textarea),
1402
- // there are different focus semantics. The guards should not be rendered, but
1403
- // aria-hidden should be applied to all nodes still. Further, the visually
1404
- // hidden dismiss button should only appear at the end of the list, not the
1405
- // start.
1406
- const isUntrappedTypeableCombobox = floatingUi_react_utils.isTypeableCombobox(domReference) && ignoreInitialFocus;
1407
-
1408
- // Force the guards to be rendered if the `inert` attribute is not supported.
1409
- const guards = supportsInert() ? _guards : true;
1410
- const orderRef = useLatestRef(order);
1411
- const initialFocusRef = useLatestRef(initialFocus);
1412
- const returnFocusRef = useLatestRef(returnFocus);
1413
- const tree = useFloatingTree();
1414
- const portalContext = usePortalContext();
1415
- const startDismissButtonRef = React__namespace.useRef(null);
1416
- const endDismissButtonRef = React__namespace.useRef(null);
1417
- const preventReturnFocusRef = React__namespace.useRef(false);
1418
- const isPointerDownRef = React__namespace.useRef(false);
1419
- const tabbableIndexRef = React__namespace.useRef(-1);
1420
- const isInsidePortal = portalContext != null;
1421
- const floatingFocusElement = getFloatingFocusElement(floating);
1422
- const getTabbableContent = useEffectEvent(function (container) {
1423
- if (container === void 0) {
1424
- container = floatingFocusElement;
1425
- }
1426
- return container ? index_esm.tabbable(container, getTabbableOptions()) : [];
1427
- });
1428
- const getTabbableElements = useEffectEvent(container => {
1429
- const content = getTabbableContent(container);
1430
- return orderRef.current.map(type => {
1431
- if (domReference && type === 'reference') {
1432
- return domReference;
1433
- }
1434
- if (floatingFocusElement && type === 'floating') {
1435
- return floatingFocusElement;
1436
- }
1437
- return content;
1438
- }).filter(Boolean).flat();
1439
- });
1440
- React__namespace.useEffect(() => {
1441
- preventReturnFocusRef.current = false;
1442
- }, [disabled]);
1443
- React__namespace.useEffect(() => {
1444
- if (disabled) return;
1445
- if (!modal) return;
1446
- function onKeyDown(event) {
1447
- if (event.key === 'Tab') {
1448
- // The focus guards have nothing to focus, so we need to stop the event.
1449
- if (floatingUi_react_utils.contains(floatingFocusElement, floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
1450
- floatingUi_react_utils.stopEvent(event);
1451
- }
1452
- const els = getTabbableElements();
1453
- const target = floatingUi_react_utils.getTarget(event);
1454
- if (orderRef.current[0] === 'reference' && target === domReference) {
1455
- floatingUi_react_utils.stopEvent(event);
1456
- if (event.shiftKey) {
1457
- enqueueFocus(els[els.length - 1]);
1458
- } else {
1459
- enqueueFocus(els[1]);
1460
- }
1461
- }
1462
- if (orderRef.current[1] === 'floating' && target === floatingFocusElement && event.shiftKey) {
1463
- floatingUi_react_utils.stopEvent(event);
1464
- enqueueFocus(els[0]);
1465
- }
1466
- }
1467
- }
1468
- const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
1469
- doc.addEventListener('keydown', onKeyDown);
1470
- return () => {
1471
- doc.removeEventListener('keydown', onKeyDown);
1472
- };
1473
- }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
1474
- React__namespace.useEffect(() => {
1475
- if (disabled) return;
1476
- if (!floating) return;
1477
- function handleFocusIn(event) {
1478
- const target = floatingUi_react_utils.getTarget(event);
1479
- const tabbableContent = getTabbableContent();
1480
- const tabbableIndex = tabbableContent.indexOf(target);
1481
- if (tabbableIndex !== -1) {
1482
- tabbableIndexRef.current = tabbableIndex;
1483
- }
1484
- }
1485
- floating.addEventListener('focusin', handleFocusIn);
1486
- return () => {
1487
- floating.removeEventListener('focusin', handleFocusIn);
1488
- };
1489
- }, [disabled, floating, getTabbableContent]);
1490
- React__namespace.useEffect(() => {
1491
- if (disabled) return;
1492
- if (!closeOnFocusOut) return;
1493
-
1494
- // In Safari, buttons lose focus when pressing them.
1495
- function handlePointerDown() {
1496
- isPointerDownRef.current = true;
1497
- setTimeout(() => {
1498
- isPointerDownRef.current = false;
1499
- });
1500
- }
1501
- function handleFocusOutside(event) {
1502
- const relatedTarget = event.relatedTarget;
1503
- queueMicrotask(() => {
1504
- const movedToUnrelatedNode = !(floatingUi_react_utils.contains(domReference, relatedTarget) || floatingUi_react_utils.contains(floating, relatedTarget) || floatingUi_react_utils.contains(relatedTarget, floating) || floatingUi_react_utils.contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute('focus-guard')) || tree && (getChildren(tree.nodesRef.current, nodeId).find(node => {
1505
- var _node$context, _node$context2;
1506
- return floatingUi_react_utils.contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || floatingUi_react_utils.contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
1507
- }) || getAncestors(tree.nodesRef.current, nodeId).find(node => {
1508
- var _node$context3, _node$context4;
1509
- return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
1510
- })));
1511
-
1512
- // Restore focus to the previous tabbable element index to prevent
1513
- // focus from being lost outside the floating tree.
1514
- if (restoreFocus && movedToUnrelatedNode && floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusElement)) === floatingUi_react_utils.getDocument(floatingFocusElement).body) {
1515
- // Let `FloatingPortal` effect knows that focus is still inside the
1516
- // floating tree.
1517
- if (floatingUi_utils_dom$1.isHTMLElement(floatingFocusElement)) {
1518
- floatingFocusElement.focus();
1519
- }
1520
- const prevTabbableIndex = tabbableIndexRef.current;
1521
- const tabbableContent = getTabbableContent();
1522
- const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
1523
- if (floatingUi_utils_dom$1.isHTMLElement(nodeToFocus)) {
1524
- nodeToFocus.focus();
1525
- }
1526
- }
1527
-
1528
- // Focus did not move inside the floating tree, and there are no tabbable
1529
- // portal guards to handle closing.
1530
- if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
1531
- // Fix React 18 Strict Mode returnFocus due to double rendering.
1532
- relatedTarget !== getPreviouslyFocusedElement()) {
1533
- preventReturnFocusRef.current = true;
1534
- onOpenChange(false, event, 'focus-out');
1535
- }
1536
- });
1537
- }
1538
- if (floating && floatingUi_utils_dom$1.isHTMLElement(domReference)) {
1539
- domReference.addEventListener('focusout', handleFocusOutside);
1540
- domReference.addEventListener('pointerdown', handlePointerDown);
1541
- floating.addEventListener('focusout', handleFocusOutside);
1542
- return () => {
1543
- domReference.removeEventListener('focusout', handleFocusOutside);
1544
- domReference.removeEventListener('pointerdown', handlePointerDown);
1545
- floating.removeEventListener('focusout', handleFocusOutside);
1546
- };
1547
- }
1548
- }, [disabled, domReference, floating, floatingFocusElement, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
1549
- React__namespace.useEffect(() => {
1550
- var _portalContext$portal;
1551
- if (disabled) return;
1552
-
1553
- // Don't hide portals nested within the parent portal.
1554
- const portalNodes = Array.from((portalContext == null || (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute('portal') + "]")) || []);
1555
- if (floating) {
1556
- const insideElements = [floating, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, orderRef.current.includes('reference') || isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
1557
- const cleanup = modal || isUntrappedTypeableCombobox ? markOthers(insideElements, guards, !guards) : markOthers(insideElements);
1558
- return () => {
1559
- cleanup();
1560
- };
1561
- }
1562
- }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
1563
- index(() => {
1564
- if (disabled || !floatingUi_utils_dom$1.isHTMLElement(floatingFocusElement)) return;
1565
- const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
1566
- const previouslyFocusedElement = floatingUi_react_utils.activeElement(doc);
1567
-
1568
- // Wait for any layout effect state setters to execute to set `tabIndex`.
1569
- queueMicrotask(() => {
1570
- const focusableElements = getTabbableElements(floatingFocusElement);
1571
- const initialFocusValue = initialFocusRef.current;
1572
- const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusElement;
1573
- const focusAlreadyInsideFloatingEl = floatingUi_react_utils.contains(floatingFocusElement, previouslyFocusedElement);
1574
- if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
1575
- enqueueFocus(elToFocus, {
1576
- preventScroll: elToFocus === floatingFocusElement
1577
- });
1578
- }
1579
- });
1580
- }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
1581
- index(() => {
1582
- if (disabled || !floatingFocusElement) return;
1583
- let preventReturnFocusScroll = false;
1584
- const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
1585
- const previouslyFocusedElement = floatingUi_react_utils.activeElement(doc);
1586
- const contextData = dataRef.current;
1587
- let openEvent = contextData.openEvent;
1588
- const domReference = refs.domReference.current;
1589
- addPreviouslyFocusedElement(previouslyFocusedElement);
1590
-
1591
- // Dismissing via outside press should always ignore `returnFocus` to
1592
- // prevent unwanted scrolling.
1593
- function onOpenChange(_ref) {
1594
- let {
1595
- open,
1596
- reason,
1597
- event,
1598
- nested
1599
- } = _ref;
1600
- if (open) {
1601
- openEvent = event;
1602
- }
1603
- if (reason === 'escape-key' && refs.domReference.current) {
1604
- addPreviouslyFocusedElement(refs.domReference.current);
1605
- }
1606
- if (reason === 'hover' && event.type === 'mouseleave') {
1607
- preventReturnFocusRef.current = true;
1608
- }
1609
- if (reason !== 'outside-press') return;
1610
- if (nested) {
1611
- preventReturnFocusRef.current = false;
1612
- preventReturnFocusScroll = true;
1613
- } else {
1614
- preventReturnFocusRef.current = !(floatingUi_react_utils.isVirtualClick(event) || floatingUi_react_utils.isVirtualPointerEvent(event));
1615
- }
1616
- }
1617
- events.on('openchange', onOpenChange);
1618
- return () => {
1619
- events.off('openchange', onOpenChange);
1620
- const activeEl = floatingUi_react_utils.activeElement(doc);
1621
- const isFocusInsideFloatingTree = floatingUi_react_utils.contains(floating, activeEl) || tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
1622
- var _node$context5;
1623
- return floatingUi_react_utils.contains((_node$context5 = node.context) == null ? void 0 : _node$context5.elements.floating, activeEl);
1624
- });
1625
- const shouldFocusReference = isFocusInsideFloatingTree || openEvent && ['click', 'mousedown'].includes(openEvent.type);
1626
- if (shouldFocusReference && refs.domReference.current) {
1627
- addPreviouslyFocusedElement(refs.domReference.current);
1628
- }
1629
- const returnContextElement = domReference || previouslyFocusedElement;
1630
- const tabbableElements = index_esm.tabbable(floatingUi_react_utils.getDocument(returnContextElement).body, getTabbableOptions());
1631
-
1632
- // Wait for the return element to get potentially disconnected before
1633
- // checking.
1634
- queueMicrotask(() => {
1635
- let returnElement = getPreviouslyFocusedElement();
1636
- if (!returnElement && floatingUi_utils_dom$1.isHTMLElement(returnContextElement) && floating) {
1637
- returnElement = getClosestTabbableElement(tabbableElements, returnContextElement, floating);
1638
- }
1639
- if (
1640
- // eslint-disable-next-line react-hooks/exhaustive-deps
1641
- returnFocusRef.current && !preventReturnFocusRef.current && floatingUi_utils_dom$1.isHTMLElement(returnElement) && (
1642
- // If the focus moved somewhere else after mount, avoid returning focus
1643
- // since it likely entered a different element which should be
1644
- // respected: https://github.com/floating-ui/floating-ui/issues/2607
1645
- returnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
1646
- returnElement.focus({
1647
- preventScroll: preventReturnFocusScroll
1648
- });
1649
- }
1650
- });
1651
- };
1652
- }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, refs, events, tree, nodeId]);
1653
-
1654
- // Synchronize the `context` & `modal` value to the FloatingPortal context.
1655
- // It will decide whether or not it needs to render its own guards.
1656
- index(() => {
1657
- if (disabled) return;
1658
- if (!portalContext) return;
1659
- portalContext.setFocusManagerState({
1660
- modal,
1661
- closeOnFocusOut,
1662
- open,
1663
- onOpenChange,
1664
- refs
1665
- });
1666
- return () => {
1667
- portalContext.setFocusManagerState(null);
1668
- };
1669
- }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
1670
- index(() => {
1671
- if (disabled) return;
1672
- if (!floatingFocusElement) return;
1673
- if (typeof MutationObserver !== 'function') return;
1674
- if (ignoreInitialFocus) return;
1675
- const handleMutation = () => {
1676
- const tabIndex = floatingFocusElement.getAttribute('tabindex');
1677
- const tabbableContent = getTabbableContent();
1678
- const activeEl = floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floating));
1679
- const tabbableIndex = tabbableContent.indexOf(activeEl);
1680
- if (tabbableIndex !== -1) {
1681
- tabbableIndexRef.current = tabbableIndex;
1682
- }
1683
- if (orderRef.current.includes('floating') || activeEl !== refs.domReference.current && tabbableContent.length === 0) {
1684
- if (tabIndex !== '0') {
1685
- floatingFocusElement.setAttribute('tabindex', '0');
1686
- }
1687
- } else if (tabIndex !== '-1') {
1688
- floatingFocusElement.setAttribute('tabindex', '-1');
1689
- }
1690
- };
1691
- handleMutation();
1692
- const observer = new MutationObserver(handleMutation);
1693
- observer.observe(floatingFocusElement, {
1694
- childList: true,
1695
- subtree: true,
1696
- attributes: true
1697
- });
1698
- return () => {
1699
- observer.disconnect();
1700
- };
1701
- }, [disabled, floating, floatingFocusElement, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
1702
- function renderDismissButton(location) {
1703
- if (disabled || !visuallyHiddenDismiss || !modal) {
1704
- return null;
1705
- }
1706
- return /*#__PURE__*/React__namespace.createElement(VisuallyHiddenDismiss, {
1707
- ref: location === 'start' ? startDismissButtonRef : endDismissButtonRef,
1708
- onClick: event => onOpenChange(false, event.nativeEvent)
1709
- }, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss');
1710
- }
1711
- const shouldRenderGuards = !disabled && guards && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
1712
- return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, shouldRenderGuards && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
1713
- "data-type": "inside",
1714
- ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
1715
- onFocus: event => {
1716
- if (modal) {
1717
- const els = getTabbableElements();
1718
- enqueueFocus(order[0] === 'reference' ? els[0] : els[els.length - 1]);
1719
- } else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
1720
- preventReturnFocusRef.current = false;
1721
- if (isOutsideEvent(event, portalContext.portalNode)) {
1722
- const nextTabbable = getNextTabbable() || domReference;
1723
- nextTabbable == null || nextTabbable.focus();
1724
- } else {
1725
- var _portalContext$before;
1726
- (_portalContext$before = portalContext.beforeOutsideRef.current) == null || _portalContext$before.focus();
1727
- }
1728
- }
1729
- }
1730
- }), !isUntrappedTypeableCombobox && renderDismissButton('start'), children, renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
1731
- "data-type": "inside",
1732
- ref: portalContext == null ? void 0 : portalContext.afterInsideRef,
1733
- onFocus: event => {
1734
- if (modal) {
1735
- enqueueFocus(getTabbableElements()[0]);
1736
- } else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
1737
- if (closeOnFocusOut) {
1738
- preventReturnFocusRef.current = true;
1739
- }
1740
- if (isOutsideEvent(event, portalContext.portalNode)) {
1741
- const prevTabbable = getPreviousTabbable() || domReference;
1742
- prevTabbable == null || prevTabbable.focus();
1743
- } else {
1744
- var _portalContext$afterO;
1745
- (_portalContext$afterO = portalContext.afterOutsideRef.current) == null || _portalContext$afterO.focus();
1746
- }
1747
- }
1748
- }
1749
- }));
1750
- }
1751
-
1752
- function isButtonTarget(event) {
1753
- return floatingUi_utils_dom$1.isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
1754
- }
1755
- function isSpaceIgnored(element) {
1756
- return floatingUi_react_utils.isTypeableElement(element);
1757
- }
1758
- /**
1759
- * Opens or closes the floating element when clicking the reference element.
1760
- * @see https://floating-ui.com/docs/useClick
1761
- */
1762
- function useClick(context, props) {
1763
- if (props === void 0) {
1764
- props = {};
1765
- }
1766
- const {
1767
- open,
1768
- onOpenChange,
1769
- dataRef,
1770
- elements: {
1771
- domReference
1772
- }
1773
- } = context;
1774
- const {
1775
- enabled = true,
1776
- event: eventOption = 'click',
1777
- toggle = true,
1778
- ignoreMouse = false,
1779
- keyboardHandlers = true
1780
- } = props;
1781
- const pointerTypeRef = React__namespace.useRef();
1782
- const didKeyDownRef = React__namespace.useRef(false);
1783
- const reference = React__namespace.useMemo(() => ({
1784
- onPointerDown(event) {
1785
- pointerTypeRef.current = event.pointerType;
1786
- },
1787
- onMouseDown(event) {
1788
- const pointerType = pointerTypeRef.current;
1789
-
1790
- // Ignore all buttons except for the "main" button.
1791
- // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
1792
- if (event.button !== 0) return;
1793
- if (eventOption === 'click') return;
1794
- if (floatingUi_react_utils.isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
1795
- if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
1796
- onOpenChange(false, event.nativeEvent, 'click');
1797
- } else {
1798
- // Prevent stealing focus from the floating element
1799
- event.preventDefault();
1800
- onOpenChange(true, event.nativeEvent, 'click');
1801
- }
1802
- },
1803
- onClick(event) {
1804
- const pointerType = pointerTypeRef.current;
1805
- if (eventOption === 'mousedown' && pointerTypeRef.current) {
1806
- pointerTypeRef.current = undefined;
1807
- return;
1808
- }
1809
- if (floatingUi_react_utils.isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
1810
- if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
1811
- onOpenChange(false, event.nativeEvent, 'click');
1812
- } else {
1813
- onOpenChange(true, event.nativeEvent, 'click');
1814
- }
1815
- },
1816
- onKeyDown(event) {
1817
- pointerTypeRef.current = undefined;
1818
- if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
1819
- return;
1820
- }
1821
- if (event.key === ' ' && !isSpaceIgnored(domReference)) {
1822
- // Prevent scrolling
1823
- event.preventDefault();
1824
- didKeyDownRef.current = true;
1825
- }
1826
- if (event.key === 'Enter') {
1827
- if (open && toggle) {
1828
- onOpenChange(false, event.nativeEvent, 'click');
1829
- } else {
1830
- onOpenChange(true, event.nativeEvent, 'click');
1831
- }
1832
- }
1833
- },
1834
- onKeyUp(event) {
1835
- if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
1836
- return;
1837
- }
1838
- if (event.key === ' ' && didKeyDownRef.current) {
1839
- didKeyDownRef.current = false;
1840
- if (open && toggle) {
1841
- onOpenChange(false, event.nativeEvent, 'click');
1842
- } else {
1843
- onOpenChange(true, event.nativeEvent, 'click');
1844
- }
1845
- }
1846
- }
1847
- }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, toggle]);
1848
- return React__namespace.useMemo(() => enabled ? {
1849
- reference
1850
- } : {}, [enabled, reference]);
1851
- }
1852
-
1853
- const bubbleHandlerKeys = {
1854
- pointerdown: 'onPointerDown',
1855
- mousedown: 'onMouseDown',
1856
- click: 'onClick'
1857
- };
1858
- const captureHandlerKeys = {
1859
- pointerdown: 'onPointerDownCapture',
1860
- mousedown: 'onMouseDownCapture',
1861
- click: 'onClickCapture'
1862
- };
1863
- const normalizeProp = normalizable => {
1864
- var _normalizable$escapeK, _normalizable$outside;
1865
- return {
1866
- escapeKey: typeof normalizable === 'boolean' ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
1867
- outsidePress: typeof normalizable === 'boolean' ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
1868
- };
1869
- };
1870
- /**
1871
- * Closes the floating element when a dismissal is requested — by default, when
1872
- * the user presses the `escape` key or outside of the floating element.
1873
- * @see https://floating-ui.com/docs/useDismiss
1874
- */
1875
- function useDismiss(context, props) {
1876
- if (props === void 0) {
1877
- props = {};
1878
- }
1879
- const {
1880
- open,
1881
- onOpenChange,
1882
- elements,
1883
- dataRef
1884
- } = context;
1885
- const {
1886
- enabled = true,
1887
- escapeKey = true,
1888
- outsidePress: unstable_outsidePress = true,
1889
- outsidePressEvent = 'pointerdown',
1890
- referencePress = false,
1891
- referencePressEvent = 'pointerdown',
1892
- ancestorScroll = false,
1893
- bubbles,
1894
- capture
1895
- } = props;
1896
- const tree = useFloatingTree();
1897
- const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
1898
- const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
1899
- const insideReactTreeRef = React__namespace.useRef(false);
1900
- const endedOrStartedInsideRef = React__namespace.useRef(false);
1901
- const {
1902
- escapeKey: escapeKeyBubbles,
1903
- outsidePress: outsidePressBubbles
1904
- } = normalizeProp(bubbles);
1905
- const {
1906
- escapeKey: escapeKeyCapture,
1907
- outsidePress: outsidePressCapture
1908
- } = normalizeProp(capture);
1909
- const closeOnEscapeKeyDown = useEffectEvent(event => {
1910
- var _dataRef$current$floa;
1911
- if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
1912
- return;
1913
- }
1914
- const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
1915
- const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
1916
- if (!escapeKeyBubbles) {
1917
- event.stopPropagation();
1918
- if (children.length > 0) {
1919
- let shouldDismiss = true;
1920
- children.forEach(child => {
1921
- var _child$context;
1922
- if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
1923
- shouldDismiss = false;
1924
- return;
1925
- }
1926
- });
1927
- if (!shouldDismiss) {
1928
- return;
1929
- }
1930
- }
1931
- }
1932
- onOpenChange(false, floatingUi_react_utils.isReactEvent(event) ? event.nativeEvent : event, 'escape-key');
1933
- });
1934
- const closeOnEscapeKeyDownCapture = useEffectEvent(event => {
1935
- var _getTarget2;
1936
- const callback = () => {
1937
- var _getTarget;
1938
- closeOnEscapeKeyDown(event);
1939
- (_getTarget = floatingUi_react_utils.getTarget(event)) == null || _getTarget.removeEventListener('keydown', callback);
1940
- };
1941
- (_getTarget2 = floatingUi_react_utils.getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);
1942
- });
1943
- const closeOnPressOutside = useEffectEvent(event => {
1944
- var _dataRef$current$floa2;
1945
- // Given developers can stop the propagation of the synthetic event,
1946
- // we can only be confident with a positive value.
1947
- const insideReactTree = insideReactTreeRef.current;
1948
- insideReactTreeRef.current = false;
1949
-
1950
- // When click outside is lazy (`click` event), handle dragging.
1951
- // Don't close if:
1952
- // - The click started inside the floating element.
1953
- // - The click ended inside the floating element.
1954
- const endedOrStartedInside = endedOrStartedInsideRef.current;
1955
- endedOrStartedInsideRef.current = false;
1956
- if (outsidePressEvent === 'click' && endedOrStartedInside) {
1957
- return;
1958
- }
1959
- if (insideReactTree) {
1960
- return;
1961
- }
1962
- if (typeof outsidePress === 'function' && !outsidePress(event)) {
1963
- return;
1964
- }
1965
- const target = floatingUi_react_utils.getTarget(event);
1966
- const inertSelector = "[" + createAttribute('inert') + "]";
1967
- const markers = floatingUi_react_utils.getDocument(elements.floating).querySelectorAll(inertSelector);
1968
- let targetRootAncestor = floatingUi_utils_dom$1.isElement(target) ? target : null;
1969
- while (targetRootAncestor && !floatingUi_utils_dom$1.isLastTraversableNode(targetRootAncestor)) {
1970
- const nextParent = floatingUi_utils_dom$1.getParentNode(targetRootAncestor);
1971
- if (floatingUi_utils_dom$1.isLastTraversableNode(nextParent) || !floatingUi_utils_dom$1.isElement(nextParent)) {
1972
- break;
1973
- }
1974
- targetRootAncestor = nextParent;
1975
- }
1976
-
1977
- // Check if the click occurred on a third-party element injected after the
1978
- // floating element rendered.
1979
- if (markers.length && floatingUi_utils_dom$1.isElement(target) && !floatingUi_react_utils.isRootElement(target) &&
1980
- // Clicked on a direct ancestor (e.g. FloatingOverlay).
1981
- !floatingUi_react_utils.contains(target, elements.floating) &&
1982
- // If the target root element contains none of the markers, then the
1983
- // element was injected after the floating element rendered.
1984
- Array.from(markers).every(marker => !floatingUi_react_utils.contains(targetRootAncestor, marker))) {
1985
- return;
1986
- }
1987
-
1988
- // Check if the click occurred on the scrollbar
1989
- if (floatingUi_utils_dom$1.isHTMLElement(target) && floating) {
1990
- // In Firefox, `target.scrollWidth > target.clientWidth` for inline
1991
- // elements.
1992
- const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
1993
- const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
1994
- let xCond = canScrollY && event.offsetX > target.clientWidth;
1995
-
1996
- // In some browsers it is possible to change the <body> (or window)
1997
- // scrollbar to the left side, but is very rare and is difficult to
1998
- // check for. Plus, for modal dialogs with backdrops, it is more
1999
- // important that the backdrop is checked but not so much the window.
2000
- if (canScrollY) {
2001
- const isRTL = floatingUi_utils_dom$1.getComputedStyle(target).direction === 'rtl';
2002
- if (isRTL) {
2003
- xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
2004
- }
2005
- }
2006
- if (xCond || canScrollX && event.offsetY > target.clientHeight) {
2007
- return;
2008
- }
2009
- }
2010
- const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
2011
- const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
2012
- var _node$context;
2013
- return floatingUi_react_utils.isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
2014
- });
2015
- if (floatingUi_react_utils.isEventTargetWithin(event, elements.floating) || floatingUi_react_utils.isEventTargetWithin(event, elements.domReference) || targetIsInsideChildren) {
2016
- return;
2017
- }
2018
- const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
2019
- if (children.length > 0) {
2020
- let shouldDismiss = true;
2021
- children.forEach(child => {
2022
- var _child$context2;
2023
- if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
2024
- shouldDismiss = false;
2025
- return;
2026
- }
2027
- });
2028
- if (!shouldDismiss) {
2029
- return;
2030
- }
2031
- }
2032
- onOpenChange(false, event, 'outside-press');
2033
- });
2034
- const closeOnPressOutsideCapture = useEffectEvent(event => {
2035
- var _getTarget4;
2036
- const callback = () => {
2037
- var _getTarget3;
2038
- closeOnPressOutside(event);
2039
- (_getTarget3 = floatingUi_react_utils.getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
2040
- };
2041
- (_getTarget4 = floatingUi_react_utils.getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
2042
- });
2043
- React__namespace.useEffect(() => {
2044
- if (!open || !enabled) {
2045
- return;
2046
- }
2047
- dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
2048
- dataRef.current.__outsidePressBubbles = outsidePressBubbles;
2049
- function onScroll(event) {
2050
- onOpenChange(false, event, 'ancestor-scroll');
2051
- }
2052
- const doc = floatingUi_react_utils.getDocument(elements.floating);
2053
- escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
2054
- outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
2055
- let ancestors = [];
2056
- if (ancestorScroll) {
2057
- if (floatingUi_utils_dom$1.isElement(elements.domReference)) {
2058
- ancestors = floatingUi_utils_dom.getOverflowAncestors(elements.domReference);
2059
- }
2060
- if (floatingUi_utils_dom$1.isElement(elements.floating)) {
2061
- ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(elements.floating));
2062
- }
2063
- if (!floatingUi_utils_dom$1.isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
2064
- ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(elements.reference.contextElement));
2065
- }
2066
- }
2067
-
2068
- // Ignore the visual viewport for scrolling dismissal (allow pinch-zoom)
2069
- ancestors = ancestors.filter(ancestor => {
2070
- var _doc$defaultView;
2071
- return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
2072
- });
2073
- ancestors.forEach(ancestor => {
2074
- ancestor.addEventListener('scroll', onScroll, {
2075
- passive: true
2076
- });
2077
- });
2078
- return () => {
2079
- escapeKey && doc.removeEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
2080
- outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
2081
- ancestors.forEach(ancestor => {
2082
- ancestor.removeEventListener('scroll', onScroll);
2083
- });
2084
- };
2085
- }, [dataRef, elements, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
2086
- React__namespace.useEffect(() => {
2087
- insideReactTreeRef.current = false;
2088
- }, [outsidePress, outsidePressEvent]);
2089
- const reference = React__namespace.useMemo(() => ({
2090
- onKeyDown: closeOnEscapeKeyDown,
2091
- [bubbleHandlerKeys[referencePressEvent]]: event => {
2092
- if (referencePress) {
2093
- onOpenChange(false, event.nativeEvent, 'reference-press');
2094
- }
2095
- }
2096
- }), [closeOnEscapeKeyDown, onOpenChange, referencePress, referencePressEvent]);
2097
- const floating = React__namespace.useMemo(() => ({
2098
- onKeyDown: closeOnEscapeKeyDown,
2099
- onMouseDown() {
2100
- endedOrStartedInsideRef.current = true;
2101
- },
2102
- onMouseUp() {
2103
- endedOrStartedInsideRef.current = true;
2104
- },
2105
- [captureHandlerKeys[outsidePressEvent]]: () => {
2106
- insideReactTreeRef.current = true;
2107
- }
2108
- }), [closeOnEscapeKeyDown, outsidePressEvent]);
2109
- return React__namespace.useMemo(() => enabled ? {
2110
- reference,
2111
- floating
2112
- } : {}, [enabled, reference, floating]);
2113
- }
2114
-
2115
- function useFloatingRootContext(options) {
2116
- const {
2117
- open = false,
2118
- onOpenChange: onOpenChangeProp,
2119
- elements: elementsProp
2120
- } = options;
2121
- const floatingId = useId();
2122
- const dataRef = React__namespace.useRef({});
2123
- const [events] = React__namespace.useState(() => createPubSub());
2124
- const nested = useFloatingParentNodeId() != null;
2125
- if (process.env.NODE_ENV !== "production") {
2126
- const optionDomReference = elementsProp.reference;
2127
- if (optionDomReference && !floatingUi_utils_dom$1.isElement(optionDomReference)) {
2128
- error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
2129
- }
2130
- }
2131
- const [positionReference, setPositionReference] = React__namespace.useState(elementsProp.reference);
2132
- const onOpenChange = useEffectEvent((open, event, reason) => {
2133
- dataRef.current.openEvent = open ? event : undefined;
2134
- events.emit('openchange', {
2135
- open,
2136
- event,
2137
- reason,
2138
- nested
2139
- });
2140
- onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
2141
- });
2142
- const refs = React__namespace.useMemo(() => ({
2143
- setPositionReference
2144
- }), []);
2145
- const elements = React__namespace.useMemo(() => ({
2146
- reference: positionReference || elementsProp.reference || null,
2147
- floating: elementsProp.floating || null,
2148
- domReference: elementsProp.reference
2149
- }), [positionReference, elementsProp.reference, elementsProp.floating]);
2150
- return React__namespace.useMemo(() => ({
2151
- dataRef,
2152
- open,
2153
- onOpenChange,
2154
- elements,
2155
- events,
2156
- floatingId,
2157
- refs
2158
- }), [open, onOpenChange, elements, events, floatingId, refs]);
2159
- }
2160
-
2161
- /**
2162
- * Provides data to position a floating element and context to add interactions.
2163
- * @see https://floating-ui.com/docs/useFloating
2164
- */
2165
- function useFloating(options) {
2166
- if (options === void 0) {
2167
- options = {};
2168
- }
2169
- const {
2170
- nodeId
2171
- } = options;
2172
- const internalRootContext = useFloatingRootContext({
2173
- ...options,
2174
- elements: {
2175
- reference: null,
2176
- floating: null,
2177
- ...options.elements
2178
- }
2179
- });
2180
- const rootContext = options.rootContext || internalRootContext;
2181
- const computedElements = rootContext.elements;
2182
- const [_domReference, setDomReference] = React__namespace.useState(null);
2183
- const [positionReference, _setPositionReference] = React__namespace.useState(null);
2184
- const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
2185
- const domReference = optionDomReference || _domReference;
2186
- const domReferenceRef = React__namespace.useRef(null);
2187
- const tree = useFloatingTree();
2188
- index(() => {
2189
- if (domReference) {
2190
- domReferenceRef.current = domReference;
2191
- }
2192
- }, [domReference]);
2193
- const position = floatingUi_reactDom.useFloating({
2194
- ...options,
2195
- elements: {
2196
- ...computedElements,
2197
- ...(positionReference && {
2198
- reference: positionReference
2199
- })
2200
- }
2201
- });
2202
- const setPositionReference = React__namespace.useCallback(node => {
2203
- const computedPositionReference = floatingUi_utils_dom$1.isElement(node) ? {
2204
- getBoundingClientRect: () => node.getBoundingClientRect(),
2205
- contextElement: node
2206
- } : node;
2207
- // Store the positionReference in state if the DOM reference is specified externally via the
2208
- // `elements.reference` option. This ensures that it won't be overridden on future renders.
2209
- _setPositionReference(computedPositionReference);
2210
- position.refs.setReference(computedPositionReference);
2211
- }, [position.refs]);
2212
- const setReference = React__namespace.useCallback(node => {
2213
- if (floatingUi_utils_dom$1.isElement(node) || node === null) {
2214
- domReferenceRef.current = node;
2215
- setDomReference(node);
2216
- }
2217
-
2218
- // Backwards-compatibility for passing a virtual element to `reference`
2219
- // after it has set the DOM reference.
2220
- if (floatingUi_utils_dom$1.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
2221
- // Don't allow setting virtual elements using the old technique back to
2222
- // `null` to support `positionReference` + an unstable `reference`
2223
- // callback ref.
2224
- node !== null && !floatingUi_utils_dom$1.isElement(node)) {
2225
- position.refs.setReference(node);
2226
- }
2227
- }, [position.refs]);
2228
- const refs = React__namespace.useMemo(() => ({
2229
- ...position.refs,
2230
- setReference,
2231
- setPositionReference,
2232
- domReference: domReferenceRef
2233
- }), [position.refs, setReference, setPositionReference]);
2234
- const elements = React__namespace.useMemo(() => ({
2235
- ...position.elements,
2236
- domReference: domReference
2237
- }), [position.elements, domReference]);
2238
- const context = React__namespace.useMemo(() => ({
2239
- ...position,
2240
- ...rootContext,
2241
- refs,
2242
- elements,
2243
- nodeId
2244
- }), [position, refs, elements, nodeId, rootContext]);
2245
- index(() => {
2246
- rootContext.dataRef.current.floatingContext = context;
2247
- const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
2248
- if (node) {
2249
- node.context = context;
2250
- }
2251
- });
2252
- return React__namespace.useMemo(() => ({
2253
- ...position,
2254
- context,
2255
- refs,
2256
- elements
2257
- }), [position, refs, elements, context]);
2258
- }
2259
-
2260
- /**
2261
- * Opens the floating element while the reference element has focus, like CSS
2262
- * `:focus`.
2263
- * @see https://floating-ui.com/docs/useFocus
2264
- */
2265
- function useFocus(context, props) {
2266
- if (props === void 0) {
2267
- props = {};
2268
- }
2269
- const {
2270
- open,
2271
- onOpenChange,
2272
- events,
2273
- dataRef,
2274
- elements
2275
- } = context;
2276
- const {
2277
- enabled = true,
2278
- visibleOnly = true
2279
- } = props;
2280
- const blockFocusRef = React__namespace.useRef(false);
2281
- const timeoutRef = React__namespace.useRef();
2282
- const keyboardModalityRef = React__namespace.useRef(true);
2283
- React__namespace.useEffect(() => {
2284
- if (!enabled) return;
2285
- const win = floatingUi_utils_dom$1.getWindow(elements.domReference);
2286
-
2287
- // If the reference was focused and the user left the tab/window, and the
2288
- // floating element was not open, the focus should be blocked when they
2289
- // return to the tab/window.
2290
- function onBlur() {
2291
- if (!open && floatingUi_utils_dom$1.isHTMLElement(elements.domReference) && elements.domReference === floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(elements.domReference))) {
2292
- blockFocusRef.current = true;
2293
- }
2294
- }
2295
- function onKeyDown() {
2296
- keyboardModalityRef.current = true;
2297
- }
2298
- win.addEventListener('blur', onBlur);
2299
- win.addEventListener('keydown', onKeyDown, true);
2300
- return () => {
2301
- win.removeEventListener('blur', onBlur);
2302
- win.removeEventListener('keydown', onKeyDown, true);
2303
- };
2304
- }, [elements.domReference, open, enabled]);
2305
- React__namespace.useEffect(() => {
2306
- if (!enabled) return;
2307
- function onOpenChange(_ref) {
2308
- let {
2309
- reason
2310
- } = _ref;
2311
- if (reason === 'reference-press' || reason === 'escape-key') {
2312
- blockFocusRef.current = true;
2313
- }
2314
- }
2315
- events.on('openchange', onOpenChange);
2316
- return () => {
2317
- events.off('openchange', onOpenChange);
2318
- };
2319
- }, [events, enabled]);
2320
- React__namespace.useEffect(() => {
2321
- return () => {
2322
- clearTimeout(timeoutRef.current);
2323
- };
2324
- }, []);
2325
- const reference = React__namespace.useMemo(() => ({
2326
- onPointerDown(event) {
2327
- if (floatingUi_react_utils.isVirtualPointerEvent(event.nativeEvent)) return;
2328
- keyboardModalityRef.current = false;
2329
- },
2330
- onMouseLeave() {
2331
- blockFocusRef.current = false;
2332
- },
2333
- onFocus(event) {
2334
- if (blockFocusRef.current) return;
2335
- const target = floatingUi_react_utils.getTarget(event.nativeEvent);
2336
- if (visibleOnly && floatingUi_utils_dom$1.isElement(target)) {
2337
- try {
2338
- // Mac Safari unreliably matches `:focus-visible` on the reference
2339
- // if focus was outside the page initially - use the fallback
2340
- // instead.
2341
- if (floatingUi_react_utils.isSafari() && floatingUi_react_utils.isMac()) throw Error();
2342
- if (!target.matches(':focus-visible')) return;
2343
- } catch (e) {
2344
- // Old browsers will throw an error when using `:focus-visible`.
2345
- if (!keyboardModalityRef.current && !floatingUi_react_utils.isTypeableElement(target)) {
2346
- return;
2347
- }
2348
- }
2349
- }
2350
- onOpenChange(true, event.nativeEvent, 'focus');
2351
- },
2352
- onBlur(event) {
2353
- blockFocusRef.current = false;
2354
- const relatedTarget = event.relatedTarget;
2355
- const nativeEvent = event.nativeEvent;
2356
-
2357
- // Hit the non-modal focus management portal guard. Focus will be
2358
- // moved into the floating element immediately after.
2359
- const movedToFocusGuard = floatingUi_utils_dom$1.isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
2360
-
2361
- // Wait for the window blur listener to fire.
2362
- timeoutRef.current = window.setTimeout(() => {
2363
- var _dataRef$current$floa;
2364
- const activeEl = floatingUi_react_utils.activeElement(elements.domReference ? elements.domReference.ownerDocument : document);
2365
-
2366
- // Focus left the page, keep it open.
2367
- if (!relatedTarget && activeEl === elements.domReference) return;
2368
-
2369
- // When focusing the reference element (e.g. regular click), then
2370
- // clicking into the floating element, prevent it from hiding.
2371
- // Note: it must be focusable, e.g. `tabindex="-1"`.
2372
- // We can not rely on relatedTarget to point to the correct element
2373
- // as it will only point to the shadow host of the newly focused element
2374
- // and not the element that actually has received focus if it is located
2375
- // inside a shadow root.
2376
- if (floatingUi_react_utils.contains((_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.refs.floating.current, activeEl) || floatingUi_react_utils.contains(elements.domReference, activeEl) || movedToFocusGuard) {
2377
- return;
2378
- }
2379
- onOpenChange(false, nativeEvent, 'focus');
2380
- });
2381
- }
2382
- }), [dataRef, elements.domReference, onOpenChange, visibleOnly]);
2383
- return React__namespace.useMemo(() => enabled ? {
2384
- reference
2385
- } : {}, [enabled, reference]);
2386
- }
2387
-
2388
- const ACTIVE_KEY = 'active';
2389
- const SELECTED_KEY = 'selected';
2390
- function mergeProps(userProps, propsList, elementKey) {
2391
- const map = new Map();
2392
- const isItem = elementKey === 'item';
2393
- let domUserProps = userProps;
2394
- if (isItem && userProps) {
2395
- const {
2396
- [ACTIVE_KEY]: _,
2397
- [SELECTED_KEY]: __,
2398
- ...validProps
2399
- } = userProps;
2400
- domUserProps = validProps;
2401
- }
2402
- return {
2403
- ...(elementKey === 'floating' && {
2404
- tabIndex: -1,
2405
- [FOCUSABLE_ATTRIBUTE]: ''
2406
- }),
2407
- ...domUserProps,
2408
- ...propsList.map(value => {
2409
- const propsOrGetProps = value ? value[elementKey] : null;
2410
- if (typeof propsOrGetProps === 'function') {
2411
- return userProps ? propsOrGetProps(userProps) : null;
2412
- }
2413
- return propsOrGetProps;
2414
- }).concat(userProps).reduce((acc, props) => {
2415
- if (!props) {
2416
- return acc;
2417
- }
2418
- Object.entries(props).forEach(_ref => {
2419
- let [key, value] = _ref;
2420
- if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
2421
- return;
2422
- }
2423
- if (key.indexOf('on') === 0) {
2424
- if (!map.has(key)) {
2425
- map.set(key, []);
2426
- }
2427
- if (typeof value === 'function') {
2428
- var _map$get;
2429
- (_map$get = map.get(key)) == null || _map$get.push(value);
2430
- acc[key] = function () {
2431
- var _map$get2;
2432
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
2433
- args[_key] = arguments[_key];
2434
- }
2435
- return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);
2436
- };
2437
- }
2438
- } else {
2439
- acc[key] = value;
2440
- }
2441
- });
2442
- return acc;
2443
- }, {})
2444
- };
2445
- }
2446
- /**
2447
- * Merges an array of interaction hooks' props into prop getters, allowing
2448
- * event handler functions to be composed together without overwriting one
2449
- * another.
2450
- * @see https://floating-ui.com/docs/useInteractions
2451
- */
2452
- function useInteractions(propsList) {
2453
- if (propsList === void 0) {
2454
- propsList = [];
2455
- }
2456
- const referenceDeps = propsList.map(key => key == null ? void 0 : key.reference);
2457
- const floatingDeps = propsList.map(key => key == null ? void 0 : key.floating);
2458
- const itemDeps = propsList.map(key => key == null ? void 0 : key.item);
2459
- const getReferenceProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
2460
- // eslint-disable-next-line react-hooks/exhaustive-deps
2461
- referenceDeps);
2462
- const getFloatingProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
2463
- // eslint-disable-next-line react-hooks/exhaustive-deps
2464
- floatingDeps);
2465
- const getItemProps = React__namespace.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
2466
- // eslint-disable-next-line react-hooks/exhaustive-deps
2467
- itemDeps);
2468
- return React__namespace.useMemo(() => ({
2469
- getReferenceProps,
2470
- getFloatingProps,
2471
- getItemProps
2472
- }), [getReferenceProps, getFloatingProps, getItemProps]);
2473
- }
2474
-
2475
- let isPreventScrollSupported = false;
2476
- function doSwitch(orientation, vertical, horizontal) {
2477
- switch (orientation) {
2478
- case 'vertical':
2479
- return vertical;
2480
- case 'horizontal':
2481
- return horizontal;
2482
- default:
2483
- return vertical || horizontal;
2484
- }
2485
- }
2486
- function isMainOrientationKey(key, orientation) {
2487
- const vertical = key === ARROW_UP || key === ARROW_DOWN;
2488
- const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
2489
- return doSwitch(orientation, vertical, horizontal);
2490
- }
2491
- function isMainOrientationToEndKey(key, orientation, rtl) {
2492
- const vertical = key === ARROW_DOWN;
2493
- const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
2494
- return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
2495
- }
2496
- function isCrossOrientationOpenKey(key, orientation, rtl) {
2497
- const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
2498
- const horizontal = key === ARROW_DOWN;
2499
- return doSwitch(orientation, vertical, horizontal);
2500
- }
2501
- function isCrossOrientationCloseKey(key, orientation, rtl) {
2502
- const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
2503
- const horizontal = key === ARROW_UP;
2504
- return doSwitch(orientation, vertical, horizontal);
2505
- }
2506
- /**
2507
- * Adds arrow key-based navigation of a list of items, either using real DOM
2508
- * focus or virtual focus.
2509
- * @see https://floating-ui.com/docs/useListNavigation
2510
- */
2511
- function useListNavigation(context, props) {
2512
- const {
2513
- open,
2514
- onOpenChange,
2515
- elements
2516
- } = context;
2517
- const {
2518
- listRef,
2519
- activeIndex,
2520
- onNavigate: unstable_onNavigate = () => {},
2521
- enabled = true,
2522
- selectedIndex = null,
2523
- allowEscape = false,
2524
- loop = false,
2525
- nested = false,
2526
- rtl = false,
2527
- virtual = false,
2528
- focusItemOnOpen = 'auto',
2529
- focusItemOnHover = true,
2530
- openOnArrowKeyDown = true,
2531
- disabledIndices = undefined,
2532
- orientation = 'vertical',
2533
- cols = 1,
2534
- scrollItemIntoView = true,
2535
- virtualItemRef,
2536
- itemSizes,
2537
- dense = false
2538
- } = props;
2539
- if (process.env.NODE_ENV !== "production") {
2540
- if (allowEscape) {
2541
- if (!loop) {
2542
- warn('`useListNavigation` looping must be enabled to allow escaping.');
2543
- }
2544
- if (!virtual) {
2545
- warn('`useListNavigation` must be virtual to allow escaping.');
2546
- }
2547
- }
2548
- if (orientation === 'vertical' && cols > 1) {
2549
- warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
2550
- }
2551
- }
2552
- const floatingFocusElement = getFloatingFocusElement(elements.floating);
2553
- const floatingFocusElementRef = useLatestRef(floatingFocusElement);
2554
- const parentId = useFloatingParentNodeId();
2555
- const tree = useFloatingTree();
2556
- const onNavigate = useEffectEvent(unstable_onNavigate);
2557
- const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
2558
- const indexRef = React__namespace.useRef(selectedIndex != null ? selectedIndex : -1);
2559
- const keyRef = React__namespace.useRef(null);
2560
- const isPointerModalityRef = React__namespace.useRef(true);
2561
- const previousOnNavigateRef = React__namespace.useRef(onNavigate);
2562
- const previousMountedRef = React__namespace.useRef(!!elements.floating);
2563
- const previousOpenRef = React__namespace.useRef(open);
2564
- const forceSyncFocus = React__namespace.useRef(false);
2565
- const forceScrollIntoViewRef = React__namespace.useRef(false);
2566
- const disabledIndicesRef = useLatestRef(disabledIndices);
2567
- const latestOpenRef = useLatestRef(open);
2568
- const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
2569
- const selectedIndexRef = useLatestRef(selectedIndex);
2570
- const [activeId, setActiveId] = React__namespace.useState();
2571
- const [virtualId, setVirtualId] = React__namespace.useState();
2572
- const focusItem = useEffectEvent(function (listRef, indexRef, forceScrollIntoView) {
2573
- if (forceScrollIntoView === void 0) {
2574
- forceScrollIntoView = false;
2575
- }
2576
- function runFocus(item) {
2577
- if (virtual) {
2578
- setActiveId(item.id);
2579
- tree == null || tree.events.emit('virtualfocus', item);
2580
- if (virtualItemRef) {
2581
- virtualItemRef.current = item;
2582
- }
2583
- } else {
2584
- enqueueFocus(item, {
2585
- preventScroll: true,
2586
- // Mac Safari does not move the virtual cursor unless the focus call
2587
- // is sync. However, for the very first focus call, we need to wait
2588
- // for the position to be ready in order to prevent unwanted
2589
- // scrolling. This means the virtual cursor will not move to the first
2590
- // item when first opening the floating element, but will on
2591
- // subsequent calls. `preventScroll` is supported in modern Safari,
2592
- // so we can use that instead.
2593
- // iOS Safari must be async or the first item will not be focused.
2594
- sync: floatingUi_react_utils.isMac() && floatingUi_react_utils.isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false
2595
- });
2596
- }
2597
- }
2598
- const initialItem = listRef.current[indexRef.current];
2599
- if (initialItem) {
2600
- runFocus(initialItem);
2601
- }
2602
- requestAnimationFrame(() => {
2603
- const waitedItem = listRef.current[indexRef.current] || initialItem;
2604
- if (!waitedItem) return;
2605
- if (!initialItem) {
2606
- runFocus(waitedItem);
2607
- }
2608
- const scrollIntoViewOptions = scrollItemIntoViewRef.current;
2609
- const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current);
2610
- if (shouldScrollIntoView) {
2611
- // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
2612
- // by all browsers.
2613
- waitedItem.scrollIntoView == null || waitedItem.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {
2614
- block: 'nearest',
2615
- inline: 'nearest'
2616
- } : scrollIntoViewOptions);
2617
- }
2618
- });
2619
- });
2620
- index(() => {
2621
- document.createElement('div').focus({
2622
- get preventScroll() {
2623
- isPreventScrollSupported = true;
2624
- return false;
2625
- }
2626
- });
2627
- }, []);
2628
-
2629
- // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
2630
- // element. Also, reset `activeIndex` upon closing the floating element.
2631
- index(() => {
2632
- if (!enabled) return;
2633
- if (open && elements.floating) {
2634
- if (focusItemOnOpenRef.current && selectedIndex != null) {
2635
- // Regardless of the pointer modality, we want to ensure the selected
2636
- // item comes into view when the floating element is opened.
2637
- forceScrollIntoViewRef.current = true;
2638
- indexRef.current = selectedIndex;
2639
- onNavigate(selectedIndex);
2640
- }
2641
- } else if (previousMountedRef.current) {
2642
- // Since the user can specify `onNavigate` conditionally
2643
- // (onNavigate: open ? setActiveIndex : setSelectedIndex),
2644
- // we store and call the previous function.
2645
- indexRef.current = -1;
2646
- previousOnNavigateRef.current(null);
2647
- }
2648
- }, [enabled, open, elements.floating, selectedIndex, onNavigate]);
2649
-
2650
- // Sync `activeIndex` to be the focused item while the floating element is
2651
- // open.
2652
- index(() => {
2653
- if (!enabled) return;
2654
- if (open && elements.floating) {
2655
- if (activeIndex == null) {
2656
- forceSyncFocus.current = false;
2657
- if (selectedIndexRef.current != null) {
2658
- return;
2659
- }
2660
-
2661
- // Reset while the floating element was open (e.g. the list changed).
2662
- if (previousMountedRef.current) {
2663
- indexRef.current = -1;
2664
- focusItem(listRef, indexRef);
2665
- }
2666
-
2667
- // Initial sync.
2668
- if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
2669
- let runs = 0;
2670
- const waitForListPopulated = () => {
2671
- if (listRef.current[0] == null) {
2672
- // Avoid letting the browser paint if possible on the first try,
2673
- // otherwise use rAF. Don't try more than twice, since something
2674
- // is wrong otherwise.
2675
- if (runs < 2) {
2676
- const scheduler = runs ? requestAnimationFrame : queueMicrotask;
2677
- scheduler(waitForListPopulated);
2678
- }
2679
- runs++;
2680
- } else {
2681
- indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinIndex(listRef, disabledIndicesRef.current) : getMaxIndex(listRef, disabledIndicesRef.current);
2682
- keyRef.current = null;
2683
- onNavigate(indexRef.current);
2684
- }
2685
- };
2686
- waitForListPopulated();
2687
- }
2688
- } else if (!isIndexOutOfBounds(listRef, activeIndex)) {
2689
- indexRef.current = activeIndex;
2690
- focusItem(listRef, indexRef, forceScrollIntoViewRef.current);
2691
- forceScrollIntoViewRef.current = false;
2692
- }
2693
- }
2694
- }, [enabled, open, elements.floating, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
2695
-
2696
- // Ensure the parent floating element has focus when a nested child closes
2697
- // to allow arrow key navigation to work after the pointer leaves the child.
2698
- index(() => {
2699
- var _nodes$find;
2700
- if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) {
2701
- return;
2702
- }
2703
- const nodes = tree.nodesRef.current;
2704
- const parent = (_nodes$find = nodes.find(node => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;
2705
- const activeEl = floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(elements.floating));
2706
- const treeContainsActiveEl = nodes.some(node => node.context && floatingUi_react_utils.contains(node.context.elements.floating, activeEl));
2707
- if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
2708
- parent.focus({
2709
- preventScroll: true
2710
- });
2711
- }
2712
- }, [enabled, elements.floating, tree, parentId, virtual]);
2713
- index(() => {
2714
- if (!enabled) return;
2715
- if (!tree) return;
2716
- if (!virtual) return;
2717
- if (parentId) return;
2718
- function handleVirtualFocus(item) {
2719
- setVirtualId(item.id);
2720
- if (virtualItemRef) {
2721
- virtualItemRef.current = item;
2722
- }
2723
- }
2724
- tree.events.on('virtualfocus', handleVirtualFocus);
2725
- return () => {
2726
- tree.events.off('virtualfocus', handleVirtualFocus);
2727
- };
2728
- }, [enabled, tree, virtual, parentId, virtualItemRef]);
2729
- index(() => {
2730
- previousOnNavigateRef.current = onNavigate;
2731
- previousMountedRef.current = !!elements.floating;
2732
- });
2733
- index(() => {
2734
- if (!open) {
2735
- keyRef.current = null;
2736
- }
2737
- }, [open]);
2738
- index(() => {
2739
- previousOpenRef.current = open;
2740
- }, [open]);
2741
- const hasActiveIndex = activeIndex != null;
2742
- const item = React__namespace.useMemo(() => {
2743
- function syncCurrentTarget(currentTarget) {
2744
- if (!open) return;
2745
- const index = listRef.current.indexOf(currentTarget);
2746
- if (index !== -1) {
2747
- onNavigate(index);
2748
- }
2749
- }
2750
- const props = {
2751
- onFocus(_ref) {
2752
- let {
2753
- currentTarget
2754
- } = _ref;
2755
- syncCurrentTarget(currentTarget);
2756
- },
2757
- onClick: _ref2 => {
2758
- let {
2759
- currentTarget
2760
- } = _ref2;
2761
- return currentTarget.focus({
2762
- preventScroll: true
2763
- });
2764
- },
2765
- // Safari
2766
- ...(focusItemOnHover && {
2767
- onMouseMove(_ref3) {
2768
- let {
2769
- currentTarget
2770
- } = _ref3;
2771
- syncCurrentTarget(currentTarget);
2772
- },
2773
- onPointerLeave(_ref4) {
2774
- let {
2775
- pointerType
2776
- } = _ref4;
2777
- if (!isPointerModalityRef.current || pointerType === 'touch') {
2778
- return;
2779
- }
2780
- indexRef.current = -1;
2781
- focusItem(listRef, indexRef);
2782
- onNavigate(null);
2783
- if (!virtual) {
2784
- enqueueFocus(floatingFocusElementRef.current, {
2785
- preventScroll: true
2786
- });
2787
- }
2788
- }
2789
- })
2790
- };
2791
- return props;
2792
- }, [open, floatingFocusElementRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
2793
- const commonOnKeyDown = useEffectEvent(event => {
2794
- isPointerModalityRef.current = false;
2795
- forceSyncFocus.current = true;
2796
-
2797
- // If the floating element is animating out, ignore navigation. Otherwise,
2798
- // the `activeIndex` gets set to 0 despite not being open so the next time
2799
- // the user ArrowDowns, the first item won't be focused.
2800
- if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
2801
- return;
2802
- }
2803
- if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
2804
- floatingUi_react_utils.stopEvent(event);
2805
- onOpenChange(false, event.nativeEvent, 'list-navigation');
2806
- if (floatingUi_utils_dom$1.isHTMLElement(elements.domReference) && !virtual) {
2807
- elements.domReference.focus();
2808
- }
2809
- return;
2810
- }
2811
- const currentIndex = indexRef.current;
2812
- const minIndex = getMinIndex(listRef, disabledIndices);
2813
- const maxIndex = getMaxIndex(listRef, disabledIndices);
2814
- if (event.key === 'Home') {
2815
- floatingUi_react_utils.stopEvent(event);
2816
- indexRef.current = minIndex;
2817
- onNavigate(indexRef.current);
2818
- }
2819
- if (event.key === 'End') {
2820
- floatingUi_react_utils.stopEvent(event);
2821
- indexRef.current = maxIndex;
2822
- onNavigate(indexRef.current);
2823
- }
2824
-
2825
- // Grid navigation.
2826
- if (cols > 1) {
2827
- const sizes = itemSizes || Array.from({
2828
- length: listRef.current.length
2829
- }, () => ({
2830
- width: 1,
2831
- height: 1
2832
- }));
2833
- // To calculate movements on the grid, we use hypothetical cell indices
2834
- // as if every item was 1x1, then convert back to real indices.
2835
- const cellMap = buildCellMap(sizes, cols, dense);
2836
- const minGridIndex = cellMap.findIndex(index => index != null && !isDisabled(listRef.current, index, disabledIndices));
2837
- // last enabled index
2838
- const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
2839
- const index = cellMap[getGridNavigatedIndex({
2840
- current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
2841
- }, {
2842
- event,
2843
- orientation,
2844
- loop,
2845
- cols,
2846
- // treat undefined (empty grid spaces) as disabled indices so we
2847
- // don't end up in them
2848
- disabledIndices: getCellIndices([...(disabledIndices || listRef.current.map((_, index) => isDisabled(listRef.current, index) ? index : undefined)), undefined], cellMap),
2849
- minIndex: minGridIndex,
2850
- maxIndex: maxGridIndex,
2851
- prevIndex: getCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
2852
- // use a corner matching the edge closest to the direction
2853
- // we're moving in so we don't end up in the same item. Prefer
2854
- // top/left over bottom/right.
2855
- event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),
2856
- stopEvent: true
2857
- })];
2858
- if (index != null) {
2859
- indexRef.current = index;
2860
- onNavigate(indexRef.current);
2861
- }
2862
- if (orientation === 'both') {
2863
- return;
2864
- }
2865
- }
2866
- if (isMainOrientationKey(event.key, orientation)) {
2867
- floatingUi_react_utils.stopEvent(event);
2868
-
2869
- // Reset the index if no item is focused.
2870
- if (open && !virtual && floatingUi_react_utils.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
2871
- indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
2872
- onNavigate(indexRef.current);
2873
- return;
2874
- }
2875
- if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
2876
- if (loop) {
2877
- indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {
2878
- startingIndex: currentIndex,
2879
- disabledIndices
2880
- });
2881
- } else {
2882
- indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {
2883
- startingIndex: currentIndex,
2884
- disabledIndices
2885
- }));
2886
- }
2887
- } else {
2888
- if (loop) {
2889
- indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {
2890
- startingIndex: currentIndex,
2891
- decrement: true,
2892
- disabledIndices
2893
- });
2894
- } else {
2895
- indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {
2896
- startingIndex: currentIndex,
2897
- decrement: true,
2898
- disabledIndices
2899
- }));
2900
- }
2901
- }
2902
- if (isIndexOutOfBounds(listRef, indexRef.current)) {
2903
- onNavigate(null);
2904
- } else {
2905
- onNavigate(indexRef.current);
2906
- }
2907
- }
2908
- });
2909
- const ariaActiveDescendantProp = React__namespace.useMemo(() => {
2910
- return virtual && open && hasActiveIndex && {
2911
- 'aria-activedescendant': virtualId || activeId
2912
- };
2913
- }, [virtual, open, hasActiveIndex, virtualId, activeId]);
2914
- const floating = React__namespace.useMemo(() => {
2915
- return {
2916
- 'aria-orientation': orientation === 'both' ? undefined : orientation,
2917
- ...(!floatingUi_react_utils.isTypeableCombobox(elements.domReference) && ariaActiveDescendantProp),
2918
- onKeyDown: commonOnKeyDown,
2919
- onPointerMove() {
2920
- isPointerModalityRef.current = true;
2921
- }
2922
- };
2923
- }, [ariaActiveDescendantProp, commonOnKeyDown, elements.domReference, orientation]);
2924
- const reference = React__namespace.useMemo(() => {
2925
- function checkVirtualMouse(event) {
2926
- if (focusItemOnOpen === 'auto' && floatingUi_react_utils.isVirtualClick(event.nativeEvent)) {
2927
- focusItemOnOpenRef.current = true;
2928
- }
2929
- }
2930
- function checkVirtualPointer(event) {
2931
- // `pointerdown` fires first, reset the state then perform the checks.
2932
- focusItemOnOpenRef.current = focusItemOnOpen;
2933
- if (focusItemOnOpen === 'auto' && floatingUi_react_utils.isVirtualPointerEvent(event.nativeEvent)) {
2934
- focusItemOnOpenRef.current = true;
2935
- }
2936
- }
2937
- return {
2938
- ...ariaActiveDescendantProp,
2939
- onKeyDown(event) {
2940
- isPointerModalityRef.current = false;
2941
- const isArrowKey = event.key.indexOf('Arrow') === 0;
2942
- const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
2943
- const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);
2944
- const isMainKey = isMainOrientationKey(event.key, orientation);
2945
- const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
2946
- if (virtual && open) {
2947
- const rootNode = tree == null ? void 0 : tree.nodesRef.current.find(node => node.parentId == null);
2948
- const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
2949
- if (isArrowKey && deepestNode && virtualItemRef) {
2950
- const eventObject = new KeyboardEvent('keydown', {
2951
- key: event.key,
2952
- bubbles: true
2953
- });
2954
- if (isCrossOpenKey || isCrossCloseKey) {
2955
- var _deepestNode$context, _deepestNode$context2;
2956
- const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
2957
- const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? listRef.current.find(item => (item == null ? void 0 : item.id) === activeId) : null;
2958
- if (dispatchItem) {
2959
- floatingUi_react_utils.stopEvent(event);
2960
- dispatchItem.dispatchEvent(eventObject);
2961
- setVirtualId(undefined);
2962
- }
2963
- }
2964
- if (isMainKey && deepestNode.context) {
2965
- if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {
2966
- var _deepestNode$context$;
2967
- floatingUi_react_utils.stopEvent(event);
2968
- (_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);
2969
- return;
2970
- }
2971
- }
2972
- }
2973
- return commonOnKeyDown(event);
2974
- }
2975
-
2976
- // If a floating element should not open on arrow key down, avoid
2977
- // setting `activeIndex` while it's closed.
2978
- if (!open && !openOnArrowKeyDown && isArrowKey) {
2979
- return;
2980
- }
2981
- if (isNavigationKey) {
2982
- keyRef.current = nested && isMainKey ? null : event.key;
2983
- }
2984
- if (nested) {
2985
- if (isCrossOpenKey) {
2986
- floatingUi_react_utils.stopEvent(event);
2987
- if (open) {
2988
- indexRef.current = getMinIndex(listRef, disabledIndicesRef.current);
2989
- onNavigate(indexRef.current);
2990
- } else {
2991
- onOpenChange(true, event.nativeEvent, 'list-navigation');
2992
- }
2993
- }
2994
- return;
2995
- }
2996
- if (isMainKey) {
2997
- if (selectedIndex != null) {
2998
- indexRef.current = selectedIndex;
2999
- }
3000
- floatingUi_react_utils.stopEvent(event);
3001
- if (!open && openOnArrowKeyDown) {
3002
- onOpenChange(true, event.nativeEvent, 'list-navigation');
3003
- } else {
3004
- commonOnKeyDown(event);
3005
- }
3006
- if (open) {
3007
- onNavigate(indexRef.current);
3008
- }
3009
- }
3010
- },
3011
- onFocus() {
3012
- if (open && !virtual) {
3013
- onNavigate(null);
3014
- }
3015
- },
3016
- onPointerDown: checkVirtualPointer,
3017
- onMouseDown: checkVirtualMouse,
3018
- onClick: checkVirtualMouse
3019
- };
3020
- }, [activeId, ariaActiveDescendantProp, commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, onOpenChange, open, openOnArrowKeyDown, orientation, rtl, selectedIndex, tree, virtual, virtualItemRef]);
3021
- return React__namespace.useMemo(() => enabled ? {
3022
- reference,
3023
- floating,
3024
- item
3025
- } : {}, [enabled, reference, floating, item]);
3026
- }
3027
-
3028
- const componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
3029
-
3030
- /**
3031
- * Adds base screen reader props to the reference and floating elements for a
3032
- * given floating element `role`.
3033
- * @see https://floating-ui.com/docs/useRole
3034
- */
3035
- function useRole(context, props) {
3036
- var _componentRoleToAriaR;
3037
- if (props === void 0) {
3038
- props = {};
3039
- }
3040
- const {
3041
- open,
3042
- floatingId
3043
- } = context;
3044
- const {
3045
- enabled = true,
3046
- role = 'dialog'
3047
- } = props;
3048
- const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
3049
- const referenceId = useId();
3050
- const parentId = useFloatingParentNodeId();
3051
- const isNested = parentId != null;
3052
- const reference = React__namespace.useMemo(() => {
3053
- if (ariaRole === 'tooltip' || role === 'label') {
3054
- return {
3055
- ["aria-" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined
3056
- };
3057
- }
3058
- return {
3059
- 'aria-expanded': open ? 'true' : 'false',
3060
- 'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
3061
- 'aria-controls': open ? floatingId : undefined,
3062
- ...(ariaRole === 'listbox' && {
3063
- role: 'combobox'
3064
- }),
3065
- ...(ariaRole === 'menu' && {
3066
- id: referenceId
3067
- }),
3068
- ...(ariaRole === 'menu' && isNested && {
3069
- role: 'menuitem'
3070
- }),
3071
- ...(role === 'select' && {
3072
- 'aria-autocomplete': 'none'
3073
- }),
3074
- ...(role === 'combobox' && {
3075
- 'aria-autocomplete': 'list'
3076
- })
3077
- };
3078
- }, [ariaRole, floatingId, isNested, open, referenceId, role]);
3079
- const floating = React__namespace.useMemo(() => {
3080
- const floatingProps = {
3081
- id: floatingId,
3082
- ...(ariaRole && {
3083
- role: ariaRole
3084
- })
3085
- };
3086
- if (ariaRole === 'tooltip' || role === 'label') {
3087
- return floatingProps;
3088
- }
3089
- return {
3090
- ...floatingProps,
3091
- ...(ariaRole === 'menu' && {
3092
- 'aria-labelledby': referenceId
3093
- })
3094
- };
3095
- }, [ariaRole, floatingId, referenceId, role]);
3096
- const item = React__namespace.useCallback(_ref => {
3097
- let {
3098
- active,
3099
- selected
3100
- } = _ref;
3101
- const commonProps = {
3102
- role: 'option',
3103
- ...(active && {
3104
- id: floatingId + "-option"
3105
- })
3106
- };
3107
-
3108
- // For `menu`, we are unable to tell if the item is a `menuitemradio`
3109
- // or `menuitemcheckbox`. For backwards-compatibility reasons, also
3110
- // avoid defaulting to `menuitem` as it may overwrite custom role props.
3111
- switch (role) {
3112
- case 'select':
3113
- return {
3114
- ...commonProps,
3115
- 'aria-selected': active && selected
3116
- };
3117
- case 'combobox':
3118
- {
3119
- return {
3120
- ...commonProps,
3121
- ...(active && {
3122
- 'aria-selected': true
3123
- })
3124
- };
3125
- }
3126
- }
3127
- return {};
3128
- }, [floatingId, role]);
3129
- return React__namespace.useMemo(() => enabled ? {
3130
- reference,
3131
- floating,
3132
- item
3133
- } : {}, [enabled, reference, floating, item]);
3134
- }
3135
-
3136
- // Converts a JS style key like `backgroundColor` to a CSS transition-property
3137
- // like `background-color`.
3138
- const camelCaseToKebabCase = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
3139
- function execWithArgsOrReturn(valueOrFn, args) {
3140
- return typeof valueOrFn === 'function' ? valueOrFn(args) : valueOrFn;
3141
- }
3142
- function useDelayUnmount(open, durationMs) {
3143
- const [isMounted, setIsMounted] = React__namespace.useState(open);
3144
- if (open && !isMounted) {
3145
- setIsMounted(true);
3146
- }
3147
- React__namespace.useEffect(() => {
3148
- if (!open && isMounted) {
3149
- const timeout = setTimeout(() => setIsMounted(false), durationMs);
3150
- return () => clearTimeout(timeout);
3151
- }
3152
- }, [open, isMounted, durationMs]);
3153
- return isMounted;
3154
- }
3155
- /**
3156
- * Provides a status string to apply CSS transitions to a floating element,
3157
- * correctly handling placement-aware transitions.
3158
- * @see https://floating-ui.com/docs/useTransition#usetransitionstatus
3159
- */
3160
- function useTransitionStatus(context, props) {
3161
- if (props === void 0) {
3162
- props = {};
3163
- }
3164
- const {
3165
- open,
3166
- elements: {
3167
- floating
3168
- }
3169
- } = context;
3170
- const {
3171
- duration = 250
3172
- } = props;
3173
- const isNumberDuration = typeof duration === 'number';
3174
- const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
3175
- const [status, setStatus] = React__namespace.useState('unmounted');
3176
- const isMounted = useDelayUnmount(open, closeDuration);
3177
- if (!isMounted && status === 'close') {
3178
- setStatus('unmounted');
3179
- }
3180
- index(() => {
3181
- if (!floating) return;
3182
- if (open) {
3183
- setStatus('initial');
3184
- const frame = requestAnimationFrame(() => {
3185
- setStatus('open');
3186
- });
3187
- return () => {
3188
- cancelAnimationFrame(frame);
3189
- };
3190
- }
3191
- setStatus('close');
3192
- }, [open, floating]);
3193
- return {
3194
- isMounted,
3195
- status
3196
- };
3197
- }
3198
- /**
3199
- * Provides styles to apply CSS transitions to a floating element, correctly
3200
- * handling placement-aware transitions. Wrapper around `useTransitionStatus`.
3201
- * @see https://floating-ui.com/docs/useTransition#usetransitionstyles
3202
- */
3203
- function useTransitionStyles(context, props) {
3204
- if (props === void 0) {
3205
- props = {};
3206
- }
3207
- const {
3208
- initial: unstable_initial = {
3209
- opacity: 0
3210
- },
3211
- open: unstable_open,
3212
- close: unstable_close,
3213
- common: unstable_common,
3214
- duration = 250
3215
- } = props;
3216
- const placement = context.placement;
3217
- const side = placement.split('-')[0];
3218
- const fnArgs = React__namespace.useMemo(() => ({
3219
- side,
3220
- placement
3221
- }), [side, placement]);
3222
- const isNumberDuration = typeof duration === 'number';
3223
- const openDuration = (isNumberDuration ? duration : duration.open) || 0;
3224
- const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
3225
- const [styles, setStyles] = React__namespace.useState(() => ({
3226
- ...execWithArgsOrReturn(unstable_common, fnArgs),
3227
- ...execWithArgsOrReturn(unstable_initial, fnArgs)
3228
- }));
3229
- const {
3230
- isMounted,
3231
- status
3232
- } = useTransitionStatus(context, {
3233
- duration
3234
- });
3235
- const initialRef = useLatestRef(unstable_initial);
3236
- const openRef = useLatestRef(unstable_open);
3237
- const closeRef = useLatestRef(unstable_close);
3238
- const commonRef = useLatestRef(unstable_common);
3239
- index(() => {
3240
- const initialStyles = execWithArgsOrReturn(initialRef.current, fnArgs);
3241
- const closeStyles = execWithArgsOrReturn(closeRef.current, fnArgs);
3242
- const commonStyles = execWithArgsOrReturn(commonRef.current, fnArgs);
3243
- const openStyles = execWithArgsOrReturn(openRef.current, fnArgs) || Object.keys(initialStyles).reduce((acc, key) => {
3244
- acc[key] = '';
3245
- return acc;
3246
- }, {});
3247
- if (status === 'initial') {
3248
- setStyles(styles => ({
3249
- transitionProperty: styles.transitionProperty,
3250
- ...commonStyles,
3251
- ...initialStyles
3252
- }));
3253
- }
3254
- if (status === 'open') {
3255
- setStyles({
3256
- transitionProperty: Object.keys(openStyles).map(camelCaseToKebabCase).join(','),
3257
- transitionDuration: openDuration + "ms",
3258
- ...commonStyles,
3259
- ...openStyles
3260
- });
3261
- }
3262
- if (status === 'close') {
3263
- const styles = closeStyles || initialStyles;
3264
- setStyles({
3265
- transitionProperty: Object.keys(styles).map(camelCaseToKebabCase).join(','),
3266
- transitionDuration: closeDuration + "ms",
3267
- ...commonStyles,
3268
- ...styles
3269
- });
3270
- }
3271
- }, [closeDuration, closeRef, initialRef, openRef, commonRef, openDuration, status, fnArgs]);
3272
- return {
3273
- isMounted,
3274
- styles
3275
- };
3276
- }
3277
-
3278
- exports.arrow = floatingUi_reactDom.arrow;
3279
- exports.flip = floatingUi_reactDom.flip;
3280
- exports.offset = floatingUi_reactDom.offset;
3281
- exports.shift = floatingUi_reactDom.shift;
3282
- exports.size = floatingUi_reactDom.size;
3283
- exports.getOverflowAncestors = floatingUi_utils_dom.getOverflowAncestors;
3284
- exports.FloatingArrow = FloatingArrow;
3285
- exports.FloatingFocusManager = FloatingFocusManager;
3286
- exports.FloatingPortal = FloatingPortal;
3287
- exports.useClick = useClick;
3288
- exports.useDismiss = useDismiss;
3289
- exports.useFloating = useFloating;
3290
- exports.useFloatingParentNodeId = useFloatingParentNodeId;
3291
- exports.useFloatingPortalNode = useFloatingPortalNode;
3292
- exports.useFloatingRootContext = useFloatingRootContext;
3293
- exports.useFloatingTree = useFloatingTree;
3294
- exports.useFocus = useFocus;
3295
- exports.useHover = useHover;
3296
- exports.useId = useId;
3297
- exports.useInteractions = useInteractions;
3298
- exports.useListNavigation = useListNavigation;
3299
- exports.useMergeRefs = useMergeRefs;
3300
- exports.useRole = useRole;
3301
- exports.useTransitionStatus = useTransitionStatus;
3302
- exports.useTransitionStyles = useTransitionStyles;