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