@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.41

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 (252) hide show
  1. package/dist/button/Button.svelte +15 -18
  2. package/dist/button/Button.svelte.d.ts +8 -36
  3. package/dist/button/index.d.ts +1 -1
  4. package/dist/button/index.js +1 -1
  5. package/dist/checkbox/Checkbox.svelte +30 -26
  6. package/dist/checkbox/Checkbox.svelte.d.ts +17 -38
  7. package/dist/checkbox/index.d.ts +1 -1
  8. package/dist/checkbox/index.js +1 -1
  9. package/dist/close-button/CloseButton.svelte +4 -7
  10. package/dist/close-button/CloseButton.svelte.d.ts +3 -46
  11. package/dist/close-button/index.d.ts +1 -0
  12. package/dist/close-button/index.js +1 -0
  13. package/dist/data-interactive/DataInteractive.svelte +6 -22
  14. package/dist/data-interactive/DataInteractive.svelte.d.ts +9 -34
  15. package/dist/data-interactive/index.d.ts +1 -1
  16. package/dist/data-interactive/index.js +1 -1
  17. package/dist/description/Description.svelte +28 -23
  18. package/dist/description/Description.svelte.d.ts +9 -30
  19. package/dist/description/context.svelte.js +14 -16
  20. package/dist/description/index.d.ts +1 -1
  21. package/dist/dialog/Dialog.svelte +315 -31
  22. package/dist/dialog/Dialog.svelte.d.ts +7 -45
  23. package/dist/dialog/DialogBackdrop.svelte +11 -14
  24. package/dist/dialog/DialogBackdrop.svelte.d.ts +8 -33
  25. package/dist/dialog/DialogPanel.svelte +23 -19
  26. package/dist/dialog/DialogPanel.svelte.d.ts +8 -34
  27. package/dist/dialog/DialogTitle.svelte +17 -8
  28. package/dist/dialog/DialogTitle.svelte.d.ts +9 -30
  29. package/dist/dialog/context.svelte.js +2 -2
  30. package/dist/dialog/index.d.ts +4 -4
  31. package/dist/dialog/index.js +4 -4
  32. package/dist/field/Field.svelte +27 -26
  33. package/dist/field/Field.svelte.d.ts +7 -34
  34. package/dist/field/index.d.ts +1 -1
  35. package/dist/fieldset/Fieldset.svelte +14 -20
  36. package/dist/fieldset/Fieldset.svelte.d.ts +8 -35
  37. package/dist/fieldset/index.d.ts +1 -1
  38. package/dist/focus-trap/FocusTrap.svelte +30 -54
  39. package/dist/focus-trap/FocusTrap.svelte.d.ts +10 -52
  40. package/dist/focus-trap/FocusTrapFeatures.d.ts +14 -0
  41. package/dist/focus-trap/FocusTrapFeatures.js +15 -0
  42. package/dist/hooks/use-controllable.svelte.js +2 -1
  43. package/dist/hooks/use-did-element-move.svelte.js +5 -10
  44. package/dist/hooks/use-disabled.d.ts +6 -1
  45. package/dist/hooks/use-disabled.js +10 -5
  46. package/dist/hooks/use-event-listener.svelte.d.ts +1 -1
  47. package/dist/hooks/use-event-listener.svelte.js +3 -1
  48. package/dist/hooks/use-inert-others.svelte.js +10 -10
  49. package/dist/hooks/use-resolve-button-type.svelte.js +0 -1
  50. package/dist/hooks/use-root-containers.svelte.d.ts +2 -2
  51. package/dist/hooks/use-root-containers.svelte.js +5 -5
  52. package/dist/hooks/use-tab-direction.svelte.js +1 -1
  53. package/dist/index.d.ts +5 -2
  54. package/dist/index.js +5 -2
  55. package/dist/input/Input.svelte +28 -21
  56. package/dist/input/Input.svelte.d.ts +16 -33
  57. package/dist/input/index.d.ts +1 -1
  58. package/dist/input/index.js +1 -1
  59. package/dist/internal/FloatingProvider.svelte +17 -0
  60. package/dist/internal/FloatingProvider.svelte.d.ts +8 -0
  61. package/dist/internal/FocusSentinel.svelte +33 -32
  62. package/dist/internal/FocusSentinel.svelte.d.ts +4 -18
  63. package/dist/internal/ForcePortalRoot.svelte.d.ts +4 -18
  64. package/dist/internal/FormFields.svelte +18 -13
  65. package/dist/internal/FormFields.svelte.d.ts +4 -18
  66. package/dist/internal/FormFieldsProvider.svelte +17 -0
  67. package/dist/internal/FormFieldsProvider.svelte.d.ts +7 -0
  68. package/dist/internal/FormResolver.svelte +6 -2
  69. package/dist/internal/FormResolver.svelte.d.ts +4 -18
  70. package/dist/internal/Hidden.svelte +10 -10
  71. package/dist/internal/Hidden.svelte.d.ts +6 -33
  72. package/dist/internal/MainTreeProvider.svelte +1 -1
  73. package/dist/internal/MainTreeProvider.svelte.d.ts +4 -18
  74. package/dist/internal/Portal.svelte.d.ts +4 -18
  75. package/dist/internal/floating-provider.svelte.d.ts +3 -0
  76. package/dist/internal/floating-provider.svelte.js +206 -0
  77. package/dist/internal/floating.svelte.d.ts +46 -22
  78. package/dist/internal/floating.svelte.js +90 -272
  79. package/dist/internal/form-fields.svelte.d.ts +10 -0
  80. package/dist/internal/form-fields.svelte.js +23 -0
  81. package/dist/label/Label.svelte +17 -13
  82. package/dist/label/Label.svelte.d.ts +8 -33
  83. package/dist/label/context.svelte.js +1 -1
  84. package/dist/label/index.d.ts +1 -1
  85. package/dist/legend/Legend.svelte +21 -15
  86. package/dist/legend/Legend.svelte.d.ts +9 -34
  87. package/dist/listbox/Listbox.svelte +79 -163
  88. package/dist/listbox/Listbox.svelte.d.ts +16 -101
  89. package/dist/listbox/ListboxButton.svelte +24 -29
  90. package/dist/listbox/ListboxButton.svelte.d.ts +8 -38
  91. package/dist/listbox/ListboxOption.svelte +33 -27
  92. package/dist/listbox/ListboxOption.svelte.d.ts +16 -32
  93. package/dist/listbox/ListboxOptions.svelte +126 -73
  94. package/dist/listbox/ListboxOptions.svelte.d.ts +8 -43
  95. package/dist/listbox/ListboxSelectedOption.svelte +24 -26
  96. package/dist/listbox/ListboxSelectedOption.svelte.d.ts +14 -39
  97. package/dist/listbox/context.svelte.d.ts +76 -0
  98. package/dist/listbox/context.svelte.js +36 -0
  99. package/dist/listbox/index.d.ts +5 -5
  100. package/dist/listbox/index.js +4 -4
  101. package/dist/menu/Menu.svelte +22 -266
  102. package/dist/menu/Menu.svelte.d.ts +7 -37
  103. package/dist/menu/MenuButton.svelte +22 -24
  104. package/dist/menu/MenuButton.svelte.d.ts +8 -39
  105. package/dist/menu/MenuHeading.svelte +12 -16
  106. package/dist/menu/MenuHeading.svelte.d.ts +7 -36
  107. package/dist/menu/MenuItem.svelte +18 -23
  108. package/dist/menu/MenuItem.svelte.d.ts +9 -39
  109. package/dist/menu/MenuItems.svelte +33 -34
  110. package/dist/menu/MenuItems.svelte.d.ts +8 -43
  111. package/dist/menu/MenuSection.svelte +9 -12
  112. package/dist/menu/MenuSection.svelte.d.ts +7 -33
  113. package/dist/menu/MenuSeparator.svelte +9 -12
  114. package/dist/menu/MenuSeparator.svelte.d.ts +7 -33
  115. package/dist/menu/context.svelte.d.ts +2 -1
  116. package/dist/menu/context.svelte.js +212 -2
  117. package/dist/menu/index.d.ts +7 -7
  118. package/dist/menu/index.js +3 -3
  119. package/dist/popover/Popover.svelte +225 -0
  120. package/dist/popover/Popover.svelte.d.ts +15 -0
  121. package/dist/popover/PopoverBackdrop.svelte +83 -0
  122. package/dist/popover/PopoverBackdrop.svelte.d.ts +17 -0
  123. package/dist/popover/PopoverButton.svelte +324 -0
  124. package/dist/popover/PopoverButton.svelte.d.ts +21 -0
  125. package/dist/popover/PopoverGroup.svelte +66 -0
  126. package/dist/popover/PopoverGroup.svelte.d.ts +9 -0
  127. package/dist/popover/PopoverPanel.svelte +359 -0
  128. package/dist/popover/PopoverPanel.svelte.d.ts +22 -0
  129. package/dist/popover/context.svelte.d.ts +51 -0
  130. package/dist/popover/context.svelte.js +108 -0
  131. package/dist/popover/index.d.ts +5 -0
  132. package/dist/popover/index.js +5 -0
  133. package/dist/portal/InternalPortal.svelte +17 -17
  134. package/dist/portal/InternalPortal.svelte.d.ts +6 -33
  135. package/dist/portal/Portal.svelte +7 -6
  136. package/dist/portal/Portal.svelte.d.ts +3 -22
  137. package/dist/portal/PortalGroup.svelte +6 -14
  138. package/dist/portal/PortalGroup.svelte.d.ts +5 -34
  139. package/dist/radio-group/Radio.svelte +135 -0
  140. package/dist/radio-group/Radio.svelte.d.ts +35 -0
  141. package/dist/radio-group/RadioGroup.svelte +223 -0
  142. package/dist/radio-group/RadioGroup.svelte.d.ts +34 -0
  143. package/dist/radio-group/RadioOption.svelte +138 -0
  144. package/dist/radio-group/RadioOption.svelte.d.ts +37 -0
  145. package/dist/radio-group/contest.svelte.d.ts +30 -0
  146. package/dist/radio-group/contest.svelte.js +40 -0
  147. package/dist/radio-group/index.d.ts +3 -0
  148. package/dist/radio-group/index.js +3 -0
  149. package/dist/select/Select.svelte +112 -0
  150. package/dist/select/Select.svelte.d.ts +21 -0
  151. package/dist/select/index.d.ts +1 -0
  152. package/dist/select/index.js +1 -0
  153. package/dist/switch/Switch.svelte +27 -28
  154. package/dist/switch/Switch.svelte.d.ts +9 -42
  155. package/dist/switch/SwitchGroup.svelte +5 -5
  156. package/dist/switch/SwitchGroup.svelte.d.ts +8 -30
  157. package/dist/switch/index.d.ts +1 -1
  158. package/dist/switch/index.js +1 -1
  159. package/dist/tabs/Tab.svelte +26 -29
  160. package/dist/tabs/Tab.svelte.d.ts +8 -36
  161. package/dist/tabs/TabGroup.svelte +42 -264
  162. package/dist/tabs/TabGroup.svelte.d.ts +7 -57
  163. package/dist/tabs/TabList.svelte +13 -16
  164. package/dist/tabs/TabList.svelte.d.ts +8 -31
  165. package/dist/tabs/TabPanel.svelte +19 -19
  166. package/dist/tabs/TabPanel.svelte.d.ts +8 -38
  167. package/dist/tabs/TabPanels.svelte +11 -9
  168. package/dist/tabs/TabPanels.svelte.d.ts +8 -30
  169. package/dist/tabs/context.svelte.d.ts +31 -0
  170. package/dist/tabs/context.svelte.js +134 -0
  171. package/dist/tabs/index.d.ts +5 -5
  172. package/dist/tabs/index.js +4 -4
  173. package/dist/textarea/Textarea.svelte +23 -19
  174. package/dist/textarea/Textarea.svelte.d.ts +18 -30
  175. package/dist/textarea/index.d.ts +1 -1
  176. package/dist/textarea/index.js +1 -1
  177. package/dist/transition/InternalTransitionChild.svelte +19 -12
  178. package/dist/transition/InternalTransitionChild.svelte.d.ts +4 -35
  179. package/dist/transition/Transition.svelte +16 -17
  180. package/dist/transition/Transition.svelte.d.ts +8 -38
  181. package/dist/transition/TransitionChild.svelte +13 -12
  182. package/dist/transition/TransitionChild.svelte.d.ts +11 -38
  183. package/dist/transition/context.svelte.js +9 -9
  184. package/dist/transition/index.d.ts +2 -2
  185. package/dist/transition/index.js +2 -2
  186. package/dist/utils/DisabledProvider.svelte +10 -0
  187. package/dist/utils/DisabledProvider.svelte.d.ts +8 -0
  188. package/dist/utils/ElementOrComponent.svelte +57 -14
  189. package/dist/utils/ElementOrComponent.svelte.d.ts +19 -29
  190. package/dist/utils/StableCollection.svelte.d.ts +4 -18
  191. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +32 -0
  192. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts +8 -0
  193. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +94 -0
  194. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +26 -0
  195. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts +6 -0
  196. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +158 -0
  197. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.d.ts +11 -0
  198. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +53 -0
  199. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.d.ts +9 -0
  200. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.js +28 -0
  201. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts +23 -0
  202. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.js +72 -0
  203. package/dist/utils/floating-ui/svelte/index.d.ts +5 -0
  204. package/dist/utils/floating-ui/svelte/index.js +5 -0
  205. package/dist/utils/floating-ui/svelte/inner.svelte.d.ts +83 -0
  206. package/dist/utils/floating-ui/svelte/inner.svelte.js +178 -0
  207. package/dist/utils/floating-ui/svelte/types.d.ts +114 -0
  208. package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts +5 -0
  209. package/dist/utils/floating-ui/svelte/utils/createPubSub.js +14 -0
  210. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts +2 -0
  211. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.js +13 -0
  212. package/dist/utils/floating-ui/svelte/utils/log.d.ts +2 -0
  213. package/dist/utils/floating-ui/svelte/utils/log.js +19 -0
  214. package/dist/utils/floating-ui/svelte/utils.d.ts +19 -0
  215. package/dist/utils/floating-ui/svelte/utils.js +136 -0
  216. package/dist/utils/floating-ui/svelte-dom/arrow.d.ts +22 -0
  217. package/dist/utils/floating-ui/svelte-dom/arrow.js +29 -0
  218. package/dist/utils/floating-ui/svelte-dom/index.d.ts +2 -0
  219. package/dist/utils/floating-ui/svelte-dom/index.js +2 -0
  220. package/dist/utils/floating-ui/svelte-dom/types.d.ts +80 -0
  221. package/dist/utils/floating-ui/svelte-dom/types.js +3 -0
  222. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts +6 -0
  223. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js +182 -0
  224. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts +1 -0
  225. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js +50 -0
  226. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts +1 -0
  227. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js +7 -0
  228. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts +1 -0
  229. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js +5 -0
  230. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts +4 -0
  231. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js +7 -0
  232. package/dist/utils/id.d.ts +1 -1
  233. package/dist/utils/id.js +1 -1
  234. package/dist/utils/index.d.ts +3 -0
  235. package/dist/utils/index.js +3 -0
  236. package/dist/utils/state.js +4 -4
  237. package/dist/utils/style.d.ts +2 -0
  238. package/dist/utils/style.js +6 -0
  239. package/dist/utils/types.d.ts +12 -18
  240. package/package.json +33 -32
  241. package/dist/combobox/Combobox.svelte +0 -53
  242. package/dist/combobox/Combobox.svelte.d.ts +0 -50
  243. package/dist/dialog/InternalDialog.svelte +0 -294
  244. package/dist/dialog/InternalDialog.svelte.d.ts +0 -42
  245. package/dist/internal/HoistFormFields.svelte +0 -14
  246. package/dist/internal/HoistFormFields.svelte.d.ts +0 -21
  247. package/dist/internal/id.d.ts +0 -8
  248. package/dist/internal/id.js +0 -11
  249. package/dist/utils/Generic.svelte +0 -56
  250. package/dist/utils/Generic.svelte.d.ts +0 -35
  251. package/dist/utils/alternative-types.d.ts +0 -21
  252. /package/dist/utils/{alternative-types.js → floating-ui/svelte/types.js} +0 -0
