@ariakit/react-core 0.4.3 → 0.4.5

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 (235) hide show
  1. package/CHANGELOG.md +58 -0
  2. package/cjs/__chunks/{7DQ2LBH2.cjs → 3HMQOCLF.cjs} +23 -5
  3. package/cjs/__chunks/{AJF5DT5A.cjs → AY5J25V7.cjs} +2 -2
  4. package/cjs/__chunks/{HFNM6QV4.cjs → DAOFDKV2.cjs} +1 -1
  5. package/cjs/__chunks/{GYHP7IYG.cjs → DFXPO2ED.cjs} +2 -2
  6. package/cjs/__chunks/{3C4RFBCG.cjs → EYZZO5IT.cjs} +1 -1
  7. package/cjs/__chunks/{3MKOUH5M.cjs → GZ2NNSLV.cjs} +4 -4
  8. package/cjs/__chunks/ISJGSS4S.cjs +16 -0
  9. package/cjs/__chunks/{A356CGND.cjs → JDCTLYQ4.cjs} +1 -1
  10. package/cjs/__chunks/{T5BWR4CB.cjs → KDTFHBKU.cjs} +2 -2
  11. package/cjs/__chunks/{NZSB7HSZ.cjs → LY4LCJM6.cjs} +2 -2
  12. package/cjs/__chunks/{DCTXNU2X.cjs → N43E53E6.cjs} +3 -3
  13. package/cjs/__chunks/{IHFGURUM.cjs → NRPEUNJB.cjs} +2 -2
  14. package/cjs/__chunks/PVLZGFP6.cjs +34 -0
  15. package/cjs/__chunks/{CWS5RZSU.cjs → QJDA4LG6.cjs} +28 -17
  16. package/cjs/__chunks/{NDVZ37O3.cjs → RG6U7KAS.cjs} +22 -4
  17. package/cjs/__chunks/YWAHOWYE.cjs +25 -0
  18. package/cjs/__chunks/{3XXW4Y4D.cjs → Z2VL7JHX.cjs} +2 -2
  19. package/cjs/checkbox/checkbox-check.cjs +2 -2
  20. package/cjs/collection/collection-renderer.d.cts +0 -2
  21. package/cjs/collection/collection-renderer.d.ts +0 -2
  22. package/cjs/combobox/combobox-cancel.cjs +4 -4
  23. package/cjs/combobox/combobox-disclosure.cjs +4 -4
  24. package/cjs/combobox/combobox-item-check.cjs +2 -2
  25. package/cjs/combobox/combobox-item.cjs +19 -9
  26. package/cjs/combobox/combobox-item.d.cts +22 -12
  27. package/cjs/combobox/combobox-item.d.ts +22 -12
  28. package/cjs/combobox/combobox-popover.cjs +41 -16
  29. package/cjs/combobox/combobox-provider.cjs +3 -2
  30. package/cjs/combobox/combobox-store.cjs +6 -2
  31. package/cjs/combobox/combobox-store.d.cts +12 -4
  32. package/cjs/combobox/combobox-store.d.ts +12 -4
  33. package/cjs/combobox/combobox-value.cjs +32 -0
  34. package/cjs/combobox/combobox-value.d.cts +41 -0
  35. package/cjs/combobox/combobox-value.d.ts +41 -0
  36. package/cjs/combobox/combobox.cjs +79 -32
  37. package/cjs/combobox/combobox.d.cts +20 -0
  38. package/cjs/combobox/combobox.d.ts +20 -0
  39. package/cjs/composite/composite-input.cjs +91 -6
  40. package/cjs/composite/composite-input.d.cts +2 -0
  41. package/cjs/composite/composite-input.d.ts +2 -0
  42. package/cjs/composite/composite-item.cjs +3 -3
  43. package/cjs/composite/composite-overflow-disclosure.cjs +3 -3
  44. package/cjs/composite/composite-overflow.cjs +12 -12
  45. package/cjs/composite/composite-renderer.d.cts +0 -2
  46. package/cjs/composite/composite-renderer.d.ts +0 -2
  47. package/cjs/dialog/dialog-backdrop.cjs +3 -3
  48. package/cjs/dialog/dialog-dismiss.cjs +2 -2
  49. package/cjs/dialog/dialog.cjs +11 -11
  50. package/cjs/dialog/dialog.d.cts +4 -0
  51. package/cjs/dialog/dialog.d.ts +4 -0
  52. package/cjs/dialog/utils/disable-tree.cjs +3 -3
  53. package/cjs/dialog/utils/use-prevent-body-scroll.cjs +3 -3
  54. package/cjs/form/form-checkbox.cjs +1 -1
  55. package/cjs/form/form-push.cjs +1 -1
  56. package/cjs/form/form-radio.cjs +4 -4
  57. package/cjs/hovercard/hovercard-disclosure.cjs +1 -1
  58. package/cjs/hovercard/hovercard-dismiss.cjs +4 -4
  59. package/cjs/hovercard/hovercard.cjs +13 -13
  60. package/cjs/menu/menu-button-arrow.cjs +2 -2
  61. package/cjs/menu/menu-dismiss.cjs +4 -4
  62. package/cjs/menu/menu-item-check.cjs +2 -2
  63. package/cjs/menu/menu-item-checkbox.cjs +4 -4
  64. package/cjs/menu/menu-item-radio.cjs +7 -7
  65. package/cjs/menu/menu-item.cjs +4 -4
  66. package/cjs/menu/menu.cjs +14 -14
  67. package/cjs/popover/popover-disclosure-arrow.cjs +2 -2
  68. package/cjs/popover/popover-dismiss.cjs +3 -3
  69. package/cjs/popover/popover.cjs +12 -12
  70. package/cjs/radio/radio.cjs +4 -4
  71. package/cjs/select/select-arrow.cjs +3 -3
  72. package/cjs/select/select-item-check.cjs +2 -2
  73. package/cjs/select/select-item.cjs +4 -4
  74. package/cjs/select/select-popover.cjs +13 -13
  75. package/cjs/select/select-value.d.cts +8 -7
  76. package/cjs/select/select-value.d.ts +8 -7
  77. package/cjs/select/select.cjs +4 -4
  78. package/cjs/tab/tab-panel.cjs +2 -2
  79. package/cjs/tab/tab.cjs +7 -7
  80. package/cjs/tag/tag-context.cjs +25 -0
  81. package/cjs/tag/tag-context.d.cts +21 -0
  82. package/cjs/tag/tag-context.d.ts +21 -0
  83. package/cjs/tag/tag-input.cjs +191 -0
  84. package/cjs/tag/tag-input.d.cts +122 -0
  85. package/cjs/tag/tag-input.d.ts +122 -0
  86. package/cjs/tag/tag-list-label.cjs +56 -0
  87. package/cjs/tag/tag-list-label.d.cts +55 -0
  88. package/cjs/tag/tag-list-label.d.ts +55 -0
  89. package/cjs/tag/tag-list.cjs +141 -0
  90. package/cjs/tag/tag-list.d.cts +58 -0
  91. package/cjs/tag/tag-list.d.ts +58 -0
  92. package/cjs/tag/tag-provider.cjs +26 -0
  93. package/cjs/tag/tag-provider.d.cts +29 -0
  94. package/cjs/tag/tag-provider.d.ts +29 -0
  95. package/cjs/tag/tag-remove.cjs +119 -0
  96. package/cjs/tag/tag-remove.d.cts +67 -0
  97. package/cjs/tag/tag-remove.d.ts +67 -0
  98. package/cjs/tag/tag-store.cjs +15 -0
  99. package/cjs/tag/tag-store.d.cts +49 -0
  100. package/cjs/tag/tag-store.d.ts +49 -0
  101. package/cjs/tag/tag-value.cjs +29 -0
  102. package/cjs/tag/tag-value.d.cts +41 -0
  103. package/cjs/tag/tag-value.d.ts +41 -0
  104. package/cjs/tag/tag-values.cjs +29 -0
  105. package/cjs/tag/tag-values.d.cts +52 -0
  106. package/cjs/tag/tag-values.d.ts +52 -0
  107. package/cjs/tag/tag.cjs +130 -0
  108. package/cjs/tag/tag.d.cts +74 -0
  109. package/cjs/tag/tag.d.ts +74 -0
  110. package/cjs/tag/utils.cjs +8 -0
  111. package/cjs/tag/utils.d.cts +1 -0
  112. package/cjs/tag/utils.d.ts +1 -0
  113. package/cjs/toolbar/toolbar-container.cjs +4 -4
  114. package/cjs/toolbar/toolbar-input.cjs +4 -8
  115. package/cjs/toolbar/toolbar-input.d.cts +3 -2
  116. package/cjs/toolbar/toolbar-input.d.ts +3 -2
  117. package/cjs/toolbar/toolbar-item.cjs +4 -4
  118. package/cjs/tooltip/tooltip.cjs +14 -14
  119. package/combobox/combobox-value/package.json +8 -0
  120. package/esm/__chunks/{LABIXQLW.js → 44PDY2W5.js} +1 -1
  121. package/esm/__chunks/{FYNSL2D5.js → 5H3YXAUC.js} +1 -1
  122. package/esm/__chunks/{6VDNHSLX.js → 65LF6MEO.js} +2 -2
  123. package/esm/__chunks/{X3V2DT2U.js → 6YVAEELE.js} +1 -1
  124. package/esm/__chunks/{JCOBPKEI.js → BY6P32UK.js} +1 -1
  125. package/esm/__chunks/{ZFEEEZVE.js → DLLQM6DZ.js} +22 -4
  126. package/esm/__chunks/{NN4HLGKS.js → F2RFUFO2.js} +1 -1
  127. package/esm/__chunks/{NQ4PTILT.js → FGHVVLPU.js} +29 -18
  128. package/esm/__chunks/{2VWKZYYT.js → H5N72W37.js} +1 -1
  129. package/esm/__chunks/L7IM35RU.js +16 -0
  130. package/esm/__chunks/{HW63KLP5.js → M354SEUF.js} +1 -1
  131. package/esm/__chunks/{RAKW656I.js → Q4PZFBSW.js} +1 -1
  132. package/esm/__chunks/QNNHZL3W.js +25 -0
  133. package/esm/__chunks/{C5HA76JU.js → QZJOXZKA.js} +1 -1
  134. package/esm/__chunks/{XK6CE2M5.js → UKDZLPKH.js} +1 -1
  135. package/esm/__chunks/{ONUY4D7O.js → VGORKDMQ.js} +26 -8
  136. package/esm/__chunks/WYDDZRWN.js +34 -0
  137. package/esm/checkbox/checkbox-check.js +1 -1
  138. package/esm/collection/collection-renderer.d.ts +0 -2
  139. package/esm/combobox/combobox-cancel.js +4 -4
  140. package/esm/combobox/combobox-disclosure.js +4 -4
  141. package/esm/combobox/combobox-item-check.js +1 -1
  142. package/esm/combobox/combobox-item.d.ts +22 -12
  143. package/esm/combobox/combobox-item.js +19 -9
  144. package/esm/combobox/combobox-popover.js +40 -15
  145. package/esm/combobox/combobox-provider.js +2 -1
  146. package/esm/combobox/combobox-store.d.ts +12 -4
  147. package/esm/combobox/combobox-store.js +5 -1
  148. package/esm/combobox/combobox-value.d.ts +41 -0
  149. package/esm/combobox/combobox-value.js +32 -0
  150. package/esm/combobox/combobox.d.ts +20 -0
  151. package/esm/combobox/combobox.js +80 -33
  152. package/esm/composite/composite-input.d.ts +2 -0
  153. package/esm/composite/composite-input.js +92 -7
  154. package/esm/composite/composite-item.js +2 -2
  155. package/esm/composite/composite-overflow-disclosure.js +2 -2
  156. package/esm/composite/composite-overflow.js +11 -11
  157. package/esm/composite/composite-renderer.d.ts +0 -2
  158. package/esm/dialog/dialog-backdrop.js +2 -2
  159. package/esm/dialog/dialog-dismiss.js +1 -1
  160. package/esm/dialog/dialog.d.ts +4 -0
  161. package/esm/dialog/dialog.js +10 -10
  162. package/esm/dialog/utils/disable-tree.js +2 -2
  163. package/esm/dialog/utils/use-prevent-body-scroll.js +2 -2
  164. package/esm/form/form-checkbox.js +1 -1
  165. package/esm/form/form-push.js +1 -1
  166. package/esm/form/form-radio.js +3 -3
  167. package/esm/hovercard/hovercard-disclosure.js +1 -1
  168. package/esm/hovercard/hovercard-dismiss.js +3 -3
  169. package/esm/hovercard/hovercard.js +12 -12
  170. package/esm/menu/menu-button-arrow.js +1 -1
  171. package/esm/menu/menu-dismiss.js +3 -3
  172. package/esm/menu/menu-item-check.js +1 -1
  173. package/esm/menu/menu-item-checkbox.js +3 -3
  174. package/esm/menu/menu-item-radio.js +5 -5
  175. package/esm/menu/menu-item.js +3 -3
  176. package/esm/menu/menu.js +12 -12
  177. package/esm/popover/popover-disclosure-arrow.js +1 -1
  178. package/esm/popover/popover-dismiss.js +2 -2
  179. package/esm/popover/popover.js +11 -11
  180. package/esm/radio/radio.js +3 -3
  181. package/esm/select/select-arrow.js +2 -2
  182. package/esm/select/select-item-check.js +1 -1
  183. package/esm/select/select-item.js +4 -4
  184. package/esm/select/select-popover.js +11 -11
  185. package/esm/select/select-value.d.ts +8 -7
  186. package/esm/select/select.js +3 -3
  187. package/esm/tab/tab-panel.js +3 -3
  188. package/esm/tab/tab.js +5 -5
  189. package/esm/tag/tag-context.d.ts +21 -0
  190. package/esm/tag/tag-context.js +25 -0
  191. package/esm/tag/tag-input.d.ts +122 -0
  192. package/esm/tag/tag-input.js +191 -0
  193. package/esm/tag/tag-list-label.d.ts +55 -0
  194. package/esm/tag/tag-list-label.js +56 -0
  195. package/esm/tag/tag-list.d.ts +58 -0
  196. package/esm/tag/tag-list.js +141 -0
  197. package/esm/tag/tag-provider.d.ts +29 -0
  198. package/esm/tag/tag-provider.js +26 -0
  199. package/esm/tag/tag-remove.d.ts +67 -0
  200. package/esm/tag/tag-remove.js +119 -0
  201. package/esm/tag/tag-store.d.ts +49 -0
  202. package/esm/tag/tag-store.js +15 -0
  203. package/esm/tag/tag-value.d.ts +41 -0
  204. package/esm/tag/tag-value.js +29 -0
  205. package/esm/tag/tag-values.d.ts +52 -0
  206. package/esm/tag/tag-values.js +29 -0
  207. package/esm/tag/tag.d.ts +74 -0
  208. package/esm/tag/tag.js +130 -0
  209. package/esm/tag/utils.d.ts +1 -0
  210. package/esm/tag/utils.js +8 -0
  211. package/esm/toolbar/toolbar-container.js +3 -3
  212. package/esm/toolbar/toolbar-input.d.ts +3 -2
  213. package/esm/toolbar/toolbar-input.js +3 -7
  214. package/esm/toolbar/toolbar-item.js +3 -3
  215. package/esm/tooltip/tooltip.js +12 -12
  216. package/package.json +86 -2
  217. package/tag/tag/package.json +8 -0
  218. package/tag/tag-context/package.json +8 -0
  219. package/tag/tag-input/package.json +8 -0
  220. package/tag/tag-list/package.json +8 -0
  221. package/tag/tag-list-label/package.json +8 -0
  222. package/tag/tag-provider/package.json +8 -0
  223. package/tag/tag-remove/package.json +8 -0
  224. package/tag/tag-store/package.json +8 -0
  225. package/tag/tag-value/package.json +8 -0
  226. package/tag/tag-values/package.json +8 -0
  227. package/tag/utils/package.json +8 -0
  228. package/cjs/__chunks/WGZQRLXV.cjs +0 -84
  229. package/esm/__chunks/RPGNBKKU.js +0 -84
  230. package/cjs/__chunks/{37BRXQN7.cjs → BX2QEIBH.cjs} +3 -3
  231. package/cjs/__chunks/{PVYTX5U5.cjs → SL55T4ZB.cjs} +2 -2
  232. package/cjs/__chunks/{TSEXNK3K.cjs → VR6GCLOV.cjs} +2 -2
  233. package/esm/__chunks/{PTPUIM7N.js → 3TEK3C5Q.js} +3 -3
  234. package/esm/__chunks/{U2L67A6K.js → BC72XE6E.js} +3 -3
  235. package/esm/__chunks/{GOXKZAQI.js → CMFBAHKI.js} +3 -3
