@ariakit/react-core 0.3.1 → 0.3.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 (170) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/cjs/__chunks/{6MLKTO2T.cjs → 3ULNMLN7.cjs} +2 -2
  3. package/cjs/__chunks/{SL7OXEFQ.cjs → 4ULJINEP.cjs} +2 -2
  4. package/cjs/__chunks/{C47ZNHA6.cjs → 6UXB6PRK.cjs} +2 -2
  5. package/cjs/__chunks/{OAQQQ7LS.cjs → DMTOMUIM.cjs} +2 -2
  6. package/cjs/__chunks/{P2EILHN6.cjs → E4C2KZA5.cjs} +2 -2
  7. package/cjs/__chunks/{J63NAJOO.cjs → HCQYEOCO.cjs} +2 -2
  8. package/cjs/__chunks/{WRVKUV4V.cjs → HFISYIKE.cjs} +2 -2
  9. package/cjs/__chunks/{U33H4JTD.cjs → LJBXMHCD.cjs} +2 -2
  10. package/cjs/__chunks/{BPMML63M.cjs → NATUYKIW.cjs} +2 -2
  11. package/cjs/__chunks/{ZEASCR4B.cjs → QEG5AJH6.cjs} +2 -2
  12. package/cjs/__chunks/{B4KDFSF3.cjs → WBPFHFAX.cjs} +2 -2
  13. package/cjs/__chunks/{PHDU6PLM.cjs → XOHN6PER.cjs} +2 -2
  14. package/cjs/checkbox/checkbox.d.ts +12 -9
  15. package/cjs/collection/collection.d.ts +5 -1
  16. package/cjs/combobox/combobox-cancel.d.ts +14 -9
  17. package/cjs/combobox/combobox-disclosure.d.ts +14 -9
  18. package/cjs/combobox/combobox-group-label.d.ts +16 -11
  19. package/cjs/combobox/combobox-group.d.ts +16 -11
  20. package/cjs/combobox/combobox-item-value.d.ts +14 -10
  21. package/cjs/combobox/combobox-item.d.ts +45 -20
  22. package/cjs/combobox/combobox-list.d.ts +17 -10
  23. package/cjs/combobox/combobox-popover.cjs +5 -5
  24. package/cjs/combobox/combobox-popover.d.ts +8 -7
  25. package/cjs/combobox/combobox-provider.cjs +5 -5
  26. package/cjs/combobox/combobox-row.d.ts +21 -16
  27. package/cjs/combobox/combobox-separator.d.ts +15 -10
  28. package/cjs/combobox/combobox-store.cjs +5 -5
  29. package/cjs/combobox/combobox-store.d.ts +9 -4
  30. package/cjs/combobox/combobox.d.ts +55 -36
  31. package/cjs/composite/composite-overflow-store.cjs +4 -4
  32. package/cjs/composite/composite-overflow.cjs +5 -5
  33. package/cjs/dialog/dialog-backdrop.cjs +3 -3
  34. package/cjs/dialog/dialog-provider.cjs +3 -3
  35. package/cjs/dialog/dialog-store.cjs +3 -3
  36. package/cjs/dialog/dialog.cjs +4 -4
  37. package/cjs/disclosure/disclosure-content.d.ts +9 -4
  38. package/cjs/disclosure/disclosure-provider.cjs +2 -2
  39. package/cjs/disclosure/disclosure-store.cjs +2 -2
  40. package/cjs/disclosure/disclosure-store.d.ts +1 -2
  41. package/cjs/disclosure/disclosure.d.ts +13 -6
  42. package/cjs/form/form-checkbox.d.ts +5 -1
  43. package/cjs/form/form-description.d.ts +10 -3
  44. package/cjs/form/form-error.d.ts +10 -3
  45. package/cjs/form/form-field.d.ts +17 -9
  46. package/cjs/form/form-group-label.d.ts +7 -4
  47. package/cjs/form/form-group.d.ts +5 -2
  48. package/cjs/form/form-input.d.ts +9 -4
  49. package/cjs/form/form-label.d.ts +10 -3
  50. package/cjs/form/form-push.d.ts +5 -2
  51. package/cjs/form/form-radio-group.d.ts +5 -1
  52. package/cjs/form/form-radio.d.ts +5 -1
  53. package/cjs/form/form-remove.d.ts +5 -2
  54. package/cjs/form/form-reset.d.ts +6 -2
  55. package/cjs/form/form-store.d.ts +5 -1
  56. package/cjs/form/form-submit.d.ts +5 -2
  57. package/cjs/form/form.d.ts +5 -1
  58. package/cjs/hovercard/hovercard-anchor.d.ts +11 -5
  59. package/cjs/hovercard/hovercard-arrow.d.ts +13 -8
  60. package/cjs/hovercard/hovercard-description.d.ts +14 -9
  61. package/cjs/hovercard/hovercard-disclosure.d.ts +14 -8
  62. package/cjs/hovercard/hovercard-dismiss.d.ts +11 -6
  63. package/cjs/hovercard/hovercard-heading.d.ts +14 -9
  64. package/cjs/hovercard/hovercard-provider.cjs +5 -5
  65. package/cjs/hovercard/hovercard-store.cjs +5 -5
  66. package/cjs/hovercard/hovercard-store.d.ts +1 -0
  67. package/cjs/hovercard/hovercard.cjs +6 -6
  68. package/cjs/hovercard/hovercard.d.ts +11 -5
  69. package/cjs/menu/menu-button.cjs +3 -1
  70. package/cjs/menu/menu-provider.cjs +6 -6
  71. package/cjs/menu/menu-store.cjs +6 -6
  72. package/cjs/menu/menu-store.d.ts +6 -6
  73. package/cjs/menu/menu.cjs +6 -6
  74. package/cjs/popover/popover-provider.cjs +4 -4
  75. package/cjs/popover/popover-store.cjs +4 -4
  76. package/cjs/popover/popover.cjs +5 -5
  77. package/cjs/select/select-popover.cjs +5 -5
  78. package/cjs/select/select-provider.cjs +5 -5
  79. package/cjs/select/select-store.cjs +5 -5
  80. package/cjs/select/select-store.d.ts +2 -2
  81. package/cjs/tab/tab-panel.cjs +2 -2
  82. package/cjs/tooltip/tooltip-provider.cjs +6 -6
  83. package/cjs/tooltip/tooltip-store.cjs +6 -6
  84. package/cjs/tooltip/tooltip.cjs +6 -6
  85. package/cjs/tsconfig.build.tsbuildinfo +1 -1
  86. package/esm/__chunks/{YJPXO6F5.js → 34JEM52B.js} +1 -1
  87. package/esm/__chunks/{CJPLAYFB.js → 4RP654JS.js} +1 -1
  88. package/esm/__chunks/{RA2AAYOC.js → 4SB2BYFE.js} +1 -1
  89. package/esm/__chunks/{E6GADH6Y.js → A2ONBKVT.js} +2 -2
  90. package/esm/__chunks/{RVGVDX6B.js → GP4UGJIZ.js} +1 -1
  91. package/esm/__chunks/{XEZV3AK4.js → H2BG4QDT.js} +1 -1
  92. package/esm/__chunks/{HJHTMRDC.js → HZPJPDJY.js} +1 -1
  93. package/esm/__chunks/{6LKB3PXM.js → IFNQMENS.js} +1 -1
  94. package/esm/__chunks/{MA5WD4CD.js → UQFOL5I6.js} +1 -1
  95. package/esm/__chunks/{HCTAKPNS.js → UY3UQ4QI.js} +1 -1
  96. package/esm/__chunks/{R3N4R7UZ.js → V5EW3YHP.js} +1 -1
  97. package/esm/__chunks/{NRLOAE2I.js → W575AF63.js} +1 -1
  98. package/esm/checkbox/checkbox.d.ts +12 -9
  99. package/esm/collection/collection.d.ts +5 -1
  100. package/esm/combobox/combobox-cancel.d.ts +14 -9
  101. package/esm/combobox/combobox-disclosure.d.ts +14 -9
  102. package/esm/combobox/combobox-group-label.d.ts +16 -11
  103. package/esm/combobox/combobox-group.d.ts +16 -11
  104. package/esm/combobox/combobox-item-value.d.ts +14 -10
  105. package/esm/combobox/combobox-item.d.ts +45 -20
  106. package/esm/combobox/combobox-list.d.ts +17 -10
  107. package/esm/combobox/combobox-popover.d.ts +8 -7
  108. package/esm/combobox/combobox-popover.js +4 -4
  109. package/esm/combobox/combobox-provider.js +4 -4
  110. package/esm/combobox/combobox-row.d.ts +21 -16
  111. package/esm/combobox/combobox-separator.d.ts +15 -10
  112. package/esm/combobox/combobox-store.d.ts +9 -4
  113. package/esm/combobox/combobox-store.js +4 -4
  114. package/esm/combobox/combobox.d.ts +55 -36
  115. package/esm/composite/composite-overflow-store.js +3 -3
  116. package/esm/composite/composite-overflow.js +4 -4
  117. package/esm/dialog/dialog-backdrop.js +2 -2
  118. package/esm/dialog/dialog-provider.js +2 -2
  119. package/esm/dialog/dialog-store.js +2 -2
  120. package/esm/dialog/dialog.js +3 -3
  121. package/esm/disclosure/disclosure-content.d.ts +9 -4
  122. package/esm/disclosure/disclosure-provider.js +1 -1
  123. package/esm/disclosure/disclosure-store.d.ts +1 -2
  124. package/esm/disclosure/disclosure-store.js +1 -1
  125. package/esm/disclosure/disclosure.d.ts +13 -6
  126. package/esm/form/form-checkbox.d.ts +5 -1
  127. package/esm/form/form-description.d.ts +10 -3
  128. package/esm/form/form-error.d.ts +10 -3
  129. package/esm/form/form-field.d.ts +17 -9
  130. package/esm/form/form-group-label.d.ts +7 -4
  131. package/esm/form/form-group.d.ts +5 -2
  132. package/esm/form/form-input.d.ts +9 -4
  133. package/esm/form/form-label.d.ts +10 -3
  134. package/esm/form/form-push.d.ts +5 -2
  135. package/esm/form/form-radio-group.d.ts +5 -1
  136. package/esm/form/form-radio.d.ts +5 -1
  137. package/esm/form/form-remove.d.ts +5 -2
  138. package/esm/form/form-reset.d.ts +6 -2
  139. package/esm/form/form-store.d.ts +5 -1
  140. package/esm/form/form-submit.d.ts +5 -2
  141. package/esm/form/form.d.ts +5 -1
  142. package/esm/hovercard/hovercard-anchor.d.ts +11 -5
  143. package/esm/hovercard/hovercard-arrow.d.ts +13 -8
  144. package/esm/hovercard/hovercard-description.d.ts +14 -9
  145. package/esm/hovercard/hovercard-disclosure.d.ts +14 -8
  146. package/esm/hovercard/hovercard-dismiss.d.ts +11 -6
  147. package/esm/hovercard/hovercard-heading.d.ts +14 -9
  148. package/esm/hovercard/hovercard-provider.js +4 -4
  149. package/esm/hovercard/hovercard-store.d.ts +1 -0
  150. package/esm/hovercard/hovercard-store.js +4 -4
  151. package/esm/hovercard/hovercard.d.ts +11 -5
  152. package/esm/hovercard/hovercard.js +5 -5
  153. package/esm/menu/menu-button.js +3 -1
  154. package/esm/menu/menu-provider.js +5 -5
  155. package/esm/menu/menu-store.d.ts +6 -6
  156. package/esm/menu/menu-store.js +5 -5
  157. package/esm/menu/menu.js +5 -5
  158. package/esm/popover/popover-provider.js +3 -3
  159. package/esm/popover/popover-store.js +3 -3
  160. package/esm/popover/popover.js +4 -4
  161. package/esm/select/select-popover.js +4 -4
  162. package/esm/select/select-provider.js +4 -4
  163. package/esm/select/select-store.d.ts +2 -2
  164. package/esm/select/select-store.js +4 -4
  165. package/esm/tab/tab-panel.js +1 -1
  166. package/esm/tooltip/tooltip-provider.js +5 -5
  167. package/esm/tooltip/tooltip-store.js +5 -5
  168. package/esm/tooltip/tooltip.js +5 -5
  169. package/esm/tsconfig.build.tsbuildinfo +1 -1
  170. package/package.json +2 -2