@@ -0,0 +1,178 @@
1
+ import { getUserAgent } from "./utils.js";
2
+ import { evaluate, max, min, round } from "@floating-ui/utils";
3
+ import { detectOverflow, offset } from "../svelte-dom/index.js";
4
+ import { warn } from "./utils/log.js";
5
+ import { DEV } from "esm-env";
6
+ import { tick, untrack } from "svelte";
7
+ function getArgsWithCustomFloatingHeight(state, height) {
8
+ return {
9
+ ...state,
10
+ rects: {
11
+ ...state.rects,
12
+ floating: {
13
+ ...state.rects.floating,
14
+ height,
15
+ },
16
+ },
17
+ };
18
+ }
19
+ /**
20
+ * Positions the floating element such that an inner element inside of it is
21
+ * anchored to the reference element.
22
+ * @see https://floating-ui.com/docs/inner
23
+ */
24
+ export const inner = (props) => ({
25
+ name: "inner",
26
+ options: props,
27
+ async fn(state) {
28
+ const { listRef, overflowRef, onFallbackChange, offset: innerOffset = 0, index = 0, minItemsVisible = 4, referenceOverflowThreshold = 0, scrollRef, ...detectOverflowOptions } = evaluate(props, state);
29
+ const { rects, elements: { floating }, } = state;
30
+ const item = listRef.current[index];
31
+ const scrollEl = scrollRef?.current || floating;
32
+ // Valid combinations:
33
+ // 1. Floating element is the scrollRef and has a border (default)
34
+ // 2. Floating element is not the scrollRef, floating element has a border
35
+ // 3. Floating element is not the scrollRef, scrollRef has a border
36
+ // Floating > {...getFloatingProps()} wrapper > scrollRef > items is not
37
+ // allowed as VoiceOver doesn't work.
38
+ const clientTop = floating.clientTop || scrollEl.clientTop;
39
+ const floatingIsBordered = floating.clientTop !== 0;
40
+ const scrollElIsBordered = scrollEl.clientTop !== 0;
41
+ const floatingIsScrollEl = floating === scrollEl;
42
+ if (DEV) {
43
+ if (!state.placement.startsWith("bottom")) {
44
+ warn('`placement` side must be "bottom" when using the `inner`', "middleware.");
45
+ }
46
+ }
47
+ if (!item) {
48
+ return {};
49
+ }
50
+ const nextArgs = {
51
+ ...state,
52
+ ...(await offset(-item.offsetTop - floating.clientTop - rects.reference.height / 2 - item.offsetHeight / 2 - innerOffset).fn(state)),
53
+ };
54
+ const overflow = await detectOverflow(getArgsWithCustomFloatingHeight(nextArgs, scrollEl.scrollHeight + clientTop + floating.clientTop), detectOverflowOptions);
55
+ const refOverflow = await detectOverflow(nextArgs, {
56
+ ...detectOverflowOptions,
57
+ elementContext: "reference",
58
+ });
59
+ const diffY = max(0, overflow.top);
60
+ const nextY = nextArgs.y + diffY;
61
+ const maxHeight = round(max(0, scrollEl.scrollHeight +
62
+ ((floatingIsBordered && floatingIsScrollEl) || scrollElIsBordered ? clientTop * 2 : 0) -
63
+ diffY -
64
+ max(0, overflow.bottom)));
65
+ scrollEl.style.maxHeight = `${maxHeight}px`;
66
+ scrollEl.scrollTop = diffY;
67
+ // There is not enough space, fallback to standard anchored positioning
68
+ if (onFallbackChange) {
69
+ const shouldFallback = (scrollEl.scrollHeight > scrollEl.offsetHeight &&
70
+ scrollEl.offsetHeight < item.offsetHeight * minItemsVisible - 1) ||
71
+ refOverflow.top >= -referenceOverflowThreshold ||
72
+ refOverflow.bottom >= -referenceOverflowThreshold;
73
+ onFallbackChange(shouldFallback);
74
+ await tick();
75
+ }
76
+ if (overflowRef) {
77
+ overflowRef.current = await detectOverflow(getArgsWithCustomFloatingHeight({ ...nextArgs, y: nextY }, scrollEl.offsetHeight + clientTop + floating.clientTop), detectOverflowOptions);
78
+ }
79
+ return {
80
+ y: nextY,
81
+ };
82
+ },
83
+ });
84
+ /**
85
+ * Changes the `inner` middleware's `offset` upon a `wheel` event to
86
+ * expand the floating element's height, revealing more list items.
87
+ * @see https://floating-ui.com/docs/inner
88
+ */
89
+ export function useInnerOffset(options) {
90
+ const { context, props } = $derived(options);
91
+ const { open, elements } = $derived(context);
92
+ const { enabled = true, overflowRef, scrollRef, onChange: unstable_onChange } = $derived(props);
93
+ const onChange = unstable_onChange;
94
+ const controlledScrollingRef = $state({ current: false });
95
+ const prevScrollTopRef = $state({ current: null });
96
+ const initialOverflowRef = $state({ current: null });
97
+ $effect(() => {
98
+ if (!enabled)
99
+ return;
100
+ [enabled, open, elements.floating, overflowRef, scrollRef, onChange];
101
+ untrack(() => {
102
+ function onWheel(e) {
103
+ if (e.ctrlKey || !el || overflowRef.current == null) {
104
+ return;
105
+ }
106
+ const dY = e.deltaY;
107
+ const isAtTop = overflowRef.current.top >= -0.5;
108
+ const isAtBottom = overflowRef.current.bottom >= -0.5;
109
+ const remainingScroll = el.scrollHeight - el.clientHeight;
110
+ const sign = dY < 0 ? -1 : 1;
111
+ const method = dY < 0 ? "max" : "min";
112
+ if (el.scrollHeight <= el.clientHeight) {
113
+ return;
114
+ }
115
+ if ((!isAtTop && dY > 0) || (!isAtBottom && dY < 0)) {
116
+ e.preventDefault();
117
+ onChange((d) => d + Math[method](dY, remainingScroll * sign));
118
+ tick();
119
+ }
120
+ else if (/firefox/i.test(getUserAgent())) {
121
+ // Needed to propagate scrolling during momentum scrolling phase once
122
+ // it gets limited by the boundary. UX improvement, not critical.
123
+ el.scrollTop += dY;
124
+ }
125
+ }
126
+ const el = scrollRef?.current || elements.floating;
127
+ if (open && el) {
128
+ el.addEventListener("wheel", onWheel);
129
+ // Wait for the position to be ready.
130
+ requestAnimationFrame(() => {
131
+ prevScrollTopRef.current = el.scrollTop;
132
+ if (overflowRef.current != null) {
133
+ initialOverflowRef.current = { ...overflowRef.current };
134
+ }
135
+ });
136
+ return () => {
137
+ prevScrollTopRef.current = null;
138
+ initialOverflowRef.current = null;
139
+ el.removeEventListener("wheel", onWheel);
140
+ };
141
+ }
142
+ });
143
+ });
144
+ const floating = {
145
+ onkeydown() {
146
+ controlledScrollingRef.current = true;
147
+ },
148
+ onwheel() {
149
+ controlledScrollingRef.current = false;
150
+ },
151
+ onpointermove() {
152
+ controlledScrollingRef.current = false;
153
+ },
154
+ async onscroll() {
155
+ const el = scrollRef?.current || elements.floating;
156
+ if (!overflowRef.current || !el || !controlledScrollingRef.current) {
157
+ return;
158
+ }
159
+ if (prevScrollTopRef.current !== null) {
160
+ const scrollDiff = el.scrollTop - prevScrollTopRef.current;
161
+ if ((overflowRef.current.bottom < -0.5 && scrollDiff < -1) ||
162
+ (overflowRef.current.top < -0.5 && scrollDiff > 1)) {
163
+ onChange((d) => d + scrollDiff);
164
+ await tick();
165
+ }
166
+ }
167
+ // [Firefox] Wait for the height change to have been applied.
168
+ requestAnimationFrame(() => {
169
+ prevScrollTopRef.current = el.scrollTop;
170
+ });
171
+ },
172
+ };
173
+ return {
174
+ get floating() {
175
+ return enabled ? floating : undefined;
176
+ },
177
+ };
178
+ }
@@ -0,0 +1,114 @@
1
+ import type { MutableRefObject } from "../../ref.svelte.js";
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+ import type { UseFloatingOptions as UsePositionOptions, UseFloatingReturn as UsePositionFloatingReturn, VirtualElement } from "../svelte-dom/types.js";
4
+ import type { ExtendedUserProps } from "./hooks/useInteractions.svelte.js";
5
+ export type { ReferenceElement, DetectOverflowOptions, Middleware, MiddlewareState, SideObject, } from "../svelte-dom/types.js";
6
+ type Prettify<T> = {
7
+ [K in keyof T]: T[K];
8
+ } & {};
9
+ export type OpenChangeReason = "outside-press" | "escape-key" | "ancestor-scroll" | "reference-press" | "click" | "hover" | "focus" | "focus-out" | "list-navigation" | "safe-polygon";
10
+ export type NarrowedElement<T> = T extends Element ? T : Element;
11
+ export interface ExtendedRefs<RT> {
12
+ reference: MutableRefObject<ReferenceType | null>;
13
+ floating: MutableRefObject<HTMLElement | null>;
14
+ domReference: MutableRefObject<NarrowedElement<RT> | null>;
15
+ setReference(node: RT | null | undefined): void;
16
+ setFloating(node: HTMLElement | null | undefined): void;
17
+ setPositionReference(node: ReferenceType | null | undefined): void;
18
+ }
19
+ export interface ExtendedElements<RT> {
20
+ reference: ReferenceType | null;
21
+ floating: HTMLElement | null;
22
+ domReference: NarrowedElement<RT> | null;
23
+ }
24
+ export interface FloatingEvents {
25
+ emit<T extends string>(event: T, data?: any): void;
26
+ on(event: string, handler: (data: any) => void): void;
27
+ off(event: string, handler: (data: any) => void): void;
28
+ }
29
+ export interface ContextData {
30
+ openEvent?: Event;
31
+ floatingContext?: FloatingContext;
32
+ /** @deprecated use `onTypingChange` prop in `useTypeahead` */
33
+ typing?: boolean;
34
+ [key: string]: any;
35
+ }
36
+ export interface FloatingRootContext<RT extends ReferenceType = ReferenceType> {
37
+ dataRef: MutableRefObject<ContextData>;
38
+ open: boolean;
39
+ onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
40
+ elements: {
41
+ domReference: Element | null;
42
+ reference: RT | null;
43
+ floating: HTMLElement | null;
44
+ };
45
+ events: FloatingEvents;
46
+ floatingId: string;
47
+ refs: {
48
+ setPositionReference(node: ReferenceType | null | undefined): void;
49
+ };
50
+ }
51
+ export type FloatingContext<RT extends ReferenceType = ReferenceType> = Omit<UsePositionFloatingReturn<RT>, "refs" | "elements"> & {
52
+ open: boolean;
53
+ onOpenChange(open: boolean, event?: Event, reason?: OpenChangeReason): void;
54
+ events: FloatingEvents;
55
+ dataRef: MutableRefObject<ContextData>;
56
+ nodeId: string | undefined;
57
+ floatingId: string;
58
+ refs: ExtendedRefs<RT>;
59
+ elements: ExtendedElements<RT>;
60
+ };
61
+ export interface FloatingNodeType<RT extends ReferenceType = ReferenceType> {
62
+ id: string;
63
+ parentId: string | null;
64
+ context?: FloatingContext<RT>;
65
+ }
66
+ export interface FloatingTreeType<RT extends ReferenceType = ReferenceType> {
67
+ nodesRef: MutableRefObject<Array<FloatingNodeType<RT>>>;
68
+ events: FloatingEvents;
69
+ addNode(node: FloatingNodeType): void;
70
+ removeNode(node: FloatingNodeType): void;
71
+ }
72
+ export interface ElementProps {
73
+ reference?: HTMLAttributes<Element>;
74
+ floating?: HTMLAttributes<HTMLElement>;
75
+ item?: HTMLAttributes<HTMLElement> | ((props: ExtendedUserProps) => HTMLAttributes<HTMLElement>);
76
+ }
77
+ export type ReferenceType = Element | VirtualElement;
78
+ export type UseFloatingData = Prettify<UseFloatingReturn>;
79
+ export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UsePositionFloatingReturn & {
80
+ /**
81
+ * `FloatingContext`
82
+ */
83
+ context: Prettify<FloatingContext<RT>>;
84
+ /**
85
+ * Object containing the reference and floating refs and reactive setters.
86
+ */
87
+ refs: ExtendedRefs<RT>;
88
+ elements: ExtendedElements<RT>;
89
+ }>;
90
+ export interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> extends Omit<UsePositionOptions<RT>, "elements"> {
91
+ rootContext?: FloatingRootContext<RT>;
92
+ /**
93
+ * Object of external elements as an alternative to the `refs` object setters.
94
+ */
95
+ elements?: {
96
+ /**
97
+ * Externally passed reference element. Store in state.
98
+ */
99
+ reference?: Element | null;
100
+ /**
101
+ * Externally passed floating element. Store in state.
102
+ */
103
+ floating?: HTMLElement | null;
104
+ };
105
+ /**
106
+ * An event callback that is invoked when the floating element is opened or
107
+ * closed.
108
+ */
109
+ onOpenChange?(open: boolean, event?: Event, reason?: OpenChangeReason): void;
110
+ /**
111
+ * Unique node id when using `FloatingTree`.
112
+ */
113
+ nodeId?: string;
114
+ }
@@ -0,0 +1,5 @@
1
+ export declare function createPubSub(): {
2
+ emit(event: string, data: any): void;
3
+ on(event: string, listener: (data: any) => void): void;
4
+ off(event: string, listener: (data: any) => void): void;
5
+ };
@@ -0,0 +1,14 @@
1
+ export function createPubSub() {
2
+ const map = new Map();
3
+ return {
4
+ emit(event, data) {
5
+ map.get(event)?.forEach((handler) => handler(data));
6
+ },
7
+ on(event, listener) {
8
+ map.set(event, [...(map.get(event) || []), listener]);
9
+ },
10
+ off(event, listener) {
11
+ map.set(event, map.get(event)?.filter((l) => l !== listener) || []);
12
+ },
13
+ };
14
+ }
@@ -0,0 +1,2 @@
1
+ export declare const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
2
+ export declare function getFloatingFocusElement(floatingElement: HTMLElement | null): HTMLElement | null;
@@ -0,0 +1,13 @@
1
+ export const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
2
+ export function getFloatingFocusElement(floatingElement) {
3
+ if (!floatingElement) {
4
+ return null;
5
+ }
6
+ // Try to find the element that has `{...getFloatingProps()}` spread on it.
7
+ // This indicates the floating element is acting as a positioning wrapper, and
8
+ // so focus should be managed on the child element with the event handlers and
9
+ // aria props.
10
+ return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
11
+ ? floatingElement
12
+ : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
13
+ }
@@ -0,0 +1,2 @@
1
+ export declare function warn(...messages: string[]): void;
2
+ export declare function error(...messages: string[]): void;
@@ -0,0 +1,19 @@
1
+ import { DEV } from "esm-env";
2
+ let devMessageSet;
3
+ if (DEV) {
4
+ devMessageSet = new Set();
5
+ }
6
+ export function warn(...messages) {
7
+ const message = `Floating UI: ${messages.join(" ")}`;
8
+ if (!devMessageSet?.has(message)) {
9
+ devMessageSet?.add(message);
10
+ console.warn(message);
11
+ }
12
+ }
13
+ export function error(...messages) {
14
+ const message = `Floating UI: ${messages.join(" ")}`;
15
+ if (!devMessageSet?.has(message)) {
16
+ devMessageSet?.add(message);
17
+ console.error(message);
18
+ }
19
+ }
@@ -0,0 +1,19 @@
1
+ export declare function activeElement(doc: Document): Element | null;
2
+ export declare function contains(parent?: Element | null, child?: Element | null): boolean;
3
+ export declare function getPlatform(): string;
4
+ export declare function getUserAgent(): string;
5
+ export declare function isVirtualClick(event: MouseEvent | PointerEvent): boolean;
6
+ export declare function isVirtualPointerEvent(event: PointerEvent): boolean;
7
+ export declare function isSafari(): boolean;
8
+ export declare function isAndroid(): boolean;
9
+ export declare function isMac(): boolean;
10
+ export declare function isJSDOM(): boolean;
11
+ export declare function isMouseLikePointerType(pointerType: string | undefined, strict?: boolean): boolean;
12
+ export declare function isRootElement(element: Element): boolean;
13
+ export declare function getDocument(node: Element | null): Document;
14
+ export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
15
+ export declare function getTarget(event: Event): EventTarget | null;
16
+ export declare const TYPEABLE_SELECTOR: string;
17
+ export declare function isTypeableElement(element: unknown): boolean;
18
+ export declare function stopEvent(event: Event): void;
19
+ export declare function isTypeableCombobox(element: Element | null): boolean;
@@ -0,0 +1,136 @@
1
+ import { isHTMLElement, isShadowRoot } from "@floating-ui/utils/dom";
2
+ export function activeElement(doc) {
3
+ let activeElement = doc.activeElement;
4
+ while (activeElement?.shadowRoot?.activeElement != null) {
5
+ activeElement = activeElement.shadowRoot.activeElement;
6
+ }
7
+ return activeElement;
8
+ }
9
+ export function contains(parent, child) {
10
+ if (!parent || !child) {
11
+ return false;
12
+ }
13
+ const rootNode = child.getRootNode?.();
14
+ // First, attempt with faster native method
15
+ if (parent.contains(child)) {
16
+ return true;
17
+ }
18
+ // then fallback to custom implementation with Shadow DOM support
19
+ if (rootNode && isShadowRoot(rootNode)) {
20
+ let next = child;
21
+ while (next) {
22
+ if (parent === next) {
23
+ return true;
24
+ }
25
+ // @ts-ignore
26
+ next = next.parentNode || next.host;
27
+ }
28
+ }
29
+ // Give up, the result is false
30
+ return false;
31
+ }
32
+ // Avoid Chrome DevTools blue warning.
33
+ export function getPlatform() {
34
+ const uaData = navigator.userAgentData;
35
+ if (uaData?.platform) {
36
+ return uaData.platform;
37
+ }
38
+ return navigator.platform;
39
+ }
40
+ export function getUserAgent() {
41
+ const uaData = navigator.userAgentData;
42
+ if (uaData && Array.isArray(uaData.brands)) {
43
+ return uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
44
+ }
45
+ return navigator.userAgent;
46
+ }
47
+ // License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
48
+ export function isVirtualClick(event) {
49
+ // FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
50
+ // Try to find a workaround for this. `react-aria` source still has the check.
51
+ if (event.mozInputSource === 0 && event.isTrusted) {
52
+ return true;
53
+ }
54
+ if (isAndroid() && event.pointerType) {
55
+ return event.type === "click" && event.buttons === 1;
56
+ }
57
+ return event.detail === 0 && !event.pointerType;
58
+ }
59
+ export function isVirtualPointerEvent(event) {
60
+ if (isJSDOM())
61
+ return false;
62
+ return ((!isAndroid() && event.width === 0 && event.height === 0) ||
63
+ (isAndroid() &&
64
+ event.width === 1 &&
65
+ event.height === 1 &&
66
+ event.pressure === 0 &&
67
+ event.detail === 0 &&
68
+ event.pointerType === "mouse") ||
69
+ // iOS VoiceOver returns 0.333• for width/height.
70
+ (event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "touch"));
71
+ }
72
+ export function isSafari() {
73
+ // Chrome DevTools does not complain about navigator.vendor
74
+ return /apple/i.test(navigator.vendor);
75
+ }
76
+ export function isAndroid() {
77
+ const re = /android/i;
78
+ return re.test(getPlatform()) || re.test(getUserAgent());
79
+ }
80
+ export function isMac() {
81
+ return getPlatform().toLowerCase().startsWith("mac") && !navigator.maxTouchPoints;
82
+ }
83
+ export function isJSDOM() {
84
+ return getUserAgent().includes("jsdom/");
85
+ }
86
+ export function isMouseLikePointerType(pointerType, strict) {
87
+ // On some Linux machines with Chromium, mouse inputs return a `pointerType`
88
+ // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
89
+ const values = ["mouse", "pen"];
90
+ if (!strict) {
91
+ values.push("", undefined);
92
+ }
93
+ return values.includes(pointerType);
94
+ }
95
+ /*export function isReactEvent(event: any): event is React.SyntheticEvent {
96
+ return "nativeEvent" in event
97
+ }*/
98
+ export function isRootElement(element) {
99
+ return element.matches("html,body");
100
+ }
101
+ export function getDocument(node) {
102
+ return node?.ownerDocument || document;
103
+ }
104
+ export function isEventTargetWithin(event, node) {
105
+ if (node == null) {
106
+ return false;
107
+ }
108
+ if ("composedPath" in event) {
109
+ return event.composedPath().includes(node);
110
+ }
111
+ // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
112
+ const e = event;
113
+ return e.target != null && node.contains(e.target);
114
+ }
115
+ export function getTarget(event) {
116
+ if ("composedPath" in event) {
117
+ return event.composedPath()[0];
118
+ }
119
+ // TS thinks `event` is of type never as it assumes all browsers support
120
+ // `composedPath()`, but browsers without shadow DOM don't.
121
+ return event.target;
122
+ }
123
+ export const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," +
124
+ "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
125
+ export function isTypeableElement(element) {
126
+ return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
127
+ }
128
+ export function stopEvent(event /*| React.SyntheticEvent*/) {
129
+ event.preventDefault();
130
+ event.stopPropagation();
131
+ }
132
+ export function isTypeableCombobox(element) {
133
+ if (!element)
134
+ return false;
135
+ return element.getAttribute("role") === "combobox" && isTypeableElement(element);
136
+ }
@@ -0,0 +1,22 @@
1
+ import type { MutableRefObject } from "../../ref.svelte.js";
2
+ import type { Derivable, Middleware, Padding } from "@floating-ui/dom";
3
+ export interface ArrowOptions {
4
+ /**
5
+ * The arrow element to be positioned.
6
+ * @default undefined
7
+ */
8
+ element: MutableRefObject<Element | null> | Element | null;
9
+ /**
10
+ * The padding between the arrow element and the floating element edges.
11
+ * Useful when the floating element has rounded corners.
12
+ * @default 0
13
+ */
14
+ padding?: Padding;
15
+ }
16
+ /**
17
+ * Provides data to position an inner element of the floating element so that it
18
+ * appears centered to the reference element.
19
+ * This wraps the core `arrow` middleware to allow React refs as the element.
20
+ * @see https://floating-ui.com/docs/arrow
21
+ */
22
+ export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;
@@ -0,0 +1,29 @@
1
+ import { arrow as arrowCore } from "@floating-ui/dom";
2
+ /**
3
+ * Provides data to position an inner element of the floating element so that it
4
+ * appears centered to the reference element.
5
+ * This wraps the core `arrow` middleware to allow React refs as the element.
6
+ * @see https://floating-ui.com/docs/arrow
7
+ */
8
+ export const arrow = (options) => {
9
+ function isRef(value) {
10
+ return {}.hasOwnProperty.call(value, "current");
11
+ }
12
+ return {
13
+ name: "arrow",
14
+ options,
15
+ fn(state) {
16
+ const { element, padding } = typeof options === "function" ? options(state) : options;
17
+ if (element && isRef(element)) {
18
+ if (element.current != null) {
19
+ return arrowCore({ element: element.current, padding }).fn(state);
20
+ }
21
+ return {};
22
+ }
23
+ if (element) {
24
+ return arrowCore({ element, padding }).fn(state);
25
+ }
26
+ return {};
27
+ },
28
+ };
29
+ };
@@ -0,0 +1,2 @@
1
+ export * from "./types.js";
2
+ export { useFloating } from "./useFloating.svelte.js";
@@ -0,0 +1,2 @@
1
+ export * from "./types.js";
2
+ export { useFloating } from "./useFloating.svelte.js";
@@ -0,0 +1,80 @@
1
+ import type { MutableRefObject } from "../../ref.svelte.js";
2
+ import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from "@floating-ui/dom";
3
+ export type { ArrowOptions } from "./arrow.js";
4
+ export { arrow } from "./arrow.js";
5
+ export { useFloating } from "./useFloating.svelte.js";
6
+ export type { AlignedPlacement, Alignment, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, Derivable, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement, } from "@floating-ui/dom";
7
+ export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";
8
+ type Prettify<T> = {
9
+ [K in keyof T]: T[K];
10
+ } & {};
11
+ export type UseFloatingData = Prettify<ComputePositionReturn & {
12
+ isPositioned: boolean;
13
+ }>;
14
+ export type ReferenceType = Element | VirtualElement;
15
+ export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UseFloatingData & {
16
+ /**
17
+ * Update the position of the floating element, re-rendering the component
18
+ * if required.
19
+ */
20
+ update: () => void;
21
+ /**
22
+ * Pre-configured positioning styles to apply to the floating element.
23
+ */
24
+ floatingStyles: string;
25
+ /**
26
+ * Object containing the reference and floating refs and reactive setters.
27
+ */
28
+ refs: {
29
+ /**
30
+ * A React ref to the reference element.
31
+ */
32
+ reference: MutableRefObject<RT | null>;
33
+ /**
34
+ * A React ref to the floating element.
35
+ */
36
+ floating: MutableRefObject<HTMLElement | null>;
37
+ /**
38
+ * A callback to set the reference element (reactive).
39
+ */
40
+ setReference: (node: RT | null | undefined) => void;
41
+ /**
42
+ * A callback to set the floating element (reactive).
43
+ */
44
+ setFloating: (node: HTMLElement | null | undefined) => void;
45
+ };
46
+ /**
47
+ * Object containing the reference and floating elements.
48
+ */
49
+ elements: {
50
+ reference: RT | null;
51
+ floating: HTMLElement | null;
52
+ };
53
+ }>;
54
+ export type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
55
+ /**
56
+ * A callback invoked when both the reference and floating elements are
57
+ * mounted, and cleaned up when either is unmounted. This is useful for
58
+ * setting up event listeners (e.g. pass `autoUpdate`).
59
+ */
60
+ whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => () => void;
61
+ /**
62
+ * Object containing the reference and floating elements.
63
+ */
64
+ elements?: {
65
+ reference?: RT | null;
66
+ floating?: HTMLElement | null;
67
+ };
68
+ /**
69
+ * The `open` state of the floating element to synchronize with the
70
+ * `isPositioned` value.
71
+ * @default false
72
+ */
73
+ open?: boolean;
74
+ /**
75
+ * Whether to use `transform` for positioning instead of `top` and `left`
76
+ * (layout) in the `floatingStyles` object.
77
+ * @default false
78
+ */
79
+ transform?: boolean;
80
+ }>;
@@ -0,0 +1,3 @@
1
+ export { arrow } from "./arrow.js";
2
+ export { useFloating } from "./useFloating.svelte.js";
3
+ export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size, } from "@floating-ui/dom";
@@ -0,0 +1,6 @@
1
+ import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from "./types.js";
2
+ /**
3
+ * Provides data to position a floating element.
4
+ * @see https://floating-ui.com/docs/useFloating
5
+ */
6
+ export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;