@@ -143,6 +143,26 @@ export interface ComboboxOptions<T extends ElementType = TagName> extends Compos
143
143
  * value.
144
144
  */
145
145
  blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
146
+ /**
147
+ * Specifies the minimum character count the input value should have before
148
+ * the [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
149
+ * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
150
+ * components are displayed.
151
+ *
152
+ * The [`showOnChange`](https://ariakit.org/reference/combobox#showonchange),
153
+ * [`showOnClick`](https://ariakit.org/reference/combobox#showonclick), and
154
+ * [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress)
155
+ * props allow you to tailor the behavior for each unique event.
156
+ * @default 0
157
+ * @example
158
+ * In the following example, the combobox list will be shown when the input
159
+ * value has at least one character. However, if the user presses the arrow
160
+ * keys, the list will be shown regardless of the input value length.
161
+ * ```jsx
162
+ * <Combobox showMinLength={1} showOnKeyPress />
163
+ * ```
164
+ */
165
+ showMinLength?: number;
146
166
  /**
147
167
  * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
148
168
  * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
@@ -1,10 +1,10 @@
1
1
  "use client";
2
- import {
3
- usePopoverAnchor
4
- } from "../__chunks/DYQUE3V3.js";
5
2
  import {
6
3
  useComboboxProviderContext
7
4
  } from "../__chunks/N4X7J4OQ.js";
5
+ import {
6
+ usePopoverAnchor
7
+ } from "../__chunks/DYQUE3V3.js";
8
8
  import {
9
9
  useComposite
10
10
  } from "../__chunks/CDZXDIC7.js";
@@ -38,11 +38,12 @@ import {
38
38
  __spreadValues
39
39
  } from "../__chunks/4R3V3JGP.js";
40
40
 
41
- // src/combobox/combobox.ts
41
+ // src/combobox/combobox.tsx
42
42
  import { useEffect, useMemo, useRef, useState } from "react";
43
43
  import {
44
44
  getPopupRole,
45
45
  getScrollingElement,
46
+ getTextboxSelection,
46
47
  setSelectionRange
47
48
  } from "@ariakit/core/utils/dom";
48
49
  import {
@@ -53,9 +54,10 @@ import { hasFocus } from "@ariakit/core/utils/focus";
53
54
  import {
54
55
  invariant,
55
56
  isFalsyBooleanCallback,
57
+ noop,
56
58
  normalizeString
57
59
  } from "@ariakit/core/utils/misc";
58
- import { flushSync } from "react-dom";
60
+ import { sync } from "@ariakit/core/utils/store";
59
61
  var TagName = "input";
60
62
  function isFirstItemAutoSelected(items, activeValue, autoSelect) {
61
63
  if (!autoSelect)
@@ -93,14 +95,15 @@ var useCombobox = createHook(
93
95
  focusable = true,
94
96
  autoSelect: autoSelectProp = false,
95
97
  getAutoSelectId,
96
- showOnChange = true,
97
- setValueOnChange = true,
98
- showOnMouseDown = true,
98
+ setValueOnChange,
99
+ showMinLength = 0,
100
+ showOnChange,
101
+ showOnMouseDown,
99
102
  showOnClick = showOnMouseDown,
103
+ showOnKeyDown,
104
+ showOnKeyPress = showOnKeyDown,
100
105
  blurActiveItemOnClick,
101
106
  setValueOnClick = true,
102
- showOnKeyDown = true,
103
- showOnKeyPress = showOnKeyDown,
104
107
  moveOnKeyPress = true,
105
108
  autoComplete = "list"
106
109
  } = _b, props = __objRest(_b, [
@@ -108,14 +111,15 @@ var useCombobox = createHook(
108
111
  "focusable",
109
112
  "autoSelect",
110
113
  "getAutoSelectId",
111
- "showOnChange",
112
114
  "setValueOnChange",
115
+ "showMinLength",
116
+ "showOnChange",
113
117
  "showOnMouseDown",
114
118
  "showOnClick",
115
- "blurActiveItemOnClick",
116
- "setValueOnClick",
117
119
  "showOnKeyDown",
118
120
  "showOnKeyPress",
121
+ "blurActiveItemOnClick",
122
+ "setValueOnClick",
119
123
  "moveOnKeyPress",
120
124
  "autoComplete"
121
125
  ]);
@@ -140,9 +144,26 @@ var useCombobox = createHook(
140
144
  setCanInline(true);
141
145
  }, [inline]);
142
146
  const storeValue = store.useState("value");
143
- const activeValue = store.useState(
144
- (state) => inline && canInline ? state.activeValue : void 0
145
- );
147
+ const prevSelectedValueRef = useRef();
148
+ useEffect(() => {
149
+ return sync(store, ["selectedValue", "activeId"], (_, prev) => {
150
+ prevSelectedValueRef.current = prev.selectedValue;
151
+ });
152
+ }, []);
153
+ const inlineActiveValue = store.useState((state) => {
154
+ var _a2;
155
+ if (!inline)
156
+ return;
157
+ if (!canInline)
158
+ return;
159
+ if (state.activeValue && Array.isArray(state.selectedValue)) {
160
+ if (state.selectedValue.includes(state.activeValue))
161
+ return;
162
+ if ((_a2 = prevSelectedValueRef.current) == null ? void 0 : _a2.includes(state.activeValue))
163
+ return;
164
+ }
165
+ return state.activeValue;
166
+ });
146
167
  const items = store.useState("renderedItems");
147
168
  const open = store.useState("open");
148
169
  const contentElement = store.useState("contentElement");
@@ -153,18 +174,18 @@ var useCombobox = createHook(
153
174
  return storeValue;
154
175
  const firstItemAutoSelected = isFirstItemAutoSelected(
155
176
  items,
156
- activeValue,
177
+ inlineActiveValue,
157
178
  autoSelect
158
179
  );
159
180
  if (firstItemAutoSelected) {
160
- if (hasCompletionString(storeValue, activeValue)) {
161
- const slice = (activeValue == null ? void 0 : activeValue.slice(storeValue.length)) || "";
181
+ if (hasCompletionString(storeValue, inlineActiveValue)) {
182
+ const slice = (inlineActiveValue == null ? void 0 : inlineActiveValue.slice(storeValue.length)) || "";
162
183
  return storeValue + slice;
163
184
  }
164
185
  return storeValue;
165
186
  }
166
- return activeValue || storeValue;
167
- }, [inline, canInline, items, activeValue, autoSelect, storeValue]);
187
+ return inlineActiveValue || storeValue;
188
+ }, [inline, canInline, items, inlineActiveValue, autoSelect, storeValue]);
168
189
  useEffect(() => {
169
190
  const element = ref.current;
170
191
  if (!element)
@@ -180,28 +201,43 @@ var useCombobox = createHook(
180
201
  return;
181
202
  if (!canInline)
182
203
  return;
183
- if (!activeValue)
204
+ if (!inlineActiveValue)
184
205
  return;
185
206
  const firstItemAutoSelected = isFirstItemAutoSelected(
186
207
  items,
187
- activeValue,
208
+ inlineActiveValue,
188
209
  autoSelect
189
210
  );
190
211
  if (!firstItemAutoSelected)
191
212
  return;
192
- if (!hasCompletionString(storeValue, activeValue))
213
+ if (!hasCompletionString(storeValue, inlineActiveValue))
193
214
  return;
215
+ let cleanup = noop;
194
216
  queueMicrotask(() => {
195
217
  const element = ref.current;
196
218
  if (!element)
197
219
  return;
198
- setSelectionRange(element, storeValue.length, activeValue.length);
220
+ const { start: prevStart, end: prevEnd } = getTextboxSelection(element);
221
+ const nextStart = storeValue.length;
222
+ const nextEnd = inlineActiveValue.length;
223
+ setSelectionRange(element, nextStart, nextEnd);
224
+ cleanup = () => {
225
+ if (!hasFocus(element))
226
+ return;
227
+ const { start, end } = getTextboxSelection(element);
228
+ if (start !== nextStart)
229
+ return;
230
+ if (end !== nextEnd)
231
+ return;
232
+ setSelectionRange(element, prevStart, prevEnd);
233
+ };
199
234
  });
235
+ return () => cleanup();
200
236
  }, [
201
237
  valueUpdated,
202
238
  inline,
203
239
  canInline,
204
- activeValue,
240
+ inlineActiveValue,
205
241
  items,
206
242
  autoSelect,
207
243
  storeValue
@@ -312,16 +348,25 @@ var useCombobox = createHook(
312
348
  elements.forEach((el) => el.removeEventListener("focusout", onBlur2));
313
349
  };
314
350
  }, [inline, contentElement, store, value]);
351
+ const canShow = (event) => {
352
+ const currentTarget = event.currentTarget;
353
+ return currentTarget.value.length >= showMinLength;
354
+ };
315
355
  const onChangeProp = props.onChange;
316
- const showOnChangeProp = useBooleanEvent(showOnChange);
317
- const setValueOnChangeProp = useBooleanEvent(setValueOnChange);
356
+ const showOnChangeProp = useBooleanEvent(showOnChange != null ? showOnChange : canShow);
357
+ const setValueOnChangeProp = useBooleanEvent(
358
+ // If the combobox is combined with tags, the value will be set by the tag
359
+ // input component.
360
+ setValueOnChange != null ? setValueOnChange : !store.tag
361
+ );
318
362
  const onChange = useEvent((event) => {
319
363
  onChangeProp == null ? void 0 : onChangeProp(event);
320
364
  if (event.defaultPrevented)
321
365
  return;
322
366
  if (!store)
323
367
  return;
324
- const { value: value2, selectionStart, selectionEnd } = event.target;
368
+ const currentTarget = event.currentTarget;
369
+ const { value: value2, selectionStart, selectionEnd } = currentTarget;
325
370
  const nativeEvent = event.nativeEvent;
326
371
  canAutoSelectRef.current = true;
327
372
  if (isInputEvent(nativeEvent)) {
@@ -337,8 +382,10 @@ var useCombobox = createHook(
337
382
  }
338
383
  if (setValueOnChangeProp(event)) {
339
384
  const isSameValue = value2 === store.getState().value;
340
- flushSync(() => store == null ? void 0 : store.setValue(value2));
341
- setSelectionRange(event.currentTarget, selectionStart, selectionEnd);
385
+ store.setValue(value2);
386
+ queueMicrotask(() => {
387
+ setSelectionRange(currentTarget, selectionStart, selectionEnd);
388
+ });
342
389
  if (inline && autoSelect && isSameValue) {
343
390
  forceValueUpdate();
344
391
  }
@@ -366,7 +413,7 @@ var useCombobox = createHook(
366
413
  blurActiveItemOnClick != null ? blurActiveItemOnClick : () => !!(store == null ? void 0 : store.getState().includesBaseElement)
367
414
  );
368
415
  const setValueOnClickProp = useBooleanEvent(setValueOnClick);
369
- const showOnClickProp = useBooleanEvent(showOnClick);
416
+ const showOnClickProp = useBooleanEvent(showOnClick != null ? showOnClick : canShow);
370
417
  const onMouseDown = useEvent((event) => {
371
418
  onMouseDownProp == null ? void 0 : onMouseDownProp(event);
372
419
  if (event.defaultPrevented)
@@ -388,7 +435,7 @@ var useCombobox = createHook(
388
435
  }
389
436
  });
390
437
  const onKeyDownProp = props.onKeyDown;
391
- const showOnKeyPressProp = useBooleanEvent(showOnKeyPress);
438
+ const showOnKeyPressProp = useBooleanEvent(showOnKeyPress != null ? showOnKeyPress : canShow);
392
439
  const onKeyDown = useEvent((event) => {
393
440
  onKeyDownProp == null ? void 0 : onKeyDownProp(event);
394
441
  if (!event.repeat) {
@@ -8,6 +8,7 @@ type TagName = typeof TagName;
8
8
  * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
9
9
  * or any other component/hook that uses `CompositeItem` underneath.
10
10
  * @see https://ariakit.org/components/composite
11
+ * @deprecated Use `useCompositeItem` instead.
11
12
  * @example
12
13
  * ```jsx
13
14
  * const store = useCompositeStore();
@@ -24,6 +25,7 @@ export declare const useCompositeInput: import("../utils/types.js").Hook<"input"
24
25
  * or a component that uses
25
26
  * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
26
27
  * @see https://ariakit.org/components/composite
28
+ * @deprecated Use `<CompositeItem render={<input />}>` instead.
27
29
  * @example
28
30
  * ```jsx {3}
29
31
  * <CompositeProvider>
@@ -1,13 +1,98 @@
1
1
  "use client";
2
2
  import {
3
- CompositeInput,
4
- useCompositeInput
5
- } from "../__chunks/RPGNBKKU.js";
6
- import "../__chunks/3IEDWLST.js";
7
- import "../__chunks/GUCZNEAD.js";
8
- import "../__chunks/WOWUAP42.js";
3
+ selectTextField
4
+ } from "../__chunks/3IEDWLST.js";
5
+ import {
6
+ createElement,
7
+ createHook,
8
+ forwardRef,
9
+ memo
10
+ } from "../__chunks/GUCZNEAD.js";
11
+ import {
12
+ useEvent
13
+ } from "../__chunks/WOWUAP42.js";
9
14
  import "../__chunks/XM66DUTO.js";
10
- import "../__chunks/4R3V3JGP.js";
15
+ import {
16
+ __objRest,
17
+ __spreadProps,
18
+ __spreadValues
19
+ } from "../__chunks/4R3V3JGP.js";
20
+
21
+ // src/composite/composite-input.ts
22
+ import { useEffect } from "react";
23
+ import {
24
+ getDocument,
25
+ getTextboxSelection,
26
+ isTextField
27
+ } from "@ariakit/core/utils/dom";
28
+ import { removeUndefinedValues } from "@ariakit/core/utils/misc";
29
+ var TagName = "input";
30
+ function getValueLength(element) {
31
+ if (isTextField(element)) {
32
+ return element.value.length;
33
+ } else if (element.isContentEditable) {
34
+ const range = getDocument(element).createRange();
35
+ range.selectNodeContents(element);
36
+ return range.toString().length;
37
+ }
38
+ return 0;
39
+ }
40
+ var useCompositeInput = createHook(
41
+ function useCompositeInput2(_a) {
42
+ var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
43
+ const onKeyDownCaptureProp = props.onKeyDownCapture;
44
+ if (process.env.NODE_ENV !== "production") {
45
+ useEffect(() => {
46
+ console.warn(
47
+ "CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead."
48
+ );
49
+ }, []);
50
+ }
51
+ const onKeyDownCapture = useEvent((event) => {
52
+ onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
53
+ if (event.defaultPrevented)
54
+ return;
55
+ const element = event.currentTarget;
56
+ if (!element.isContentEditable && !isTextField(element))
57
+ return;
58
+ const selection = getTextboxSelection(element);
59
+ const { orientation } = (store == null ? void 0 : store.getState()) || {};
60
+ const isHorizontal = orientation !== "vertical";
61
+ const isVertical = orientation !== "horizontal";
62
+ const isLeft = isHorizontal && event.key === "ArrowLeft";
63
+ const isRight = isHorizontal && event.key === "ArrowRight";
64
+ const isUp = isVertical && event.key === "ArrowUp";
65
+ const isDown = isVertical && event.key === "ArrowDown";
66
+ if (isRight || isDown) {
67
+ if (selection.end !== getValueLength(element)) {
68
+ event.stopPropagation();
69
+ }
70
+ } else if (isLeft || isUp) {
71
+ if (selection.start !== 0) {
72
+ event.stopPropagation();
73
+ }
74
+ }
75
+ });
76
+ const onFocusProp = props.onFocus;
77
+ const onFocus = useEvent((event) => {
78
+ onFocusProp == null ? void 0 : onFocusProp(event);
79
+ if (event.defaultPrevented)
80
+ return;
81
+ selectTextField(event.currentTarget);
82
+ });
83
+ props = __spreadProps(__spreadValues({}, props), {
84
+ onKeyDownCapture,
85
+ onFocus
86
+ });
87
+ return removeUndefinedValues(props);
88
+ }
89
+ );
90
+ var CompositeInput = memo(
91
+ forwardRef(function CompositeInput2(props) {
92
+ const htmlProps = useCompositeInput(props);
93
+ return createElement(TagName, htmlProps);
94
+ })
95
+ );
11
96
  export {
12
97
  CompositeInput,
13
98
  useCompositeInput
@@ -2,9 +2,9 @@
2
2
  import {
3
3
  CompositeItem,
4
4
  useCompositeItem
5
- } from "../__chunks/ONUY4D7O.js";
6
- import "../__chunks/PJ7ERAIM.js";
5
+ } from "../__chunks/VGORKDMQ.js";
7
6
  import "../__chunks/IFMAUEA7.js";
7
+ import "../__chunks/PJ7ERAIM.js";
8
8
  import "../__chunks/3IEDWLST.js";
9
9
  import "../__chunks/QFI3MCMR.js";
10
10
  import "../__chunks/6LTHW2TQ.js";
@@ -8,9 +8,9 @@ import "../__chunks/DYQUE3V3.js";
8
8
  import "../__chunks/CKAOM5LG.js";
9
9
  import {
10
10
  useCompositeItem
11
- } from "../__chunks/ONUY4D7O.js";
12
- import "../__chunks/PJ7ERAIM.js";
11
+ } from "../__chunks/VGORKDMQ.js";
13
12
  import "../__chunks/IFMAUEA7.js";
13
+ import "../__chunks/PJ7ERAIM.js";
14
14
  import "../__chunks/3IEDWLST.js";
15
15
  import "../__chunks/QFI3MCMR.js";
16
16
  import "../__chunks/6LTHW2TQ.js";
@@ -1,30 +1,30 @@
1
1
  "use client";
2
2
  import {
3
3
  usePopover
4
- } from "../__chunks/X3V2DT2U.js";
5
- import "../__chunks/NQ4PTILT.js";
6
- import "../__chunks/GOXKZAQI.js";
7
- import "../__chunks/6GXEOXGT.js";
8
- import "../__chunks/PTPUIM7N.js";
9
- import "../__chunks/4ZRXV5C7.js";
10
- import "../__chunks/U2L67A6K.js";
11
- import "../__chunks/4KKLZMKS.js";
4
+ } from "../__chunks/6YVAEELE.js";
5
+ import "../__chunks/FGHVVLPU.js";
6
+ import "../__chunks/CMFBAHKI.js";
12
7
  import "../__chunks/HSFE2URL.js";
13
8
  import "../__chunks/H2NVVTJB.js";
9
+ import "../__chunks/6GXEOXGT.js";
14
10
  import "../__chunks/YNKDLCEK.js";
11
+ import "../__chunks/3TEK3C5Q.js";
12
+ import "../__chunks/4ZRXV5C7.js";
13
+ import "../__chunks/677M2CI3.js";
15
14
  import "../__chunks/MKDDWKFK.js";
16
15
  import "../__chunks/5QL6BP6J.js";
17
16
  import "../__chunks/OOBDFMJL.js";
17
+ import "../__chunks/BC72XE6E.js";
18
18
  import "../__chunks/53CQGCDZ.js";
19
- import "../__chunks/677M2CI3.js";
19
+ import "../__chunks/4KKLZMKS.js";
20
20
  import "../__chunks/UHSH3H5I.js";
21
21
  import "../__chunks/UYRJLDVS.js";
22
+ import "../__chunks/XPF5GU3Q.js";
22
23
  import "../__chunks/JPQNKTGF.js";
23
24
  import "../__chunks/LQTCWTYB.js";
24
25
  import "../__chunks/7452U3HH.js";
25
- import "../__chunks/XPF5GU3Q.js";
26
- import "../__chunks/4MFOHMLS.js";
27
26
  import "../__chunks/KCMTTTFR.js";
27
+ import "../__chunks/4MFOHMLS.js";
28
28
  import "../__chunks/5B3U64HV.js";
29
29
  import "../__chunks/IWHI6Y45.js";
30
30
  import "../__chunks/RG6J4TID.js";
@@ -265,9 +265,7 @@ export declare function useCompositeRenderer<T extends Item = any>({ store, orie
265
265
  onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
266
266
  onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
267
267
  onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
268
- onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
269
268
  onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
270
- onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
271
269
  onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
272
270
  onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
273
271
  onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  import {
3
3
  DialogBackdrop
4
- } from "../__chunks/GOXKZAQI.js";
4
+ } from "../__chunks/CMFBAHKI.js";
5
5
  import "../__chunks/YNKDLCEK.js";
6
6
  import "../__chunks/MKDDWKFK.js";
7
7
  import "../__chunks/5QL6BP6J.js";
8
8
  import "../__chunks/53CQGCDZ.js";
9
- import "../__chunks/4MFOHMLS.js";
10
9
  import "../__chunks/KCMTTTFR.js";
10
+ import "../__chunks/4MFOHMLS.js";
11
11
  import "../__chunks/IWHI6Y45.js";
12
12
  import "../__chunks/RG6J4TID.js";
13
13
  import "../__chunks/GUCZNEAD.js";
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  DialogDismiss,
4
4
  useDialogDismiss
5
- } from "../__chunks/JCOBPKEI.js";
5
+ } from "../__chunks/BY6P32UK.js";
6
6
  import "../__chunks/CKAOM5LG.js";
7
7
  import "../__chunks/PJ7ERAIM.js";
8
8
  import "../__chunks/IWHI6Y45.js";
@@ -254,6 +254,10 @@ export interface DialogOptions<T extends ElementType = TagName> extends Focusabl
254
254
  * will be focused again.
255
255
  */