@@ -8,9 +8,9 @@ require('../__chunks/H7R5D2FR.cjs');
8
8
  require('../__chunks/NHZBX2RS.cjs');
9
9
 
10
10
 
11
- var _PHDU6PLMcjs = require('../__chunks/PHDU6PLM.cjs');
12
- require('../__chunks/ZEASCR4B.cjs');
13
- require('../__chunks/J63NAJOO.cjs');
11
+ var _XOHN6PERcjs = require('../__chunks/XOHN6PER.cjs');
12
+ require('../__chunks/QEG5AJH6.cjs');
13
+ require('../__chunks/HCQYEOCO.cjs');
14
14
  require('../__chunks/6BAHKJ5K.cjs');
15
15
  require('../__chunks/DPLHWKRP.cjs');
16
16
  require('../__chunks/W32FX7DM.cjs');
@@ -43,7 +43,7 @@ require('../__chunks/KSFAO77E.cjs');
43
43
 
44
44
 
45
45
  var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
46
- require('../__chunks/6MLKTO2T.cjs');
46
+ require('../__chunks/3ULNMLN7.cjs');
47
47
  require('../__chunks/I63PYP2U.cjs');
48
48
  require('../__chunks/5WLTMVVQ.cjs');
49
49
  require('../__chunks/7WUTS26Y.cjs');
