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