256
256
  finalFocus?: HTMLElement | RefObject<HTMLElement> | null;
257
+ /**
258
+ * @private
259
+ */
260
+ unstable_treeSnapshotKey?: string | number | boolean | null;
257
261
  }
258
262
  export type DialogProps<T extends ElementType = TagName> = Props<T, DialogOptions<T>>;
259
263
  export {};
@@ -3,29 +3,29 @@ import {
3
3
  Dialog,
4
4
  createDialogComponent,
5
5
  useDialog
6
- } from "../__chunks/NQ4PTILT.js";
7
- import "../__chunks/GOXKZAQI.js";
8
- import "../__chunks/6GXEOXGT.js";
9
- import "../__chunks/PTPUIM7N.js";
10
- import "../__chunks/4ZRXV5C7.js";
11
- import "../__chunks/U2L67A6K.js";
12
- import "../__chunks/4KKLZMKS.js";
6
+ } from "../__chunks/FGHVVLPU.js";
7
+ import "../__chunks/CMFBAHKI.js";
13
8
  import "../__chunks/HSFE2URL.js";
14
9
  import "../__chunks/H2NVVTJB.js";
10
+ import "../__chunks/6GXEOXGT.js";
15
11
  import "../__chunks/YNKDLCEK.js";
12
+ import "../__chunks/3TEK3C5Q.js";
13
+ import "../__chunks/4ZRXV5C7.js";
14
+ import "../__chunks/677M2CI3.js";
16
15
  import "../__chunks/MKDDWKFK.js";