@@ -88,7 +88,7 @@ var useComboboxPopover = _Z5PUIG6Acjs.createHook.call(void 0,
88
88
  );
89
89
  const baseElement = store.useState("baseElement");
90
90
  props = _7F6H5HXCcjs.useComboboxList.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store, alwaysVisible }, props));
91
- props = _PHDU6PLMcjs.usePopover.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
91
+ props = _XOHN6PERcjs.usePopover.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
92
92
  store,
93
93
  alwaysVisible,
94
94
  autoFocusOnShow: false,
@@ -24,13 +24,14 @@ export declare const useComboboxPopover: import("../utils/types.js").Hook<Combob
24
24
  * @see https://ariakit.org/components/combobox
25
25
  * @example
26
26
  * ```jsx
27
- * const combobox = useComboboxStore();
28
- * <Combobox store={combobox} />
29
- * <ComboboxPopover store={combobox}>
30
- * <ComboboxItem value="Item 1" />
31
- * <ComboboxItem value="Item 2" />
32
- * <ComboboxItem value="Item 3" />
33
- * </ComboboxPopover>
27
+ * <ComboboxProvider>
28
+ * <Combobox />
29
+ * <ComboboxPopover>
30
+ * <ComboboxItem value="Apple" />
31
+ * <ComboboxItem value="Banana" />
32
+ * <ComboboxItem value="Orange" />
33
+ * </ComboboxPopover>
34
+ * </ComboboxProvider>
34
35
  * ```
35
36
  */
36
37
  export declare const ComboboxPopover: import("../utils/types.js").Component<ComboboxPopoverOptions<"div">>;
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _SL7OXEFQcjs = require('../__chunks/SL7OXEFQ.cjs');
3
+ var _4ULJINEPcjs = require('../__chunks/4ULJINEP.cjs');
4
4
 
5
5
 
6
6
  var _ZBG4TGVLcjs = require('../__chunks/ZBG4TGVL.cjs');
@@ -12,9 +12,9 @@ require('../__chunks/AKOG5S2T.cjs');
12
12
  require('../__chunks/W6ZRSMO5.cjs');
13
13
  require('../__chunks/A2NMYLCG.cjs');
14
14
  require('../__chunks/Z5PUIG6A.cjs');
15
- require('../__chunks/P2EILHN6.cjs');
16
- require('../__chunks/BPMML63M.cjs');
17
- require('../__chunks/6MLKTO2T.cjs');
15
+ require('../__chunks/E4C2KZA5.cjs');
16
+ require('../__chunks/NATUYKIW.cjs');
17
+ require('../__chunks/3ULNMLN7.cjs');
18
18
  require('../__chunks/I63PYP2U.cjs');
