@ark-ui/solid 5.15.1 → 5.15.2

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 (183) hide show
  1. package/README.md +1 -0
  2. package/dist/chunk/6ATAHZBX.js +193 -0
  3. package/dist/chunk/I7VQFKYT.jsx +172 -0
  4. package/dist/chunk/{KAYDBHSW.jsx → IDNDLSEV.jsx} +4 -4
  5. package/dist/chunk/L5XYJCAK.jsx +264 -0
  6. package/dist/chunk/{VL4J24YY.js → NEP3K5KL.js} +2 -2
  7. package/dist/chunk/P5BHXVYK.js +126 -0
  8. package/dist/chunk/TBR4XVH2.js +172 -0
  9. package/dist/chunk/{NCRPFSNO.jsx → VR5BNKL7.jsx} +4 -4
  10. package/dist/chunk/ZHLQWQXX.jsx +253 -0
  11. package/dist/chunk/{SWUMYWUU.js → ZLUEV2MH.js} +2 -2
  12. package/dist/components/accordion/index.js +1 -1
  13. package/dist/components/accordion/index.jsx +3 -3
  14. package/dist/components/angle-slider/index.js +1 -1
  15. package/dist/components/angle-slider/index.jsx +2 -2
  16. package/dist/components/avatar/index.js +1 -1
  17. package/dist/components/avatar/index.jsx +2 -2
  18. package/dist/components/carousel/index.js +1 -1
  19. package/dist/components/carousel/index.jsx +2 -2
  20. package/dist/components/checkbox/index.js +1 -1
  21. package/dist/components/checkbox/index.jsx +2 -2
  22. package/dist/components/clipboard/index.jsx +1 -1
  23. package/dist/components/collapsible/index.js +1 -1
  24. package/dist/components/collapsible/index.jsx +2 -2
  25. package/dist/components/color-picker/index.js +1 -1
  26. package/dist/components/color-picker/index.jsx +2 -2
  27. package/dist/components/combobox/index.js +1 -1
  28. package/dist/components/combobox/index.jsx +2 -2
  29. package/dist/components/date-picker/index.js +1 -1
  30. package/dist/components/date-picker/index.jsx +2 -2
  31. package/dist/components/dialog/index.js +1 -1
  32. package/dist/components/dialog/index.jsx +2 -2
  33. package/dist/components/download-trigger/index.jsx +1 -1
  34. package/dist/components/editable/index.js +1 -1
  35. package/dist/components/editable/index.jsx +2 -2
  36. package/dist/components/field/index.jsx +1 -1
  37. package/dist/components/fieldset/index.jsx +1 -1
  38. package/dist/components/file-upload/index.js +1 -1
  39. package/dist/components/file-upload/index.jsx +2 -2
  40. package/dist/components/floating-panel/index.js +1 -1
  41. package/dist/components/floating-panel/index.jsx +2 -3
  42. package/dist/components/format/index.jsx +1 -1
  43. package/dist/components/frame/index.jsx +1 -1
  44. package/dist/components/hover-card/index.js +1 -1
  45. package/dist/components/hover-card/index.jsx +2 -2
  46. package/dist/components/index.js +43 -43
  47. package/dist/components/index.jsx +348 -349
  48. package/dist/components/listbox/index.js +1 -1
  49. package/dist/components/listbox/index.jsx +2 -3
  50. package/dist/components/menu/index.js +1 -1
  51. package/dist/components/menu/index.jsx +2 -2
  52. package/dist/components/number-input/index.js +1 -1
  53. package/dist/components/number-input/index.jsx +2 -2
  54. package/dist/components/pagination/index.js +1 -1
  55. package/dist/components/pagination/index.jsx +2 -2
  56. package/dist/components/password-input/index.js +1 -1
  57. package/dist/components/password-input/index.jsx +2 -3
  58. package/dist/components/pin-input/index.js +1 -1
  59. package/dist/components/pin-input/index.jsx +2 -2
  60. package/dist/components/popover/index.js +1 -1
  61. package/dist/components/popover/index.jsx +2 -2
  62. package/dist/components/progress/index.js +1 -1
  63. package/dist/components/progress/index.jsx +2 -2
  64. package/dist/components/qr-code/index.js +1 -1
  65. package/dist/components/qr-code/index.jsx +2 -2
  66. package/dist/components/radio-group/index.js +1 -1
  67. package/dist/components/radio-group/index.jsx +2 -2
  68. package/dist/components/rating-group/index.js +1 -1
  69. package/dist/components/rating-group/index.jsx +2 -2
  70. package/dist/components/segment-group/index.js +1 -1
  71. package/dist/components/segment-group/index.jsx +2 -2
  72. package/dist/components/select/index.js +1 -1
  73. package/dist/components/select/index.jsx +2 -2
  74. package/dist/components/signature-pad/index.js +1 -1
  75. package/dist/components/signature-pad/index.jsx +2 -2
  76. package/dist/components/slider/index.js +1 -1
  77. package/dist/components/slider/index.jsx +2 -2
  78. package/dist/components/splitter/index.js +1 -1
  79. package/dist/components/splitter/index.jsx +2 -2
  80. package/dist/components/steps/index.js +1 -1
  81. package/dist/components/steps/index.jsx +2 -2
  82. package/dist/components/switch/index.js +1 -1
  83. package/dist/components/switch/index.jsx +2 -2
  84. package/dist/components/tabs/index.js +1 -1
  85. package/dist/components/tabs/index.jsx +2 -2
  86. package/dist/components/tags-input/index.js +1 -1
  87. package/dist/components/tags-input/index.jsx +2 -2
  88. package/dist/components/time-picker/index.js +1 -1
  89. package/dist/components/time-picker/index.jsx +2 -2
  90. package/dist/components/timer/index.jsx +1 -1
  91. package/dist/components/toast/index.js +1 -1
  92. package/dist/components/toast/index.jsx +2 -2
  93. package/dist/components/toggle-group/index.js +1 -1
  94. package/dist/components/toggle-group/index.jsx +2 -2
  95. package/dist/components/tooltip/index.js +1 -1
  96. package/dist/components/tooltip/index.jsx +2 -2
  97. package/dist/components/tour/index.js +1 -1
  98. package/dist/components/tour/index.jsx +2 -2
  99. package/dist/components/tree-view/index.js +1 -1
  100. package/dist/components/tree-view/index.jsx +3 -3
  101. package/dist/index.js +44 -44
  102. package/dist/index.jsx +351 -352
  103. package/dist/providers/index.js +1 -1
  104. package/dist/providers/index.jsx +4 -4
  105. package/package.json +58 -53
  106. package/dist/chunk/4NULU2IK.jsx +0 -1818
  107. package/dist/chunk/A62XIWGT.js +0 -1071
  108. package/dist/chunk/AUU5NNSJ.js +0 -1706
  109. package/dist/chunk/AWEBBQKG.js +0 -352
  110. package/dist/chunk/ETB2BIQZ.jsx +0 -30
  111. package/dist/chunk/KOMUYUJE.jsx +0 -1144
  112. package/dist/chunk/MTT5ESIK.jsx +0 -400
  113. package/dist/chunk/PKUUD527.js +0 -25
  114. package/dist/chunk/{DAORON6X.js → 25PYT2EL.js} +1 -1
  115. package/dist/chunk/{OF23HNNE.js → 4B42LT3B.js} +1 -1
  116. package/dist/chunk/{VQ3I3Z7G.js → 4B53AHD6.js} +1 -1
  117. package/dist/chunk/{XUH2TAUG.jsx → 4L4266PL.jsx} +3 -3
  118. package/dist/chunk/{AKYIM67Z.jsx → 4T2T3PMU.jsx} +3 -3
  119. package/dist/chunk/{I6UGYR2R.js → 4V2VMH2Z.js} +1 -1
  120. package/dist/chunk/{HHGCJUZP.js → 5UKLBKNF.js} +1 -1
  121. package/dist/chunk/{2WR5J3OZ.jsx → 6XAZQVOY.jsx} +3 -3
  122. package/dist/chunk/{WI6PP4EF.js → 74W4D3KY.js} +1 -1
  123. package/dist/chunk/{NQSCRM4A.js → 7E5K2JFP.js} +1 -1
  124. package/dist/chunk/{HP3ZGMDZ.jsx → 7FASJWDK.jsx} +3 -3
  125. package/dist/chunk/{ZTNABPZL.jsx → 7OXBQSIZ.jsx} +3 -3
  126. package/dist/chunk/{YAOPG62Z.jsx → 7RYPC5LL.jsx} +3 -3
  127. package/dist/chunk/{4FUKCXPR.jsx → 7UNWOGPT.jsx} +3 -3
  128. package/dist/chunk/{OKT2RIHV.js → 7YHVIYNP.js} +1 -1
  129. package/dist/chunk/{AD6K3UTR.js → ASBQTDT2.js} +1 -1
  130. package/dist/chunk/{6QX2AKIJ.js → ASEDJSVN.js} +1 -1
  131. package/dist/chunk/{UK24ZAUL.js → CDA7SUTE.js} +1 -1
  132. package/dist/chunk/{35XSFKD5.jsx → CINP4S7J.jsx} +3 -3
  133. package/dist/chunk/{MTVQZNY6.js → D65IYCJS.js} +1 -1
  134. package/dist/chunk/{QSOUO2RW.js → D6MFUKUH.js} +1 -1
  135. package/dist/chunk/{PPQSRJ6X.jsx → DLZTFD37.jsx} +3 -3
  136. package/dist/chunk/{2MXPLL4O.js → EJDY3MNV.js} +1 -1
  137. package/dist/chunk/{4UNGYCFT.jsx → FG427CLW.jsx} +3 -3
  138. package/dist/chunk/{2UVDYZIY.jsx → FOIEK72O.jsx} +3 -3
  139. package/dist/chunk/{WZ75PULC.js → FQGMWBGA.js} +1 -1
  140. package/dist/chunk/{BOR6VUN5.js → GAB5O55Q.js} +1 -1
  141. package/dist/chunk/{HDKSS6KE.jsx → GLN6WFQR.jsx} +3 -3
  142. package/dist/chunk/{WOUVNHGI.jsx → H4MJ4254.jsx} +3 -3
  143. package/dist/chunk/{LORIOKHL.js → HKFF76YQ.js} +1 -1
  144. package/dist/chunk/{3DOPQCHJ.jsx → JK6QXH6B.jsx} +3 -3
  145. package/dist/chunk/{UW5WJ2LL.jsx → JKM73NGJ.jsx} +3 -3
  146. package/dist/chunk/{T7GUEJBF.js → JXJHXSF4.js} +1 -1
  147. package/dist/chunk/{JEPST7BN.jsx → KJ353BY6.jsx} +3 -3
  148. package/dist/chunk/{AUVF4L3Q.jsx → KNVMVQG6.jsx} +3 -3
  149. package/dist/chunk/{72JQEDEW.js → L4PQJRRA.js} +1 -1
  150. package/dist/chunk/{364QFYBV.js → LNLL2OTD.js} +1 -1
  151. package/dist/chunk/{NPHS6PVV.jsx → MJTOTU2A.jsx} +3 -3
  152. package/dist/chunk/{3VOFK5T4.jsx → N3W3K2ZD.jsx} +3 -3
  153. package/dist/chunk/{IWBBR7PD.js → N65DCNIH.js} +1 -1
  154. package/dist/chunk/{4HQIDBKB.js → O5A5KQPC.js} +1 -1
  155. package/dist/chunk/{T4JGZ7KR.js → OA4CU2PL.js} +1 -1
  156. package/dist/chunk/{OKNWZYMH.jsx → OM7DNJ6L.jsx} +3 -3
  157. package/dist/chunk/{JUBTXT4B.jsx → OM7V7VVC.jsx} +3 -3
  158. package/dist/chunk/{H5DXY5W4.js → OVFUGKNG.js} +1 -1
  159. package/dist/chunk/{74TH35IC.js → P7WR6WX5.js} +1 -1
  160. package/dist/chunk/{5U4KEVIU.jsx → PRA2XFQE.jsx} +3 -3
  161. package/dist/chunk/{FJ5JNMAY.js → QJQKZL6X.js} +1 -1
  162. package/dist/chunk/{MM6NNI6M.jsx → QXYWHKF7.jsx} +3 -3
  163. package/dist/chunk/{OPAESICE.js → SFEMNN6F.js} +1 -1
  164. package/dist/chunk/{ROUJC6XC.js → SGY2KGDL.js} +1 -1
  165. package/dist/chunk/{LDOGINY6.js → TECDLRTB.js} +1 -1
  166. package/dist/chunk/{XIT3ASUI.jsx → U7QDCJXT.jsx} +3 -3
  167. package/dist/chunk/{DPP7XCXL.js → UAANHQJZ.js} +1 -1
  168. package/dist/chunk/{3IJ5QLEM.js → UU6XEYFI.js} +1 -1
  169. package/dist/chunk/{QC5C6JJA.jsx → V6S3C3U7.jsx} +3 -3
  170. package/dist/chunk/{LKPEYZZO.jsx → V75EMOIC.jsx} +3 -3
  171. package/dist/chunk/{RVK7FAUI.js → VEV5HF3M.js} +1 -1
  172. package/dist/chunk/{S4OS4UYL.jsx → VXQNQSLM.jsx} +3 -3
  173. package/dist/chunk/{ZNBZTQ46.jsx → WBLWV2L4.jsx} +3 -3
  174. package/dist/chunk/{LB3LJBHI.js → WTNRGPVN.js} +1 -1
  175. package/dist/chunk/{POJRD725.jsx → X5GWQYGE.jsx} +3 -3
  176. package/dist/chunk/{WG67YHCV.jsx → XENPQFEN.jsx} +3 -3
  177. package/dist/chunk/{LRA73ZZJ.js → XQNGFJ2M.js} +1 -1
  178. package/dist/chunk/{N3H47LNB.jsx → XSGHIZ6Q.jsx} +3 -3
  179. package/dist/chunk/{L64MXP66.jsx → Y2LC36B4.jsx} +3 -3
  180. package/dist/chunk/{XKBIT7L5.jsx → YJX4W6VT.jsx} +3 -3
  181. package/dist/chunk/{RC4UV6HP.jsx → YM35RFYG.jsx} +3 -3
  182. package/dist/chunk/{WHXDBQDP.jsx → Z2BXVXSV.jsx} +3 -3
  183. package/dist/chunk/{33DAWPKS.js → ZRSPQAUK.js} +1 -1