17
16
  import "../__chunks/5QL6BP6J.js";
18
17
  import "../__chunks/OOBDFMJL.js";
18
+ import "../__chunks/BC72XE6E.js";
19
19
  import "../__chunks/53CQGCDZ.js";
20
- import "../__chunks/677M2CI3.js";
20
+ import "../__chunks/4KKLZMKS.js";
21
21
  import "../__chunks/UHSH3H5I.js";
22
22
  import "../__chunks/UYRJLDVS.js";
23
+ import "../__chunks/XPF5GU3Q.js";
23
24
  import "../__chunks/JPQNKTGF.js";
24
25
  import "../__chunks/LQTCWTYB.js";
25
26
  import "../__chunks/7452U3HH.js";
26
- import "../__chunks/XPF5GU3Q.js";
27
- import "../__chunks/4MFOHMLS.js";
28
27
  import "../__chunks/KCMTTTFR.js";
28
+ import "../__chunks/4MFOHMLS.js";
29
29
  import "../__chunks/IWHI6Y45.js";
30
30
  import "../__chunks/RG6J4TID.js";
31
31
  import "../__chunks/7JCFLN3D.js";
@@ -2,12 +2,12 @@
2
2
  import {
3
3
  disableTree,
4
4
  disableTreeOutside
5
- } from "../../__chunks/PTPUIM7N.js";
5
+ } from "../../__chunks/3TEK3C5Q.js";
6
6
  import "../../__chunks/4ZRXV5C7.js";