19
19
  require('../__chunks/5WLTMVVQ.cjs');
20
20
  require('../__chunks/7WUTS26Y.cjs');
@@ -23,7 +23,7 @@ require('../__chunks/72I2GWXF.cjs');
23
23
  // src/combobox/combobox-provider.tsx
24
24
  var _jsxruntime = require('react/jsx-runtime');
25
25
  function ComboboxProvider(props = {}) {
26
- const store = _SL7OXEFQcjs.useComboboxStore.call(void 0, props);
26
+ const store = _4ULJINEPcjs.useComboboxStore.call(void 0, props);
27
27
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZBG4TGVLcjs.ComboboxContextProvider, { value: store, children: props.children });
28
28
  }
29
29
 
@@ -23,27 +23,32 @@ export declare const useComboboxRow: import("../utils/types.js").Hook<ComboboxRo
23
23
  * @see https://ariakit.org/components/combobox
24
24
  * @example
25
25
  * ```jsx
26
- * const combobox = useComboboxStore();
27
- * <Combobox store={combobox} />
28
- * <ComboboxPopover store={combobox}>
29
- * <ComboboxRow>
30
- * <ComboboxItem value="Item 1.1" />
31
- * <ComboboxItem value="Item 1.2" />
32
- * <ComboboxItem value="Item 1.3" />
33
- * </ComboboxRow>
34
- * <ComboboxRow>
35
- * <ComboboxItem value="Item 2.1" />
36
- * <ComboboxItem value="Item 2.2" />
37
- * <ComboboxItem value="Item 2.3" />
38
- * </ComboboxRow>
39
- * </ComboboxPopover>
26
+ * <ComboboxProvider>
27
+ * <Combobox />
28
+ * <ComboboxPopover>
29
+ * <ComboboxRow>
30
+ * <ComboboxItem value="Item 1.1" />
31
+ * <ComboboxItem value="Item 1.2" />
32
+ * <ComboboxItem value="Item 1.3" />
33
+ * </ComboboxRow>
34
+ * <ComboboxRow>
35
+ * <ComboboxItem value="Item 2.1" />
36
+ * <ComboboxItem value="Item 2.2" />
37
+ * <ComboboxItem value="Item 2.3" />
38
+ * </ComboboxRow>
39
+ * </ComboboxPopover>
40
+ * </ComboboxProvider>
40
41
  * ```
41
42
  */
42
43
  export declare const ComboboxRow: import("../utils/types.js").Component<ComboboxRowOptions<"div">>;
43
44
  export interface ComboboxRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
44
45
  /**
45
- * Object returned by the `useComboboxStore` hook. If not provided, the parent
46
- * `ComboboxList` or `ComboboxPopover` components' context will be used.
46
+ * Object returned by the
47
+ * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
48
+ * hook. If not provided, the parent
49
+ * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
50
+ * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
51
+ * components' context will be used.
47
52
  */
48
53
  store?: ComboboxStore;
49
54
  }
@@ -22,21 +22,26 @@ export declare const useComboboxSeparator: import("../utils/types.js").Hook<Comb
22
22
  * @see https://ariakit.org/components/combobox
23
23
  * @example
24
24
  * ```jsx
25
- * const combobox = useComboboxStore();
26
- * <Combobox store={combobox} />
27
- * <ComboboxPopover store={combobox}>
28
- * <ComboboxItem value="Item 1" />
29
- * <ComboboxSeparator />
30
- * <ComboboxItem value="Item 2" />
31
- * <ComboboxItem value="Item 3" />
32
- * </ComboboxPopover>
25
+ * <ComboboxProvider>
26
+ * <Combobox />
27
+ * <ComboboxPopover>
28
+ * <ComboboxItem value="Item 1" />
29
+ * <ComboboxSeparator />
30
+ * <ComboboxItem value="Item 2" />
31
+ * <ComboboxItem value="Item 3" />
32
+ * </ComboboxPopover>
33
+ * </ComboboxProvider>
33
34
  * ```
34
35
  */
35
36
  export declare const ComboboxSeparator: import("../utils/types.js").Component<ComboboxSeparatorOptions<"hr">>;
36
37
  export interface ComboboxSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
37
38
  /**
38
- * Object returned by the `useComboboxStore` hook. If not provided, the parent
39
- * `ComboboxList` or `ComboboxPopover` components' context will be used.
39
+ * Object returned by the
40
+ * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
41
+ * hook. If not provided, the parent
42
+ * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
43
+ * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
44
+ * components' context will be used.
40
45
  */
41
46
  store?: ComboboxStore;
42
47
  }
@@ -1,12 +1,12 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _SL7OXEFQcjs = require('../__chunks/SL7OXEFQ.cjs');
4
+ var _4ULJINEPcjs = require('../__chunks/4ULJINEP.cjs');
5
5
  require('../__chunks/FWCQCCG3.cjs');
6
6
  require('../__chunks/GCTYF2Y6.cjs');
7
- require('../__chunks/P2EILHN6.cjs');
8
- require('../__chunks/BPMML63M.cjs');
9
- require('../__chunks/6MLKTO2T.cjs');
7
+ require('../__chunks/E4C2KZA5.cjs');
8
+ require('../__chunks/NATUYKIW.cjs');
9
+ require('../__chunks/3ULNMLN7.cjs');
10
10
  require('../__chunks/I63PYP2U.cjs');