@@ -1,1071 +0,0 @@
1
- import { createMachine } from './PKUUD527.js';
2
- import { createSplitProps as createSplitProps$1 } from './ZMHI4GDJ.js';
3
- import { ark } from './EPLBB4QN.js';
4
- import { useEnvironmentContext } from './YO2MCGXO.js';
5
- import { useLocaleContext } from './OKZ64GSY.js';
6
- import { createContext } from './TROPIN4C.js';
7
- import { runIfFn } from './DT73WLR4.js';
8
- import { __export } from './ESLJRKWD.js';
9
- import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
10
- import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
11
- import { children, createUniqueId, createMemo } from 'solid-js';
12
- import { createAnatomy } from '@zag-js/anatomy';
13
- import { Selection, ListCollection, isGridCollection } from '@zag-js/collection';
14
- import { raf, observeAttributes, getByTypeahead, getWindow, getDocument, isVirtualClick, getEventTarget, scrollIntoView, dataAttr, isSelfTarget, getEventKey, isEditableElement, ariaAttr, isCtrlOrMetaKey, isComposingEvent, getNativeEvent, isMac } from '@zag-js/dom-query';
15
- import { isEqual, createSplitProps, ensure } from '@zag-js/utils';
16
- import { createProps } from '@zag-js/types';
17
-
18
- // src/components/listbox/use-listbox-context.ts
19
- var [ListboxProvider, useListboxContext] = createContext({
20
- hookName: "useListboxContext",
21
- providerName: "<ListboxProvider />"
22
- });
23
-
24
- // src/components/listbox/listbox-context.tsx
25
- function ListboxContext(props2) {
26
- return props2.children(useListboxContext());
27
- }
28
- var ListboxContent = (props2) => {
29
- const listbox = useListboxContext();
30
- const mergedProps = mergeProps(() => listbox().getContentProps(), props2);
31
- return createComponent(ark.div, mergedProps);
32
- };
33
- var ListboxInput = (props2) => {
34
- const [inputProps, localProps] = createSplitProps$1()(props2, ["autoHighlight"]);
35
- const listbox = useListboxContext();
36
- const mergedProps = mergeProps(() => listbox().getInputProps(inputProps), localProps);
37
- return createComponent(ark.input, mergedProps);
38
- };
39
-
40
- // src/components/listbox/use-listbox-item-context.ts
41
- var [ListboxItemProvider, useListboxItemContext] = createContext({
42
- hookName: "useListboxItemContext",
43
- providerName: "<ListboxItemProvider />"
44
- });
45
-
46
- // src/components/listbox/use-listbox-item-props-context.ts
47
- var [ListboxItemPropsProvider, useListboxItemPropsContext] = createContext({
48
- hookName: "useListboxItemPropsContext",
49
- providerName: "<ListboxItemPropsProvider />"
50
- });
51
-
52
- // src/components/listbox/listbox-item.tsx
53
- var ListboxItem = (props2) => {
54
- const [itemProps2, localProps] = createSplitProps$1()(props2, ["item", "highlightOnHover"]);
55
- const listbox = useListboxContext();
56
- const mergedProps = mergeProps(() => listbox().getItemProps(itemProps2), localProps);
57
- const itemState = () => listbox().getItemState(itemProps2);
58
- return createComponent(ListboxItemPropsProvider, {
59
- value: itemProps2,
60
- get children() {
61
- return createComponent(ListboxItemProvider, {
62
- get value() {
63
- return itemState();
64
- },
65
- get children() {
66
- return createComponent(ark.div, mergedProps);
67
- }
68
- });
69
- }
70
- });
71
- };
72
-
73
- // src/components/listbox/listbox-item-context.tsx
74
- function ListboxItemContext(props2) {
75
- return props2.children(useListboxItemContext());
76
- }
77
-
78
- // src/components/listbox/use-listbox-item-group-props-context.ts
79
- var [ListboxItemGroupPropsProvider, useListboxItemGroupPropsContext] = createContext({
80
- hookName: "useListboxItemGroupPropsContext",
81
- providerName: "<ListboxItemGroupPropsProvider />"
82
- });
83
-
84
- // src/components/listbox/listbox-item-group.tsx
85
- var ListboxItemGroup = (props2) => {
86
- const id = createUniqueId();
87
- const [_itemGroupProps, localProps] = createSplitProps$1()(props2, ["id"]);
88
- const itemGroupProps2 = {
89
- id,
90
- ..._itemGroupProps
91
- };
92
- const listbox = useListboxContext();
93
- const mergedProps = mergeProps(() => listbox().getItemGroupProps(itemGroupProps2), localProps);
94
- return createComponent(ListboxItemGroupPropsProvider, {
95
- value: itemGroupProps2,
96
- get children() {
97
- return createComponent(ark.div, mergedProps);
98
- }
99
- });
100
- };
101
- var ListboxItemGroupLabel = (props2) => {
102
- const listbox = useListboxContext();
103
- const itemGroupProps2 = useListboxItemGroupPropsContext();
104
- const mergedProps = mergeProps(() => listbox().getItemGroupLabelProps({
105
- htmlFor: itemGroupProps2.id
106
- }), props2);
107
- return createComponent(ark.div, mergedProps);
108
- };
109
- var ListboxItemIndicator = (props2) => {
110
- const listbox = useListboxContext();
111
- const itemProps2 = useListboxItemPropsContext();
112
- const mergedProps = mergeProps(() => listbox().getItemIndicatorProps(itemProps2), props2);
113
- return createComponent(ark.div, mergedProps);
114
- };
115
- var ListboxItemText = (props2) => {
116
- const listbox = useListboxContext();
117
- const itemProps2 = useListboxItemPropsContext();
118
- const mergedProps = mergeProps(() => listbox().getItemTextProps(itemProps2), props2);
119
- return createComponent(ark.div, mergedProps);
120
- };
121
- var ListboxLabel = (props2) => {
122
- const listbox = useListboxContext();
123
- const mergedProps = mergeProps(() => listbox().getLabelProps(), props2);
124
- return createComponent(ark.label, mergedProps);
125
- };
126
- function isValidKey(e) {
127
- return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
128
- }
129
- var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
130
- function isKeyboardFocusEvent(isTextInput, modality, e) {
131
- const target = e ? getEventTarget(e) : null;
132
- const win = getWindow(target);
133
- isTextInput = isTextInput || target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target?.type) || target instanceof win.HTMLTextAreaElement || target instanceof win.HTMLElement && target.isContentEditable;
134
- return !(isTextInput && modality === "keyboard" && e instanceof win.KeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
135
- }
136
- var currentModality = null;
137
- var changeHandlers = /* @__PURE__ */ new Set();
138
- var listenerMap = /* @__PURE__ */ new Map();
139
- var hasEventBeforeFocus = false;
140
- var hasBlurredWindowRecently = false;
141
- var FOCUS_VISIBLE_INPUT_KEYS = {
142
- Tab: true,
143
- Escape: true
144
- };
145
- function triggerChangeHandlers(modality, e) {
146
- for (let handler of changeHandlers) {
147
- handler(modality, e);
148
- }
149
- }
150
- function handleKeyboardEvent(e) {
151
- hasEventBeforeFocus = true;
152
- if (isValidKey(e)) {
153
- currentModality = "keyboard";
154
- triggerChangeHandlers("keyboard", e);
155
- }
156
- }
157
- function handlePointerEvent(e) {
158
- currentModality = "pointer";
159
- if (e.type === "mousedown" || e.type === "pointerdown") {
160
- hasEventBeforeFocus = true;
161
- triggerChangeHandlers("pointer", e);
162
- }
163
- }
164
- function handleClickEvent(e) {
165
- if (isVirtualClick(e)) {
166
- hasEventBeforeFocus = true;
167
- currentModality = "virtual";
168
- }
169
- }
170
- function handleFocusEvent(e) {
171
- const target = getEventTarget(e);
172
- if (target === getWindow(target) || target === getDocument(target)) {
173
- return;
174
- }
175
- if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
176
- currentModality = "virtual";
177
- triggerChangeHandlers("virtual", e);
178
- }
179
- hasEventBeforeFocus = false;
180
- hasBlurredWindowRecently = false;
181
- }
182
- function handleWindowBlur() {
183
- hasEventBeforeFocus = false;
184
- hasBlurredWindowRecently = true;
185
- }
186
- function setupGlobalFocusEvents(root) {
187
- if (typeof window === "undefined" || listenerMap.get(getWindow(root))) {
188
- return;
189
- }
190
- const win = getWindow(root);
191
- const doc = getDocument(root);
192
- let focus = win.HTMLElement.prototype.focus;
193
- function patchedFocus() {
194
- currentModality = "virtual";
195
- triggerChangeHandlers("virtual", null);
196
- hasEventBeforeFocus = true;
197
- focus.apply(this, arguments);
198
- }
199
- Object.defineProperty(win.HTMLElement.prototype, "focus", {
200
- configurable: true,
201
- value: patchedFocus
202
- });
203
- doc.addEventListener("keydown", handleKeyboardEvent, true);
204
- doc.addEventListener("keyup", handleKeyboardEvent, true);
205
- doc.addEventListener("click", handleClickEvent, true);
206
- win.addEventListener("focus", handleFocusEvent, true);
207
- win.addEventListener("blur", handleWindowBlur, false);
208
- if (typeof win.PointerEvent !== "undefined") {
209
- doc.addEventListener("pointerdown", handlePointerEvent, true);
210
- doc.addEventListener("pointermove", handlePointerEvent, true);
211
- doc.addEventListener("pointerup", handlePointerEvent, true);
212
- } else {
213
- doc.addEventListener("mousedown", handlePointerEvent, true);
214
- doc.addEventListener("mousemove", handlePointerEvent, true);
215
- doc.addEventListener("mouseup", handlePointerEvent, true);
216
- }
217
- win.addEventListener(
218
- "beforeunload",
219
- () => {
220
- tearDownWindowFocusTracking(root);
221
- },
222
- { once: true }
223
- );
224
- listenerMap.set(win, { focus });
225
- }
226
- var tearDownWindowFocusTracking = (root, loadListener) => {
227
- const win = getWindow(root);
228
- const doc = getDocument(root);
229
- if (!listenerMap.has(win)) {
230
- return;
231
- }
232
- win.HTMLElement.prototype.focus = listenerMap.get(win).focus;
233
- doc.removeEventListener("keydown", handleKeyboardEvent, true);
234
- doc.removeEventListener("keyup", handleKeyboardEvent, true);
235
- doc.removeEventListener("click", handleClickEvent, true);
236
- win.removeEventListener("focus", handleFocusEvent, true);
237
- win.removeEventListener("blur", handleWindowBlur, false);
238
- if (typeof win.PointerEvent !== "undefined") {
239
- doc.removeEventListener("pointerdown", handlePointerEvent, true);
240
- doc.removeEventListener("pointermove", handlePointerEvent, true);
241
- doc.removeEventListener("pointerup", handlePointerEvent, true);
242
- } else {
243
- doc.removeEventListener("mousedown", handlePointerEvent, true);
244
- doc.removeEventListener("mousemove", handlePointerEvent, true);
245
- doc.removeEventListener("mouseup", handlePointerEvent, true);
246
- }
247
- listenerMap.delete(win);
248
- };
249
- function getInteractionModality() {
250
- return currentModality;
251
- }
252
- function isFocusVisible() {
253
- return currentModality === "keyboard";
254
- }
255
- function trackFocusVisible(props2 = {}) {
256
- const { isTextInput, autoFocus, onChange, root } = props2;
257
- setupGlobalFocusEvents(root);
258
- onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality });
259
- const handler = (modality, e) => {
260
- if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return;
261
- onChange?.({ isFocusVisible: isFocusVisible(), modality });
262
- };
263
- changeHandlers.add(handler);
264
- return () => {
265
- changeHandlers.delete(handler);
266
- };
267
- }
268
- var anatomy = createAnatomy("listbox").parts(
269
- "label",
270
- "input",
271
- "item",
272
- "itemText",
273
- "itemIndicator",
274
- "itemGroup",
275
- "itemGroupLabel",
276
- "content",
277
- "root",
278
- "valueText"
279
- );
280
- var parts = anatomy.build();
281
- var collection = (options) => {
282
- return new ListCollection(options);
283
- };
284
- collection.empty = () => {
285
- return new ListCollection({ items: [] });
286
- };
287
- var getRootId = (ctx) => ctx.ids?.root ?? `select:${ctx.id}`;
288
- var getContentId = (ctx) => ctx.ids?.content ?? `select:${ctx.id}:content`;
289
- var getLabelId = (ctx) => ctx.ids?.label ?? `select:${ctx.id}:label`;
290
- var getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `select:${ctx.id}:option:${id}`;
291
- var getItemGroupId = (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `select:${ctx.id}:optgroup:${id}`;
292
- var getItemGroupLabelId = (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `select:${ctx.id}:optgroup-label:${id}`;
293
- var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
294
- var getItemEl = (ctx, id) => ctx.getById(getItemId(ctx, id));
295
- function connect(service, normalize) {
296
- const { context, prop, scope, computed, send } = service;
297
- const disabled = prop("disabled");
298
- const collection2 = prop("collection");
299
- const layout = isGridCollection(collection2) ? "grid" : "list";
300
- const value = context.get("value");
301
- const highlightedValue = context.get("highlightedValue");
302
- const highlightedItem = context.get("highlightedItem");
303
- const selectedItems = context.get("selectedItems");
304
- const isTypingAhead = computed("isTypingAhead");
305
- const interactive = computed("isInteractive");
306
- const ariaActiveDescendant = highlightedValue ? getItemId(scope, highlightedValue) : void 0;
307
- function getItemState(props2) {
308
- const itemDisabled = collection2.getItemDisabled(props2.item);
309
- const value2 = collection2.getItemValue(props2.item);
310
- ensure(value2, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
311
- return {
312
- value: value2,
313
- disabled: Boolean(disabled || itemDisabled),
314
- highlighted: highlightedValue === value2 && context.get("focused"),
315
- selected: context.get("value").includes(value2)
316
- };
317
- }
318
- return {
319
- empty: value.length === 0,
320
- highlightedItem,
321
- highlightedValue,
322
- clearHighlightedValue() {
323
- send({ type: "HIGHLIGHTED_VALUE.SET", value: null });
324
- },
325
- selectedItems,
326
- hasSelectedItems: computed("hasSelectedItems"),
327
- value,
328
- valueAsString: context.get("valueAsString"),
329
- collection: collection2,
330
- disabled: !!disabled,
331
- selectValue(value2) {
332
- send({ type: "ITEM.SELECT", value: value2 });
333
- },
334
- setValue(value2) {
335
- send({ type: "VALUE.SET", value: value2 });
336
- },
337
- selectAll() {
338
- if (!computed("multiple")) {
339
- throw new Error("[zag-js] Cannot select all items in a single-select listbox");
340
- }
341
- send({ type: "VALUE.SET", value: collection2.getValues() });
342
- },
343
- highlightValue(value2) {
344
- send({ type: "HIGHLIGHTED_VALUE.SET", value: value2 });
345
- },
346
- clearValue(value2) {
347
- if (value2) {
348
- send({ type: "ITEM.CLEAR", value: value2 });
349
- } else {
350
- send({ type: "VALUE.CLEAR" });
351
- }
352
- },
353
- getItemState,
354
- getRootProps() {
355
- return normalize.element({
356
- ...parts.root.attrs,
357
- dir: prop("dir"),
358
- id: getRootId(scope),
359
- "data-orientation": prop("orientation"),
360
- "data-disabled": dataAttr(disabled)
361
- });
362
- },
363
- getInputProps(props2 = {}) {
364
- return normalize.input({
365
- ...parts.input.attrs,
366
- dir: prop("dir"),
367
- disabled,
368
- "data-disabled": dataAttr(disabled),
369
- autoComplete: "off",
370
- autoCorrect: "off",
371
- "aria-haspopup": "listbox",
372
- "aria-controls": getContentId(scope),
373
- "aria-autocomplete": "list",
374
- "aria-activedescendant": ariaActiveDescendant,
375
- spellCheck: false,
376
- enterKeyHint: "go",
377
- onFocus() {
378
- queueMicrotask(() => {
379
- const contentEl = getContentEl(scope);
380
- const win = getWindow(contentEl);
381
- const focusInEvt = new win.FocusEvent("focusin", { bubbles: true, cancelable: true });
382
- contentEl?.dispatchEvent(focusInEvt);
383
- });
384
- },
385
- onBlur(event) {
386
- if (event.defaultPrevented) return;
387
- const contentEl = getContentEl(scope);
388
- const win = getWindow(contentEl);
389
- const focusOutEvt = new win.FocusEvent("focusout", { bubbles: true, cancelable: true });
390
- contentEl?.dispatchEvent(focusOutEvt);
391
- },
392
- onInput(event) {
393
- if (!props2.autoHighlight) return;
394
- const node = event.currentTarget;
395
- queueMicrotask(() => {
396
- if (!node.isConnected) return;
397
- send({
398
- type: "HIGHLIGHTED_VALUE.SET",
399
- value: node.value ? prop("collection").firstValue : null
400
- });
401
- });
402
- },
403
- onKeyDown(event) {
404
- if (event.defaultPrevented) return;
405
- if (isComposingEvent(event)) return;
406
- const nativeEvent = getNativeEvent(event);
407
- switch (nativeEvent.key) {
408
- case "ArrowDown":
409
- case "ArrowUp":
410
- case "Home":
411
- case "End": {
412
- if ((event.key === "Home" || event.key === "End") && !highlightedValue && event.shiftKey) {
413
- return;
414
- }
415
- event.preventDefault();
416
- const win = scope.getWin();
417
- const keyboardEvent = new win.KeyboardEvent(nativeEvent.type, nativeEvent);
418
- getContentEl(scope)?.dispatchEvent(keyboardEvent);
419
- break;
420
- }
421
- case "Enter":
422
- event.preventDefault();
423
- send({ type: "ITEM.CLICK", value: highlightedValue });
424
- break;
425
- }
426
- }
427
- });
428
- },
429
- getLabelProps() {
430
- return normalize.element({
431
- dir: prop("dir"),
432
- id: getLabelId(scope),
433
- ...parts.label.attrs,
434
- "data-disabled": dataAttr(disabled)
435
- });
436
- },
437
- getValueTextProps() {
438
- return normalize.element({
439
- ...parts.valueText.attrs,
440
- dir: prop("dir"),
441
- "data-disabled": dataAttr(disabled)
442
- });
443
- },
444
- getItemProps(props2) {
445
- const itemState = getItemState(props2);
446
- return normalize.element({
447
- id: getItemId(scope, itemState.value),
448
- role: "option",
449
- ...parts.item.attrs,
450
- dir: prop("dir"),
451
- "data-value": itemState.value,
452
- "aria-selected": itemState.selected,
453
- "data-selected": dataAttr(itemState.selected),
454
- "data-layout": layout,
455
- "data-state": itemState.selected ? "checked" : "unchecked",
456
- "data-orientation": prop("orientation"),
457
- "data-highlighted": dataAttr(itemState.highlighted),
458
- "data-disabled": dataAttr(itemState.disabled),
459
- "aria-disabled": ariaAttr(itemState.disabled),
460
- onPointerMove(event) {
461
- if (!props2.highlightOnHover) return;
462
- if (itemState.disabled || event.pointerType !== "mouse") return;
463
- if (itemState.highlighted) return;
464
- send({ type: "ITEM.POINTER_MOVE", value: itemState.value });
465
- },
466
- onMouseDown(event) {
467
- event.preventDefault();
468
- getContentEl(scope)?.focus();
469
- },
470
- onClick(event) {
471
- if (event.defaultPrevented) return;
472
- if (itemState.disabled) return;
473
- send({
474
- type: "ITEM.CLICK",
475
- value: itemState.value,
476
- shiftKey: event.shiftKey,
477
- anchorValue: highlightedValue,
478
- metaKey: isCtrlOrMetaKey(event)
479
- });
480
- }
481
- });
482
- },
483
- getItemTextProps(props2) {
484
- const itemState = getItemState(props2);
485
- return normalize.element({
486
- ...parts.itemText.attrs,
487
- "data-state": itemState.selected ? "checked" : "unchecked",
488
- "data-disabled": dataAttr(itemState.disabled),
489
- "data-highlighted": dataAttr(itemState.highlighted)
490
- });
491
- },
492
- getItemIndicatorProps(props2) {
493
- const itemState = getItemState(props2);
494
- return normalize.element({
495
- ...parts.itemIndicator.attrs,
496
- "aria-hidden": true,
497
- "data-state": itemState.selected ? "checked" : "unchecked",
498
- hidden: !itemState.selected
499
- });
500
- },
501
- getItemGroupLabelProps(props2) {
502
- const { htmlFor } = props2;
503
- return normalize.element({
504
- ...parts.itemGroupLabel.attrs,
505
- id: getItemGroupLabelId(scope, htmlFor),
506
- dir: prop("dir"),
507
- role: "presentation"
508
- });
509
- },
510
- getItemGroupProps(props2) {
511
- const { id } = props2;
512
- return normalize.element({
513
- ...parts.itemGroup.attrs,
514
- "data-disabled": dataAttr(disabled),
515
- "data-orientation": prop("orientation"),
516
- "data-empty": dataAttr(collection2.size === 0),
517
- id: getItemGroupId(scope, id),
518
- "aria-labelledby": getItemGroupLabelId(scope, id),
519
- role: "group",
520
- dir: prop("dir")
521
- });
522
- },
523
- getContentProps() {
524
- return normalize.element({
525
- dir: prop("dir"),
526
- id: getContentId(scope),
527
- role: "listbox",
528
- ...parts.content.attrs,
529
- "data-activedescendant": ariaActiveDescendant,
530
- "aria-activedescendant": ariaActiveDescendant,
531
- "data-orientation": prop("orientation"),
532
- "aria-multiselectable": computed("multiple") ? true : void 0,
533
- "aria-labelledby": getLabelId(scope),
534
- tabIndex: 0,
535
- "data-layout": layout,
536
- "data-empty": dataAttr(collection2.size === 0),
537
- style: {
538
- "--column-count": isGridCollection(collection2) ? collection2.columnCount : 1
539
- },
540
- onFocus() {
541
- send({ type: "CONTENT.FOCUS" });
542
- },
543
- onBlur() {
544
- send({ type: "CONTENT.BLUR" });
545
- },
546
- onKeyDown(event) {
547
- if (!interactive) return;
548
- if (!isSelfTarget(event)) return;
549
- const shiftKey = event.shiftKey;
550
- const keyMap = {
551
- ArrowUp(event2) {
552
- let nextValue = null;
553
- if (isGridCollection(collection2) && highlightedValue) {
554
- nextValue = collection2.getPreviousRowValue(highlightedValue);
555
- } else if (highlightedValue) {
556
- nextValue = collection2.getPreviousValue(highlightedValue);
557
- }
558
- if (!nextValue && (prop("loopFocus") || !highlightedValue)) {
559
- nextValue = collection2.lastValue;
560
- }
561
- if (!nextValue) return;
562
- event2.preventDefault();
563
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
564
- },
565
- ArrowDown(event2) {
566
- let nextValue = null;
567
- if (isGridCollection(collection2) && highlightedValue) {
568
- nextValue = collection2.getNextRowValue(highlightedValue);
569
- } else if (highlightedValue) {
570
- nextValue = collection2.getNextValue(highlightedValue);
571
- }
572
- if (!nextValue && (prop("loopFocus") || !highlightedValue)) {
573
- nextValue = collection2.firstValue;
574
- }
575
- if (!nextValue) return;
576
- event2.preventDefault();
577
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
578
- },
579
- ArrowLeft() {
580
- if (!isGridCollection(collection2) && prop("orientation") === "vertical") return;
581
- let nextValue = highlightedValue ? collection2.getPreviousValue(highlightedValue) : null;
582
- if (!nextValue && prop("loopFocus")) {
583
- nextValue = collection2.lastValue;
584
- }
585
- if (!nextValue) return;
586
- event.preventDefault();
587
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
588
- },
589
- ArrowRight() {
590
- if (!isGridCollection(collection2) && prop("orientation") === "vertical") return;
591
- let nextValue = highlightedValue ? collection2.getNextValue(highlightedValue) : null;
592
- if (!nextValue && prop("loopFocus")) {
593
- nextValue = collection2.firstValue;
594
- }
595
- if (!nextValue) return;
596
- event.preventDefault();
597
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
598
- },
599
- Home(event2) {
600
- event2.preventDefault();
601
- let nextValue = collection2.firstValue;
602
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
603
- },
604
- End(event2) {
605
- event2.preventDefault();
606
- let nextValue = collection2.lastValue;
607
- send({ type: "NAVIGATE", value: nextValue, shiftKey, anchorValue: highlightedValue });
608
- },
609
- Enter() {
610
- send({ type: "ITEM.CLICK", value: highlightedValue });
611
- },
612
- a(event2) {
613
- if (isCtrlOrMetaKey(event2) && computed("multiple") && !prop("disallowSelectAll")) {
614
- event2.preventDefault();
615
- send({ type: "VALUE.SET", value: collection2.getValues() });
616
- }
617
- },
618
- Space(event2) {
619
- if (isTypingAhead && prop("typeahead")) {
620
- send({ type: "CONTENT.TYPEAHEAD", key: event2.key });
621
- } else {
622
- keyMap.Enter?.(event2);
623
- }
624
- },
625
- Escape(event2) {
626
- if (prop("deselectable") && value.length > 0) {
627
- event2.preventDefault();
628
- event2.stopPropagation();
629
- send({ type: "VALUE.CLEAR" });
630
- }
631
- }
632
- };
633
- const exec = keyMap[getEventKey(event)];
634
- if (exec) {
635
- exec(event);
636
- return;
637
- }
638
- const target = getEventTarget(event);
639
- if (isEditableElement(target)) {
640
- return;
641
- }
642
- if (getByTypeahead.isValidEvent(event) && prop("typeahead")) {
643
- send({ type: "CONTENT.TYPEAHEAD", key: event.key });
644
- event.preventDefault();
645
- }
646
- }
647
- });
648
- }
649
- };
650
- }
651
- var machine = createMachine({
652
- props({ props: props2 }) {
653
- return {
654
- loopFocus: false,
655
- composite: true,
656
- defaultValue: [],
657
- multiple: false,
658
- typeahead: true,
659
- collection: collection.empty(),
660
- orientation: "vertical",
661
- selectionMode: "single",
662
- ...props2
663
- };
664
- },
665
- context({ prop, bindable }) {
666
- return {
667
- value: bindable(() => ({
668
- defaultValue: prop("defaultValue"),
669
- value: prop("value"),
670
- isEqual,
671
- onChange(value) {
672
- const items = prop("collection").findMany(value);
673
- return prop("onValueChange")?.({ value, items });
674
- }
675
- })),
676
- highlightedValue: bindable(() => ({
677
- defaultValue: prop("defaultHighlightedValue") || null,
678
- value: prop("highlightedValue"),
679
- sync: true,
680
- onChange(value) {
681
- prop("onHighlightChange")?.({
682
- highlightedValue: value,
683
- highlightedItem: prop("collection").find(value),
684
- highlightedIndex: prop("collection").indexOf(value)
685
- });
686
- }
687
- })),
688
- highlightedItem: bindable(() => ({
689
- defaultValue: null
690
- })),
691
- selectedItems: bindable(() => {
692
- const value = prop("value") ?? prop("defaultValue") ?? [];
693
- const items = prop("collection").findMany(value);
694
- return { defaultValue: items };
695
- }),
696
- valueAsString: bindable(() => {
697
- const value = prop("value") ?? prop("defaultValue") ?? [];
698
- return { defaultValue: prop("collection").stringifyMany(value) };
699
- }),
700
- focused: bindable(() => ({
701
- defaultValue: false
702
- }))
703
- };
704
- },
705
- refs({ prop }) {
706
- return {
707
- typeahead: { ...getByTypeahead.defaultOptions },
708
- prevCollection: prop("collection")
709
- };
710
- },
711
- computed: {
712
- hasSelectedItems: ({ context }) => context.get("value").length > 0,
713
- isTypingAhead: ({ refs }) => refs.get("typeahead").keysSoFar !== "",
714
- isInteractive: ({ prop }) => !prop("disabled"),
715
- selection: ({ context, prop }) => {
716
- const selection = new Selection(context.get("value"));
717
- selection.selectionMode = prop("selectionMode");
718
- selection.deselectable = !!prop("deselectable");
719
- return selection;
720
- },
721
- multiple: ({ prop }) => prop("selectionMode") === "multiple" || prop("selectionMode") === "extended"
722
- },
723
- initialState() {
724
- return "idle";
725
- },
726
- watch({ context, prop, track, action }) {
727
- track([() => context.get("value").toString()], () => {
728
- action(["syncSelectedItems"]);
729
- });
730
- track([() => context.get("highlightedValue")], () => {
731
- action(["syncHighlightedItem"]);
732
- });
733
- track([() => prop("collection").toString()], () => {
734
- action(["syncCollection"]);
735
- });
736
- },
737
- effects: ["trackFocusVisible"],
738
- on: {
739
- "HIGHLIGHTED_VALUE.SET": {
740
- actions: ["setHighlightedItem"]
741
- },
742
- "ITEM.SELECT": {
743
- actions: ["selectItem"]
744
- },
745
- "ITEM.CLEAR": {
746
- actions: ["clearItem"]
747
- },
748
- "VALUE.SET": {
749
- actions: ["setSelectedItems"]
750
- },
751
- "VALUE.CLEAR": {
752
- actions: ["clearSelectedItems"]
753
- },
754
- "CLEAR.CLICK": {
755
- actions: ["clearSelectedItems"]
756
- }
757
- },
758
- states: {
759
- idle: {
760
- effects: ["scrollToHighlightedItem"],
761
- on: {
762
- "CONTENT.FOCUS": {
763
- actions: ["setFocused"]
764
- },
765
- "CONTENT.BLUR": {
766
- actions: ["clearFocused"]
767
- },
768
- "ITEM.CLICK": {
769
- actions: ["setHighlightedItem", "selectHighlightedItem"]
770
- },
771
- "CONTENT.TYPEAHEAD": {
772
- actions: ["highlightMatchingItem"]
773
- },
774
- "ITEM.POINTER_MOVE": {
775
- actions: ["highlightItem"]
776
- },
777
- "ITEM.POINTER_LEAVE": {
778
- actions: ["clearHighlightedItem"]
779
- },
780
- NAVIGATE: {
781
- actions: ["setHighlightedItem", "selectWithKeyboard"]
782
- }
783
- }
784
- }
785
- },
786
- implementations: {
787
- effects: {
788
- trackFocusVisible: ({ scope }) => {
789
- return trackFocusVisible({ root: scope.getRootNode?.() });
790
- },
791
- scrollToHighlightedItem({ context, prop, scope }) {
792
- const exec = (immediate) => {
793
- const highlightedValue = context.get("highlightedValue");
794
- if (highlightedValue == null) return;
795
- const modality = getInteractionModality();
796
- if (modality !== "keyboard") return;
797
- const itemEl = getItemEl(scope, highlightedValue);
798
- const contentEl2 = getContentEl(scope);
799
- const scrollToIndexFn = prop("scrollToIndexFn");
800
- if (scrollToIndexFn) {
801
- const highlightedIndex = prop("collection").indexOf(highlightedValue);
802
- scrollToIndexFn?.({ index: highlightedIndex, immediate });
803
- return;
804
- }
805
- scrollIntoView(itemEl, { rootEl: contentEl2, block: "nearest" });
806
- };
807
- raf(() => exec(true));
808
- const contentEl = () => getContentEl(scope);
809
- return observeAttributes(contentEl, {
810
- defer: true,
811
- attributes: ["data-activedescendant"],
812
- callback() {
813
- exec(false);
814
- }
815
- });
816
- }
817
- },
818
- actions: {
819
- selectHighlightedItem({ context, prop, event, computed }) {
820
- const value = event.value ?? context.get("highlightedValue");
821
- if (value == null) return;
822
- const selection = computed("selection");
823
- const collection2 = prop("collection");
824
- if (event.shiftKey && computed("multiple") && event.anchorValue) {
825
- const next = selection.extendSelection(collection2, event.anchorValue, value);
826
- invokeOnSelect(selection, next, prop("onSelect"));
827
- context.set("value", Array.from(next));
828
- } else {
829
- const next = selection.select(collection2, value, event.metaKey);
830
- invokeOnSelect(selection, next, prop("onSelect"));
831
- context.set("value", Array.from(next));
832
- }
833
- },
834
- selectWithKeyboard({ context, prop, event, computed }) {
835
- const selection = computed("selection");
836
- const collection2 = prop("collection");
837
- if (event.shiftKey && computed("multiple") && event.anchorValue) {
838
- const next = selection.extendSelection(collection2, event.anchorValue, event.value);
839
- invokeOnSelect(selection, next, prop("onSelect"));
840
- context.set("value", Array.from(next));
841
- return;
842
- }
843
- if (prop("selectOnHighlight")) {
844
- const next = selection.replaceSelection(collection2, event.value);
845
- invokeOnSelect(selection, next, prop("onSelect"));
846
- context.set("value", Array.from(next));
847
- }
848
- },
849
- highlightItem({ context, event }) {
850
- context.set("highlightedValue", event.value);
851
- },
852
- highlightMatchingItem({ context, prop, event, refs }) {
853
- const value = prop("collection").search(event.key, {
854
- state: refs.get("typeahead"),
855
- currentValue: context.get("highlightedValue")
856
- });
857
- if (value == null) return;
858
- context.set("highlightedValue", value);
859
- },
860
- setHighlightedItem({ context, event }) {
861
- context.set("highlightedValue", event.value);
862
- },
863
- clearHighlightedItem({ context }) {
864
- context.set("highlightedValue", null);
865
- },
866
- selectItem({ context, prop, event, computed }) {
867
- const collection2 = prop("collection");
868
- const selection = computed("selection");
869
- const next = selection.select(collection2, event.value);
870
- invokeOnSelect(selection, next, prop("onSelect"));
871
- context.set("value", Array.from(next));
872
- },
873
- clearItem({ context, event, computed }) {
874
- const selection = computed("selection");
875
- const value = selection.deselect(event.value);
876
- context.set("value", Array.from(value));
877
- },
878
- setSelectedItems({ context, event }) {
879
- context.set("value", event.value);
880
- },
881
- clearSelectedItems({ context }) {
882
- context.set("value", []);
883
- },
884
- syncCollection({ context, prop, refs }) {
885
- const collection2 = prop("collection");
886
- const highlightedItem = collection2.find(context.get("highlightedValue"));
887
- if (highlightedItem) context.set("highlightedItem", highlightedItem);
888
- const selectedItems = collection2.findMany(context.get("value"));
889
- context.set("selectedItems", selectedItems);
890
- const valueAsString = collection2.stringifyItems(selectedItems);
891
- context.set("valueAsString", valueAsString);
892
- const highlightedValue = syncHighlightedValue(
893
- collection2,
894
- refs.get("prevCollection"),
895
- context.get("highlightedValue")
896
- );
897
- queueMicrotask(() => {
898
- context.set("highlightedValue", highlightedValue);
899
- refs.set("prevCollection", collection2);
900
- });
901
- },
902
- syncSelectedItems({ context, prop }) {
903
- const collection2 = prop("collection");
904
- const prevSelectedItems = context.get("selectedItems");
905
- const value = context.get("value");
906
- const selectedItems = value.map((value2) => {
907
- const item = prevSelectedItems.find((item2) => collection2.getItemValue(item2) === value2);
908
- return item || collection2.find(value2);
909
- });
910
- context.set("selectedItems", selectedItems);
911
- context.set("valueAsString", collection2.stringifyItems(selectedItems));
912
- },
913
- syncHighlightedItem({ context, prop }) {
914
- const collection2 = prop("collection");
915
- const highlightedValue = context.get("highlightedValue");
916
- const highlightedItem = highlightedValue ? collection2.find(highlightedValue) : null;
917
- context.set("highlightedItem", highlightedItem);
918
- },
919
- setFocused({ context }) {
920
- context.set("focused", true);
921
- },
922
- clearFocused({ context }) {
923
- context.set("focused", false);
924
- }
925
- }
926
- }
927
- });
928
- var diff = (a, b) => {
929
- const result = new Set(a);
930
- for (const item of b) result.delete(item);
931
- return result;
932
- };
933
- function invokeOnSelect(current, next, onSelect) {
934
- const added = diff(next, current);
935
- for (const item of added) {
936
- onSelect?.({ value: item });
937
- }
938
- }
939
- function syncHighlightedValue(collection2, prevCollection, highlightedValue) {
940
- if (highlightedValue != null && !collection2.find(highlightedValue) && prevCollection) {
941
- const startIndex = prevCollection.indexOf(highlightedValue);
942
- const prevItems = [...prevCollection.items];
943
- const items = [...collection2.items];
944
- const diff2 = (prevItems?.length ?? 0) - (items?.length ?? 0);
945
- let index = Math.min(
946
- diff2 > 1 ? Math.max((startIndex ?? 0) - diff2 + 1, 0) : startIndex ?? 0,
947
- (items?.length ?? 0) - 1
948
- );
949
- let newValue = null;
950
- let isReverseSearching = false;
951
- while (index >= 0) {
952
- if (!collection2.getItemDisabled(items[index])) {
953
- newValue = collection2.getItemValue(items[index]);
954
- break;
955
- }
956
- if (index < items.length - 1 && !isReverseSearching) {
957
- index++;
958
- } else {
959
- isReverseSearching = true;
960
- if (index > (startIndex ?? 0)) {
961
- index = startIndex ?? 0;
962
- }
963
- index--;
964
- }
965
- }
966
- return newValue;
967
- }
968
- return null;
969
- }
970
- var props = createProps()([
971
- "collection",
972
- "defaultHighlightedValue",
973
- "defaultValue",
974
- "dir",
975
- "disabled",
976
- "deselectable",
977
- "disallowSelectAll",
978
- "getRootNode",
979
- "highlightedValue",
980
- "id",
981
- "ids",
982
- "loopFocus",
983
- "onHighlightChange",
984
- "onSelect",
985
- "onValueChange",
986
- "orientation",
987
- "scrollToIndexFn",
988
- "selectionMode",
989
- "selectOnHighlight",
990
- "typeahead",
991
- "value"
992
- ]);
993
- createSplitProps(props);
994
- var itemProps = createProps()(["item", "highlightOnHover"]);
995
- createSplitProps(itemProps);
996
- var itemGroupProps = createProps()(["id"]);
997
- createSplitProps(itemGroupProps);
998
- var itemGroupLabelProps = createProps()(["htmlFor"]);
999
- createSplitProps(itemGroupLabelProps);
1000
- var useListbox = (props2) => {
1001
- const id = createUniqueId();
1002
- const locale = useLocaleContext();
1003
- const environment = useEnvironmentContext();
1004
- const machineProps = createMemo(() => ({
1005
- id,
1006
- dir: locale().dir,
1007
- getRootNode: environment().getRootNode,
1008
- ...runIfFn(props2)
1009
- }));
1010
- const service = useMachine(machine, machineProps);
1011
- return createMemo(() => connect(service, normalizeProps));
1012
- };
1013
-
1014
- // src/components/listbox/listbox-root.tsx
1015
- var ListboxRoot = (props2) => {
1016
- const [useListboxProps, localProps] = createSplitProps$1()(props2, ["collection", "defaultHighlightedValue", "defaultValue", "deselectable", "disabled", "disallowSelectAll", "highlightedValue", "id", "ids", "loopFocus", "onHighlightChange", "onSelect", "onValueChange", "orientation", "scrollToIndexFn", "selectionMode", "selectOnHighlight", "typeahead", "value"]);
1017
- const listbox = useListbox(useListboxProps);
1018
- const mergedProps = mergeProps(() => listbox().getRootProps(), localProps);
1019
- return createComponent(ListboxProvider, {
1020
- value: listbox,
1021
- get children() {
1022
- return createComponent(ark.div, mergedProps);
1023
- }
1024
- });
1025
- };
1026
- var ListboxRootProvider = (props2) => {
1027
- const [{
1028
- value: listbox
1029
- }, localProps] = createSplitProps$1()(props2, ["value"]);
1030
- const mergedProps = mergeProps(() => listbox().getRootProps(), localProps);
1031
- return createComponent(ListboxProvider, {
1032
- value: listbox,
1033
- get children() {
1034
- return createComponent(ark.div, mergedProps);
1035
- }
1036
- });
1037
- };
1038
- var ListboxValueText = (props2) => {
1039
- const {
1040
- placeholder,
1041
- ...localprops
1042
- } = props2;
1043
- const listbox = useListboxContext();
1044
- const mergedProps = mergeProps(() => listbox().getValueTextProps(), localprops);
1045
- const resolved = children(() => props2.children);
1046
- return createComponent(ark.span, mergeProps$1(mergedProps, {
1047
- get children() {
1048
- return resolved() || listbox().valueAsString || placeholder;
1049
- }
1050
- }));
1051
- };
1052
-
1053
- // src/components/listbox/listbox.ts
1054
- var listbox_exports = {};
1055
- __export(listbox_exports, {
1056
- Content: () => ListboxContent,
1057
- Context: () => ListboxContext,
1058
- Input: () => ListboxInput,
1059
- Item: () => ListboxItem,
1060
- ItemContext: () => ListboxItemContext,
1061
- ItemGroup: () => ListboxItemGroup,
1062
- ItemGroupLabel: () => ListboxItemGroupLabel,
1063
- ItemIndicator: () => ListboxItemIndicator,
1064
- ItemText: () => ListboxItemText,
1065
- Label: () => ListboxLabel,
1066
- Root: () => ListboxRoot,
1067
- RootProvider: () => ListboxRootProvider,
1068
- ValueText: () => ListboxValueText
1069
- });
1070
-
1071
- export { ListboxContent, ListboxContext, ListboxInput, ListboxItem, ListboxItemContext, ListboxItemGroup, ListboxItemGroupLabel, ListboxItemIndicator, ListboxItemText, ListboxLabel, ListboxRoot, ListboxRootProvider, ListboxValueText, anatomy, listbox_exports, useListbox, useListboxContext, useListboxItemContext };