7
+ import "../../__chunks/677M2CI3.js";
7
8
  import "../../__chunks/MKDDWKFK.js";
8
9
  import "../../__chunks/5QL6BP6J.js";
9
10
  import "../../__chunks/53CQGCDZ.js";
10
- import "../../__chunks/677M2CI3.js";
11
11
  import "../../__chunks/4R3V3JGP.js";
12
12
  export {
13
13
  disableTree,
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  usePreventBodyScroll
4
- } from "../../__chunks/U2L67A6K.js";
5
- import "../../__chunks/4KKLZMKS.js";
4
+ } from "../../__chunks/BC72XE6E.js";
6
5
  import "../../__chunks/53CQGCDZ.js";
6
+ import "../../__chunks/4KKLZMKS.js";
7
7
  import "../../__chunks/WOWUAP42.js";
8
8
  import "../../__chunks/XM66DUTO.js";
9
9
  import "../../__chunks/4R3V3JGP.js";
@@ -13,8 +13,8 @@ import {
13
13
  } from "../__chunks/6TPWTXXA.js";
14
14
  import "../__chunks/ZKBA2XH4.js";
15
15
  import "../__chunks/6XBVQI3K.js";
16
- import "../__chunks/PJ7ERAIM.js";
17
16
  import "../__chunks/IFMAUEA7.js";