11
11
  require('../__chunks/5WLTMVVQ.cjs');
12
12
  require('../__chunks/7WUTS26Y.cjs');
@@ -14,4 +14,4 @@ require('../__chunks/72I2GWXF.cjs');
14
14
 
15
15
 
16
16
 
17
- exports.useComboboxStore = _SL7OXEFQcjs.useComboboxStore; exports.useComboboxStoreProps = _SL7OXEFQcjs.useComboboxStoreProps;
17
+ exports.useComboboxStore = _4ULJINEPcjs.useComboboxStore; exports.useComboboxStoreProps = _4ULJINEPcjs.useComboboxStoreProps;
@@ -26,11 +26,16 @@ export interface ComboboxStoreFunctions extends Core.ComboboxStoreFunctions, Com
26
26
  export interface ComboboxStoreOptions extends Core.ComboboxStoreOptions, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
27
27
  /**
28
28
  * A callback that gets called when the `value` state changes.
29
+ *
30
+ * Live examples:
31
+ * - [Combobox filtering](https://ariakit.org/examples/combobox-filtering)
32
+ * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
33
+ * - [Combobox with links](https://ariakit.org/examples/combobox-links)
34
+ * - [Multi-selectable
35
+ * Combobox](https://ariakit.org/examples/combobox-multiple)
36
+ * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
37
+ * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
29
38
  * @param value The new value.
30
- * @example
31
- * function MyCombobox({ value, onChange }) {
32
- * const combobox = useComboboxStore({ value, setValue: onChange });
33
- * }
34
39
  */
35
40
  setValue?: (value: ComboboxStoreState["value"]) => void;
36
41
  }
@@ -25,31 +25,38 @@ export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptio
25
25
  * @see https://ariakit.org/components/combobox
26
26
  * @example
27
27
  * ```jsx
28
- * const combobox = useComboboxStore();
29
- * <Combobox store={combobox} />
30
- * <ComboboxPopover store={combobox}>
31
- * <ComboboxItem value="Apple" />
32
- * <ComboboxItem value="Banana" />
33
- * <ComboboxItem value="Orange" />
34
- * </ComboboxPopover>
28
+ * <ComboboxProvider>
29
+ * <Combobox />
30
+ * <ComboboxPopover>
31
+ * <ComboboxItem value="Apple" />
32
+ * <ComboboxItem value="Banana" />
33
+ * <ComboboxItem value="Orange" />
34
+ * </ComboboxPopover>
35
+ * </ComboboxProvider>
35
36
  * ```
36
37
  */
37
38
  export declare const Combobox: import("../utils/types.js").Component<ComboboxOptions<"input">>;
38
39
  export interface ComboboxOptions<T extends As = "input"> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
39
40
  /**
40
- * Object returned by the `useComboboxStore` hook.
41
+ * Object returned by the
42
+ * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
43
+ * hook. If not provided, the closest
44
+ * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
45
+ * component's context will be used.
41
46
  */
42
47
  store?: ComboboxStore;
43
48
  /**
44
49
  * Whether the first item will be automatically selected when the combobox
45
50
  * input value changes. When it's set to `true`, the exact behavior will
46
- * depend on the value of `autoComplete` prop:
47
- * - If `autoComplete` is `both` or `inline`, the first item is automatically
48
- * focused when the popup opens, and the input value changes to reflect
49
- * this. The inline completion string will be highlighted and will have a
50
- * selected state.
51
- * - If `autoComplete` is `list` or `none`, the first item is automatically
52
- * focused when the popup opens, but the input value doesn't change.
51
+ * depend on the value of
52
+ * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
53
+ * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
54
+ * is `both` or `inline`, the first item is automatically focused when the
55
+ * popup opens, and the input value changes to reflect this. The inline
56
+ * completion string will be highlighted and will have a selected state.
57
+ * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
58
+ * is `list` or `none`, the first item is automatically focused when the
59
+ * popup opens, but the input value doesn't change.
53
60
  *
54
61
  * Live examples:
55
62
  * - [ComboboxCancel](https://ariakit.org/examples/combobox-cancel)
@@ -57,26 +64,39 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
57
64
  * - [Combobox with links](https://ariakit.org/examples/combobox-links)
58
65
  * - [Textarea with inline
59
66
  * Combobox](https://ariakit.org/examples/combobox-textarea)
67
+ * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
68
+ * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
60
69
  * @default false
61
70
  */
62
71
  autoSelect?: boolean;
63
72
  /**
64
- * Whether the items will be filtered based on `value` and whether the input
65
- * value will temporarily change based on the active item. If `defaultList` or
66
- * `list` are provided, this will be set to `list` by default, otherwise it'll
67
- * default to `none`.
68
- * - `both`: the items will be filtered based on `value` and the input value
69
- * will temporarily change based on the active item.
70
- * - `list`: the items will be filtered based on `value` and the input value
71
- * will NOT change based on the active item.
72
- * - `inline`: the items are static, that is, they won't be filtered based on
73
- * `value`, but the input value will temporarily change based on the active
74
- * item.
73
+ * Whether the items will be filtered based on
74
+ * [`value`](https://ariakit.org/reference/combobox-provider#value) and
75
+ * whether the input value will temporarily change based on the active item.
76
+ *
77
+ * This prop is based on the standard
78
+ * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
79
+ * attribute, accepting the same values:
80
+ * - `both`: indicates that the items will be filtered based on
81
+ * [`value`](https://ariakit.org/reference/combobox-provider#value) and the
82
+ * input value will temporarily change based on the active item. The
83
+ * filtering logic must be implemented by the consumer of this component,
84
+ * whereas Ariakit will automatically provide the inline autocompletion
85
+ * behavior.
86
+ * - `list` (default): indicates that the items will be filtered based on
87
+ * [`value`](https://ariakit.org/reference/combobox-provider#value) and the
88
+ * input value will NOT change based on the active item. The filtering logic
89
+ * must be implemented by the consumer of this component.
90
+ * - `inline`: indicates that the items are static, that is, they won't be
91
+ * filtered, but the input value will temporarily change based on the active
92
+ * item. Ariakit will automatically provide the inline autocompletion
93
+ * behavior
75
94
  * - `none`: the items are static and the input value will NOT change based on
76
95
  * the active item.
77
96
  *
78
97
  * Live examples:
79
98
  * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
99
+ * @default "list"
80
100
  */