17
+ import "../__chunks/PJ7ERAIM.js";
18
18
  import "../__chunks/6LTHW2TQ.js";
19
19
  import "../__chunks/7JCFLN3D.js";
20
20
  import "../__chunks/SHA3WOPI.js";
@@ -5,10 +5,10 @@ import {
5
5
  import {
6
6
  useButton
7
7
  } from "../__chunks/CKAOM5LG.js";
8
- import "../__chunks/PJ7ERAIM.js";
9
8
  import {
10
9
  useCollectionItem
11
10
  } from "../__chunks/IFMAUEA7.js";
11
+ import "../__chunks/PJ7ERAIM.js";
12
12
  import "../__chunks/6LTHW2TQ.js";
13
13
  import "../__chunks/7JCFLN3D.js";
14
14
  import "../__chunks/SHA3WOPI.js";
@@ -7,11 +7,11 @@ import {
7
7
  } from "../__chunks/HQB73KOV.js";
8
8
  import {
9
9
  useRadio
10
- } from "../__chunks/C5HA76JU.js";
10
+ } from "../__chunks/QZJOXZKA.js";
11
11
  import "../__chunks/MIIHBIKN.js";
12
- import "../__chunks/ONUY4D7O.js";
13
- import "../__chunks/PJ7ERAIM.js";
12
+ import "../__chunks/VGORKDMQ.js";
14
13
  import "../__chunks/IFMAUEA7.js";