81
101
  autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
82
102
  /**
@@ -105,8 +125,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
105
125
  */
106
126
  setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
107
127
  /**
108
- * Whether the combobox list/popover should be shown when the input is
109
- * clicked.
128
+ * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
129
+ * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
130
+ * components should be shown when the input is clicked.
110
131
  *
111
132
  * Live examples:
112
133
  * - [Textarea with inline
@@ -114,15 +135,15 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
114
135
  * @default true
115
136
  * @example
116
137
  * ```jsx
117
- * const combobox = useComboboxStore();
118
- * const canShow = combobox.useState((state) => state.value.length > 1);
119
- * <Combobox store={combobox} showOnMouseDown={canShow} />
138
+ * <Combobox showOnMouseDown={value.length > 1} />
120
139
  * ```
121
140
  */
122
141
  showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
123
142
  /**
124
- * Whether the combobox list/popover should be shown when the user presses
125
- * the arrow up or down keys while focusing on the combobox input element.
143
+ * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
144
+ * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
145
+ * components should be shown when the user presses the arrow up or down keys
146
+ * while focusing on the combobox input element.
126
147
  *
127
148
  * Live examples:
128
149
  * - [Textarea with inline
@@ -130,9 +151,7 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
130
151
  * @default true
131
152
  * @example
132
153
  * ```jsx
133
- * const combobox = useComboboxStore();
134
- * const canShow = combobox.useState((state) => state.value.length > 1);
135
- * <Combobox store={combobox} showOnKeyDown={canShow} />
154
+ * <Combobox showOnKeyDown={value.length > 1} />
136
155
  * ```
137
156
  */
138
157
  showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
@@ -1,8 +1,8 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
2
2
 
3
- var _P2EILHN6cjs = require('../__chunks/P2EILHN6.cjs');
4
- require('../__chunks/BPMML63M.cjs');
5
- require('../__chunks/6MLKTO2T.cjs');
3
+ var _E4C2KZA5cjs = require('../__chunks/E4C2KZA5.cjs');
4
+ require('../__chunks/NATUYKIW.cjs');
5
+ require('../__chunks/3ULNMLN7.cjs');
6
6
 
7
7
 
8
8
  var _I63PYP2Ucjs = require('../__chunks/I63PYP2U.cjs');
@@ -13,7 +13,7 @@ require('../__chunks/72I2GWXF.cjs');
13
13
  // src/composite/composite-overflow-store.ts
14
14
  var _compositeoverflowstore = require('@ariakit/core/composite/composite-overflow-store'); var Core = _interopRequireWildcard(_compositeoverflowstore);
15
15
  function useCompositeOverflowStoreProps(store, update, props) {
16
- return _P2EILHN6cjs.usePopoverStoreProps.call(void 0, store, update, props);
16
+ return _E4C2KZA5cjs.usePopoverStoreProps.call(void 0, store, update, props);
17
17
  }
18
18
  function useCompositeOverflowStore(props = {}) {
19
19
  const [store, update] = _I63PYP2Ucjs.useStore.call(void 0, Core.createCompositeOverflowStore, props);
@@ -1,8 +1,8 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _PHDU6PLMcjs = require('../__chunks/PHDU6PLM.cjs');
4
- require('../__chunks/ZEASCR4B.cjs');
5
- require('../__chunks/J63NAJOO.cjs');
3
+ var _XOHN6PERcjs = require('../__chunks/XOHN6PER.cjs');
4
+ require('../__chunks/QEG5AJH6.cjs');
5
+ require('../__chunks/HCQYEOCO.cjs');
6
6
  require('../__chunks/6BAHKJ5K.cjs');
7
7
  require('../__chunks/DPLHWKRP.cjs');
8
8
  require('../__chunks/W32FX7DM.cjs');
@@ -35,7 +35,7 @@ require('../__chunks/KSFAO77E.cjs');
35
35
 
36
36
 
37
37
  var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
38
- require('../__chunks/6MLKTO2T.cjs');
38
+ require('../__chunks/3ULNMLN7.cjs');
39
39
  require('../__chunks/I63PYP2U.cjs');
40
40
 
41
41
 
@@ -89,7 +89,7 @@ var useCompositeOverflow = _Z5PUIG6Acjs.createHook.call(void 0,
89
89
  }, props), {
90
90
  onFocus
91
91
  });
92
- props = _PHDU6PLMcjs.usePopover.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
92
+ props = _XOHN6PERcjs.usePopover.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
93
93
  store,
94
94
  backdropProps,
95
95
  wrapperProps,
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
- var _J63NAJOOcjs = require('../__chunks/J63NAJOO.cjs');
3
+ var _HCQYEOCOcjs = require('../__chunks/HCQYEOCO.cjs');
4
4
  require('../__chunks/JKMBJCXA.cjs');
5
5
  require('../__chunks/Z3TLXRS7.cjs');
6
6
  require('../__chunks/PD5YFDLO.cjs');
@@ -10,11 +10,11 @@ require('../__chunks/5E5FKYEO.cjs');
10
10
  require('../__chunks/W6ZRSMO5.cjs');
11
11
  require('../__chunks/A2NMYLCG.cjs');
12
12
  require('../__chunks/Z5PUIG6A.cjs');
13
- require('../__chunks/6MLKTO2T.cjs');
13
+ require('../__chunks/3ULNMLN7.cjs');
14
14
  require('../__chunks/I63PYP2U.cjs');
15
15
  require('../__chunks/5WLTMVVQ.cjs');
16
16
  require('../__chunks/7WUTS26Y.cjs');
17
17
  require('../__chunks/72I2GWXF.cjs');
18
18
 
19
19
 
20
- exports.DialogBackdrop = _J63NAJOOcjs.DialogBackdrop;
20
+ exports.DialogBackdrop = _HCQYEOCOcjs.DialogBackdrop;
@@ -5,8 +5,8 @@ require('../__chunks/A2NMYLCG.cjs');
5
5
  require('../__chunks/Z5PUIG6A.cjs');
6
6
 
7
7
 
8
- var _BPMML63Mcjs = require('../__chunks/BPMML63M.cjs');
9
- require('../__chunks/6MLKTO2T.cjs');
8
+ var _NATUYKIWcjs = require('../__chunks/NATUYKIW.cjs');
9
+ require('../__chunks/3ULNMLN7.cjs');
10
10
  require('../__chunks/I63PYP2U.cjs');
11
11
  require('../__chunks/5WLTMVVQ.cjs');
12
12
  require('../__chunks/7WUTS26Y.cjs');
@@ -15,7 +15,7 @@ require('../__chunks/72I2GWXF.cjs');
15
15
  // src/dialog/dialog-provider.tsx
16
16
  var _jsxruntime = require('react/jsx-runtime');
17
17
  function DialogProvider(props = {}) {
18
- const store = _BPMML63Mcjs.useDialogStore.call(void 0, props);
18
+ const store = _NATUYKIWcjs.useDialogStore.call(void 0, props);
19
19
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _W6ZRSMO5cjs.DialogContextProvider, { value: store, children: props.children });
20
20
  }
21
21
 
@@ -1,8 +1,8 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _BPMML63Mcjs = require('../__chunks/BPMML63M.cjs');
5
- require('../__chunks/6MLKTO2T.cjs');
4
+ var _NATUYKIWcjs = require('../__chunks/NATUYKIW.cjs');
5
+ require('../__chunks/3ULNMLN7.cjs');
6
6
  require('../__chunks/I63PYP2U.cjs');
7
7
  require('../__chunks/5WLTMVVQ.cjs');
8
8
  require('../__chunks/7WUTS26Y.cjs');
@@ -10,4 +10,4 @@ require('../__chunks/72I2GWXF.cjs');
10
10
 
11
11
 
12
12
 
13
- exports.useDialogStore = _BPMML63Mcjs.useDialogStore; exports.useDialogStoreProps = _BPMML63Mcjs.useDialogStoreProps;
13
+ exports.useDialogStore = _NATUYKIWcjs.useDialogStore; exports.useDialogStoreProps = _NATUYKIWcjs.useDialogStoreProps;
@@ -1,8 +1,8 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _ZEASCR4Bcjs = require('../__chunks/ZEASCR4B.cjs');
5
- require('../__chunks/J63NAJOO.cjs');
4
+ var _QEG5AJH6cjs = require('../__chunks/QEG5AJH6.cjs');
5
+ require('../__chunks/HCQYEOCO.cjs');
6
6
  require('../__chunks/6BAHKJ5K.cjs');
7
7
  require('../__chunks/DPLHWKRP.cjs');
8
8
  require('../__chunks/W32FX7DM.cjs');
@@ -30,7 +30,7 @@ require('../__chunks/BFLDQF3L.cjs');
30
30
  require('../__chunks/LHHW5ZQP.cjs');
31
31
  require('../__chunks/KSFAO77E.cjs');
32
32
  require('../__chunks/Z5PUIG6A.cjs');
33
- require('../__chunks/6MLKTO2T.cjs');
33
+ require('../__chunks/3ULNMLN7.cjs');
34
34
  require('../__chunks/I63PYP2U.cjs');
35
35
  require('../__chunks/5WLTMVVQ.cjs');
36
36
  require('../__chunks/7WUTS26Y.cjs');
@@ -38,4 +38,4 @@ require('../__chunks/72I2GWXF.cjs');
38
38
 
39
39
 
40
40
 
41
- exports.Dialog = _ZEASCR4Bcjs.Dialog; exports.useDialog = _ZEASCR4Bcjs.useDialog;
41
+ exports.Dialog = _QEG5AJH6cjs.Dialog; exports.useDialog = _QEG5AJH6cjs.useDialog;
@@ -18,15 +18,20 @@ export declare const useDisclosureContent: import("../utils/types.js").Hook<Disc
18
18
  * @see https://ariakit.org/components/disclosure
19
19
  * @example