14
+ import "../__chunks/PJ7ERAIM.js";
15
15
  import "../__chunks/3IEDWLST.js";
16
16
  import "../__chunks/QFI3MCMR.js";
17
17
  import "../__chunks/6LTHW2TQ.js";
@@ -117,7 +117,7 @@ var useHovercardDisclosure = createHook(function useHovercardDisclosure2(_a) {
117
117
  stroke: "currentColor",
118
118
  strokeLinecap: "round",
119
119
  strokeLinejoin: "round",
120
- strokeWidth: "1.5pt",
120
+ strokeWidth: 1.5,
121
121
  viewBox: "0 0 16 16",
122
122
  height: "1em",
123
123
  width: "1em",
@@ -2,9 +2,9 @@
2
2
  import {
3
3
  HovercardDismiss,
4
4
  useHovercardDismiss
5
- } from "../__chunks/2VWKZYYT.js";
6
- import "../__chunks/LABIXQLW.js";
7
- import "../__chunks/JCOBPKEI.js";
5
+ } from "../__chunks/H5N72W37.js";
6
+ import "../__chunks/44PDY2W5.js";
7
+ import "../__chunks/BY6P32UK.js";
8
8
  import "../__chunks/CKAOM5LG.js";
9
9
  import "../__chunks/PJ7ERAIM.js";
10
10
  import "../__chunks/5YBNH7BL.js";