20
20
  * ```jsx
21
- * const disclosure = useDisclosureStore();
22
- * <Disclosure store={disclosure}>Disclosure</Disclosure>
23
- * <DisclosureContent store={disclosure}>Content</DisclosureContent>
21
+ * <DisclosureProvider>
22
+ * <Disclosure>Disclosure</Disclosure>
23
+ * <DisclosureContent>Content</DisclosureContent>
24
+ * </DisclosureProvider>
24
25
  * ```
25
26
  */
26
27
  export declare const DisclosureContent: import("../utils/types.js").Component<DisclosureContentOptions<"div">>;
27
28
  export interface DisclosureContentOptions<T extends As = "div"> extends Options<T> {
28
29
  /**
29
- * Object returned by the `useDisclosureStore` hook.
30
+ * Object returned by the
31
+ * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
32
+ * hook. If not provided, the closest
33
+ * [`DisclosureProvider`](https://ariakit.org/reference/disclosure-provider)
34
+ * component's context will be used.
30
35
  */
31
36
  store?: DisclosureStore;
32
37
  /**
@@ -4,7 +4,7 @@ var _A2NMYLCGcjs = require('../__chunks/A2NMYLCG.cjs');
4
4
  require('../__chunks/Z5PUIG6A.cjs');
5
5
 
6
6
 
7
- var _6MLKTO2Tcjs = require('../__chunks/6MLKTO2T.cjs');
7
+ var _3ULNMLN7cjs = require('../__chunks/3ULNMLN7.cjs');
8
8
  require('../__chunks/I63PYP2U.cjs');
9
9
  require('../__chunks/5WLTMVVQ.cjs');
10
10
  require('../__chunks/7WUTS26Y.cjs');
@@ -13,7 +13,7 @@ require('../__chunks/72I2GWXF.cjs');
13
13
  // src/disclosure/disclosure-provider.tsx
14
14
  var _jsxruntime = require('react/jsx-runtime');
15
15
  function DisclosureProvider(props = {}) {
16
- const store = _6MLKTO2Tcjs.useDisclosureStore.call(void 0, props);
16
+ const store = _3ULNMLN7cjs.useDisclosureStore.call(void 0, props);
17
17
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _A2NMYLCGcjs.DisclosureContextProvider, { value: store, children: props.children });
18
18
  }
19
19
 
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _6MLKTO2Tcjs = require('../__chunks/6MLKTO2T.cjs');
4
+ var _3ULNMLN7cjs = require('../__chunks/3ULNMLN7.cjs');
5
5
  require('../__chunks/I63PYP2U.cjs');
6
6
  require('../__chunks/5WLTMVVQ.cjs');
7
7
  require('../__chunks/7WUTS26Y.cjs');
@@ -9,4 +9,4 @@ require('../__chunks/72I2GWXF.cjs');
9
9
 
10
10
 
11
11
 
12
- exports.useDisclosureStore = _6MLKTO2Tcjs.useDisclosureStore; exports.useDisclosureStoreProps = _6MLKTO2Tcjs.useDisclosureStoreProps;
12
+ exports.useDisclosureStore = _3ULNMLN7cjs.useDisclosureStore; exports.useDisclosureStoreProps = _3ULNMLN7cjs.useDisclosureStoreProps;
@@ -1,7 +1,6 @@
1
- import type { DependencyList } from "react";
2
1
  import * as Core from "@ariakit/core/disclosure/disclosure-store";
3
2
  import type { Store } from "../utils/store.js";
4
- export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps, deps?: DependencyList): T;
3
+ export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T;
5
4
  /**
6
5
  * Creates a disclosure store.
7
6
  * @see https://ariakit.org/components/disclosure
@@ -21,20 +21,27 @@ export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureO
21
21
  * @see https://ariakit.org/components/disclosure
22
22
  * @example
23
23
  * ```jsx
24
- * const disclosure = useDisclosureStore();
25
- * <Disclosure store={disclosure}>Disclosure</Disclosure>
26
- * <DisclosureContent store={disclosure}>Content</DisclosureContent>
24
+ * <DisclosureProvider>
25
+ * <Disclosure>Disclosure</Disclosure>
26
+ * <DisclosureContent>Content</DisclosureContent>
27
+ * </DisclosureProvider>
27
28
  * ```
28
29
  */
29
30
  export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
30
31
  export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
31
32
  /**
32
- * Object returned by the `useDisclosureStore` hook.
33
+ * Object returned by the
34
+ * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
35
+ * hook. If not provided, the closest
36
+ * [`DisclosureProvider`](https://ariakit.org/reference/disclosure-provider)
37
+ * component's context will be used.
33
38
  */
34
39
  store?: DisclosureStore;
35
40
  /**
36
- * Determines whether `store.toggle()` will be called on click. This is useful
37
- * if you want to handle the toggle logic yourself.
41
+ * Determines whether
42
+ * [`toggle`](https://ariakit.org/reference/use-disclosure-store#toggle) will
43
+ * be called on click. This is useful if you want to handle the toggle logic
44
+ * yourself.
38
45
  * @default true
39
46
  */
40
47
  toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
@@ -22,7 +22,11 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
22
22
  * @see https://ariakit.org/components/form
23
23
  * @example
24
24
  * ```jsx
25
- * const form = useFormStore({ defaultValues: { acceptTerms: false } });
25
+ * const form = useFormStore({
26
+ * defaultValues: {
27
+ * acceptTerms: false,
28
+ * },
29
+ * });
26
30
  * <Form store={form}>
27
31
  * <label>
28
32
  * <FormCheckbox name={form.names.acceptTerms} />