@ariakit/react-core 0.3.9 → 0.3.11

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 (129) hide show
  1. package/CHANGELOG.md +67 -0
  2. package/cjs/__chunks/{WK7AZPHS.cjs → 2GETDAIQ.cjs} +4 -4
  3. package/cjs/__chunks/{OT6DC3ML.cjs → 36QK2QLE.cjs} +2 -2
  4. package/cjs/__chunks/{PFQ3IPWT.cjs → 3RUODFRU.cjs} +16 -1
  5. package/cjs/__chunks/{UBME4GBY.cjs → 63WKH5OP.cjs} +2 -2
  6. package/cjs/__chunks/{S6WUBPBB.cjs → 65LGW5LY.cjs} +4 -2
  7. package/cjs/__chunks/{KIGOGBFU.cjs → 7EEAHTIW.cjs} +2 -2
  8. package/cjs/__chunks/{3KZQJDTV.cjs → APFV5PTX.cjs} +2 -2
  9. package/cjs/__chunks/{VIETWH5C.cjs → BKU5STIE.cjs} +2 -2
  10. package/cjs/__chunks/{HHZJ6KYW.cjs → IAYTETYN.cjs} +2 -2
  11. package/cjs/__chunks/{WABPFCL3.cjs → NVHGMKAE.cjs} +7 -5
  12. package/cjs/__chunks/{CZOBQEIO.cjs → RM2WCNSU.cjs} +16 -22
  13. package/cjs/__chunks/{GF6NWLKX.cjs → WWU35JDJ.cjs} +6 -2
  14. package/cjs/__chunks/{UUTXBBHD.cjs → XAYQLYTN.cjs} +2 -2
  15. package/cjs/checkbox/checkbox-check.d.cts +6 -3
  16. package/cjs/checkbox/checkbox-check.d.ts +6 -3
  17. package/cjs/collection/collection-renderer.d.cts +0 -1
  18. package/cjs/collection/collection-renderer.d.ts +0 -1
  19. package/cjs/combobox/combobox-disclosure.cjs +3 -4
  20. package/cjs/combobox/combobox-item.cjs +5 -3
  21. package/cjs/combobox/combobox-item.d.cts +13 -1
  22. package/cjs/combobox/combobox-item.d.ts +13 -1
  23. package/cjs/combobox/combobox-popover.cjs +39 -10
  24. package/cjs/combobox/combobox-popover.d.cts +1 -1
  25. package/cjs/combobox/combobox-popover.d.ts +1 -1
  26. package/cjs/combobox/combobox.cjs +18 -6
  27. package/cjs/combobox/combobox.d.cts +26 -1
  28. package/cjs/combobox/combobox.d.ts +26 -1
  29. package/cjs/composite/composite-hover.d.cts +10 -1
  30. package/cjs/composite/composite-hover.d.ts +10 -1
  31. package/cjs/composite/composite-item.cjs +2 -2
  32. package/cjs/composite/composite-overflow-disclosure.cjs +2 -2
  33. package/cjs/composite/composite-overflow.cjs +4 -4
  34. package/cjs/composite/composite-renderer.d.cts +0 -1
  35. package/cjs/composite/composite-renderer.d.ts +0 -1
  36. package/cjs/composite/composite.cjs +2 -2
  37. package/cjs/dialog/dialog.cjs +3 -3
  38. package/cjs/form/form-radio.cjs +3 -3
  39. package/cjs/hovercard/hovercard.cjs +5 -5
  40. package/cjs/menu/menu-bar.cjs +3 -3
  41. package/cjs/menu/menu-item-check.d.cts +14 -0
  42. package/cjs/menu/menu-item-check.d.ts +14 -0
  43. package/cjs/menu/menu-item-checkbox.cjs +3 -3
  44. package/cjs/menu/menu-item-radio.cjs +5 -5
  45. package/cjs/menu/menu-item.cjs +3 -3
  46. package/cjs/menu/menu-item.d.cts +8 -1
  47. package/cjs/menu/menu-item.d.ts +8 -1
  48. package/cjs/menu/menu-list.cjs +3 -3
  49. package/cjs/menu/menu-store.d.cts +2 -0
  50. package/cjs/menu/menu-store.d.ts +2 -0
  51. package/cjs/menu/menu.cjs +43 -15
  52. package/cjs/menubar/menubar.cjs +3 -3
  53. package/cjs/popover/popover.cjs +4 -4
  54. package/cjs/popover/popover.d.cts +2 -0
  55. package/cjs/popover/popover.d.ts +2 -0
  56. package/cjs/portal/portal.cjs +2 -2
  57. package/cjs/radio/radio-group.cjs +2 -2
  58. package/cjs/radio/radio.cjs +3 -3
  59. package/cjs/select/select-item.cjs +2 -2
  60. package/cjs/select/select-list.cjs +3 -3
  61. package/cjs/select/select-popover.cjs +8 -8
  62. package/cjs/tab/tab-list.cjs +2 -2
  63. package/cjs/tab/tab-provider.cjs +2 -2
  64. package/cjs/tab/tab-store.cjs +2 -2
  65. package/cjs/tab/tab.cjs +2 -2
  66. package/cjs/toolbar/toolbar-container.cjs +3 -3
  67. package/cjs/toolbar/toolbar-input.cjs +3 -3
  68. package/cjs/toolbar/toolbar-item.cjs +3 -3
  69. package/cjs/toolbar/toolbar.cjs +2 -2
  70. package/cjs/tooltip/tooltip.cjs +6 -6
  71. package/esm/__chunks/{FHDXHZLB.js → 57KNUQTI.js} +16 -22
  72. package/esm/__chunks/{UV2O3GRQ.js → 7D63S66W.js} +1 -1
  73. package/esm/__chunks/{TZJDOU75.js → 7R5VX7DV.js} +1 -1
  74. package/esm/__chunks/{6HKEBMMA.js → 7SHHFY4P.js} +1 -1
  75. package/esm/__chunks/{BJR5BFSV.js → CVFC2LN3.js} +1 -1
  76. package/esm/__chunks/{DHHIMTTV.js → DENCHBDS.js} +1 -1
  77. package/esm/__chunks/{E3XM3D67.js → JPXNJYSO.js} +4 -2
  78. package/esm/__chunks/{K5VQ2XTM.js → LZUSNDXA.js} +6 -2
  79. package/esm/__chunks/{PFM7J2TR.js → PDVJHECS.js} +1 -1
  80. package/esm/__chunks/{YGCD7HIZ.js → R2WNOXYG.js} +16 -1
  81. package/esm/__chunks/{2WETNHXU.js → SXPADS2D.js} +5 -3
  82. package/esm/__chunks/{2ECHI3ER.js → W2TTCKOE.js} +1 -1
  83. package/esm/__chunks/{HQ7YVNMA.js → WEU2EOWJ.js} +2 -2
  84. package/esm/checkbox/checkbox-check.d.ts +6 -3
  85. package/esm/collection/collection-renderer.d.ts +0 -1
  86. package/esm/combobox/combobox-disclosure.js +3 -4
  87. package/esm/combobox/combobox-item.d.ts +13 -1
  88. package/esm/combobox/combobox-item.js +4 -2
  89. package/esm/combobox/combobox-popover.d.ts +1 -1
  90. package/esm/combobox/combobox-popover.js +38 -9
  91. package/esm/combobox/combobox.d.ts +26 -1
  92. package/esm/combobox/combobox.js +17 -5
  93. package/esm/composite/composite-hover.d.ts +10 -1
  94. package/esm/composite/composite-item.js +1 -1
  95. package/esm/composite/composite-overflow-disclosure.js +1 -1
  96. package/esm/composite/composite-overflow.js +3 -3
  97. package/esm/composite/composite-renderer.d.ts +0 -1
  98. package/esm/composite/composite.js +1 -1
  99. package/esm/dialog/dialog.js +2 -2
  100. package/esm/form/form-radio.js +2 -2
  101. package/esm/hovercard/hovercard.js +4 -4
  102. package/esm/menu/menu-bar.js +2 -2
  103. package/esm/menu/menu-item-check.d.ts +14 -0
  104. package/esm/menu/menu-item-checkbox.js +2 -2
  105. package/esm/menu/menu-item-radio.js +3 -3
  106. package/esm/menu/menu-item.d.ts +8 -1
  107. package/esm/menu/menu-item.js +2 -2
  108. package/esm/menu/menu-list.js +2 -2
  109. package/esm/menu/menu-store.d.ts +2 -0
  110. package/esm/menu/menu.js +41 -13
  111. package/esm/menubar/menubar.js +2 -2
  112. package/esm/popover/popover.d.ts +2 -0
  113. package/esm/popover/popover.js +3 -3
  114. package/esm/portal/portal.js +1 -1
  115. package/esm/radio/radio-group.js +1 -1
  116. package/esm/radio/radio.js +2 -2
  117. package/esm/select/select-item.js +1 -1
  118. package/esm/select/select-list.js +2 -2
  119. package/esm/select/select-popover.js +5 -5
  120. package/esm/tab/tab-list.js +1 -1
  121. package/esm/tab/tab-provider.js +1 -1
  122. package/esm/tab/tab-store.js +1 -1
  123. package/esm/tab/tab.js +1 -1
  124. package/esm/toolbar/toolbar-container.js +2 -2
  125. package/esm/toolbar/toolbar-input.js +2 -2
  126. package/esm/toolbar/toolbar-item.js +2 -2
  127. package/esm/toolbar/toolbar.js +1 -1
  128. package/esm/tooltip/tooltip.js +4 -4
  129. package/package.json +2 -2
@@ -7,7 +7,7 @@ import {
7
7
  } from "../__chunks/W76OTZCC.js";
8
8
  import {
9
9
  useComposite
10
- } from "../__chunks/FHDXHZLB.js";
10
+ } from "../__chunks/57KNUQTI.js";
11
11
  import "../__chunks/6QXBPV75.js";
12
12
  import "../__chunks/IB7YUKH5.js";
13
13
  import "../__chunks/4UUKJZ4V.js";
@@ -82,6 +82,7 @@ var useCombobox = createHook(
82
82
  store,
83
83
  focusable = true,
84
84
  autoSelect: autoSelectProp = false,
85
+ getAutoSelectId,
85
86
  showOnChange = true,
86
87
  setValueOnChange = true,
87
88
  showOnMouseDown = true,
@@ -93,6 +94,7 @@ var useCombobox = createHook(
93
94
  "store",
94
95
  "focusable",
95
96
  "autoSelect",
97
+ "getAutoSelectId",
96
98
  "showOnChange",
97
99
  "setValueOnChange",
98
100
  "showOnMouseDown",
@@ -189,6 +191,8 @@ var useCombobox = createHook(
189
191
  storeValue
190
192
  ]);
191
193
  const scrollingElementRef = useRef(null);
194
+ const getAutoSelectIdProp = useEvent(getAutoSelectId);
195
+ const autoSelectIdRef = useRef(null);
192
196
  useEffect(() => {
193
197
  if (!open)
194
198
  return;
@@ -204,10 +208,12 @@ var useCombobox = createHook(
204
208
  const onScroll = () => {
205
209
  if (!store)
206
210
  return;
211
+ if (!canAutoSelectRef.current)
212
+ return;
207
213
  const { activeId } = store.getState();
208
214
  if (activeId === null)
209
215
  return;
210
- if (activeId === store.first())
216
+ if (activeId === autoSelectIdRef.current)
211
217
  return;
212
218
  canAutoSelectRef.current = false;
213
219
  };
@@ -233,7 +239,7 @@ var useCombobox = createHook(
233
239
  }, [open]);
234
240
  const resetValueOnSelect = store.useState("resetValueOnSelect");
235
241
  useUpdateEffect(() => {
236
- var _a2, _b2;
242
+ var _a2;
237
243
  if (!store)
238
244
  return;
239
245
  if (!autoSelect && !resetValueOnSelect)
@@ -249,9 +255,12 @@ var useCombobox = createHook(
249
255
  return () => observer.disconnect();
250
256
  }
251
257
  if (autoSelect) {
252
- store.move((_a2 = store.first()) != null ? _a2 : null);
258
+ const userAutoSelectId = getAutoSelectIdProp(items);
259
+ const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : store.first();
260
+ autoSelectIdRef.current = autoSelectId;
261
+ store.move(autoSelectId != null ? autoSelectId : null);
253
262
  } else {
254
- const element = (_b2 = store.item(activeId)) == null ? void 0 : _b2.element;
263
+ const element = (_a2 = store.item(activeId)) == null ? void 0 : _a2.element;
255
264
  if (element && "scrollIntoView" in element) {
256
265
  element.scrollIntoView({ block: "nearest", inline: "nearest" });
257
266
  }
@@ -263,6 +272,7 @@ var useCombobox = createHook(
263
272
  storeValue,
264
273
  autoSelect,
265
274
  resetValueOnSelect,
275
+ getAutoSelectIdProp,
266
276
  items
267
277
  ]);
268
278
  useEffect(() => {
@@ -395,6 +405,7 @@ var useCombobox = createHook(
395
405
  });
396
406
  const id = useId(props.id);
397
407
  const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0;
408
+ const isActiveItem = store.useState((state) => state.activeId === null);
398
409
  props = __spreadProps(__spreadValues({
399
410
  id,
400
411
  role: "combobox",
@@ -402,6 +413,7 @@ var useCombobox = createHook(
402
413
  "aria-haspopup": getPopupRole(contentElement, "listbox"),
403
414
  "aria-expanded": open,
404
415
  "aria-controls": contentElement == null ? void 0 : contentElement.id,
416
+ "data-active-item": isActiveItem || void 0,
405
417
  value
406
418
  }, props), {
407
419
  ref: useMergeRefs(ref, props.ref),
@@ -43,7 +43,12 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
43
43
  */
44
44
  store?: CompositeStore;
45
45
  /**
46
- * Determines if the composite item should be focused on hover.
46
+ * Determines if the composite item should be _focused_ when hovered over.
47
+ *
48
+ * Note that the actual DOM focus will stay on the composite element. This
49
+ * item will get the
50
+ * [`data-active-item`](https://ariakit.org/guide/styling#data-active-item)
51
+ * attribute so it can be styled as if it's focused.
47
52
  *
48
53
  * Live examples:
49
54
  * - [Multi-selectable
@@ -53,6 +58,8 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
53
58
  * - [Textarea with inline
54
59
  * Combobox](https://ariakit.org/examples/combobox-textarea)
55
60
  * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
61
+ * - [Submenu with
62
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
56
63
  * @default true
57
64
  */
58
65
  focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
@@ -66,6 +73,8 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
66
73
  * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
67
74
  * - [Combobox with integrated
68
75
  * filter](https://ariakit.org/examples/combobox-filtering-integrated)
76
+ * - [Submenu with
77
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
69
78
  */
70
79
  blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
71
80
  }
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  CompositeItem,
4
4
  useCompositeItem
5
- } from "../__chunks/YGCD7HIZ.js";
5
+ } from "../__chunks/R2WNOXYG.js";
6
6
  import "../__chunks/NWCBQ4CV.js";
7
7
  import "../__chunks/UH3I23HL.js";
8
8
  import "../__chunks/6QXBPV75.js";
@@ -8,7 +8,7 @@ import "../__chunks/JCH6MLL2.js";
8
8
  import "../__chunks/VDNZBO4W.js";
9
9
  import {
10
10
  useCompositeItem
11
- } from "../__chunks/YGCD7HIZ.js";
11
+ } from "../__chunks/R2WNOXYG.js";
12
12
  import "../__chunks/NWCBQ4CV.js";
13
13
  import "../__chunks/UH3I23HL.js";
14
14
  import "../__chunks/6QXBPV75.js";
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  usePopover
4
- } from "../__chunks/2WETNHXU.js";
5
- import "../__chunks/PFM7J2TR.js";
4
+ } from "../__chunks/SXPADS2D.js";
5
+ import "../__chunks/PDVJHECS.js";
6
6
  import "../__chunks/57VLL43X.js";
7
7
  import "../__chunks/CLF4PQ7T.js";
8
8
  import "../__chunks/BULCTPRV.js";
@@ -19,7 +19,7 @@ import "../__chunks/72E5EPFF.js";
19
19
  import "../__chunks/X6WIMZJE.js";
20
20
  import "../__chunks/HPP6CWMY.js";
21
21
  import "../__chunks/UYRJLDVS.js";
22
- import "../__chunks/E3XM3D67.js";
22
+ import "../__chunks/JPXNJYSO.js";
23
23
  import "../__chunks/CHKJ74UC.js";
24
24
  import "../__chunks/7452U3HH.js";
25
25
  import "../__chunks/XPF5GU3Q.js";
@@ -30,7 +30,6 @@ export declare function useCompositeRenderer<T extends Item = any>({ store, orie
30
30
  id?: string | undefined;
31
31
  lang?: string | undefined;
32
32
  nonce?: string | undefined;
33
- placeholder?: string | undefined;
34
33
  slot?: string | undefined;
35
34
  spellCheck?: (boolean | "false" | "true") | undefined;
36
35
  style?: import("react").CSSProperties | undefined;
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Composite,
4
4
  useComposite
5
- } from "../__chunks/FHDXHZLB.js";
5
+ } from "../__chunks/57KNUQTI.js";
6
6
  import "../__chunks/6QXBPV75.js";
7
7
  import "../__chunks/IB7YUKH5.js";
8
8
  import "../__chunks/4UUKJZ4V.js";
@@ -3,7 +3,7 @@ import {
3
3
  Dialog,
4
4
  createDialogComponent,
5
5
  useDialog
6
- } from "../__chunks/PFM7J2TR.js";
6
+ } from "../__chunks/PDVJHECS.js";
7
7
  import "../__chunks/57VLL43X.js";
8
8
  import "../__chunks/CLF4PQ7T.js";
9
9
  import "../__chunks/BULCTPRV.js";
@@ -20,7 +20,7 @@ import "../__chunks/72E5EPFF.js";
20
20
  import "../__chunks/X6WIMZJE.js";
21
21
  import "../__chunks/HPP6CWMY.js";
22
22
  import "../__chunks/UYRJLDVS.js";
23
- import "../__chunks/E3XM3D67.js";
23
+ import "../__chunks/JPXNJYSO.js";
24
24
  import "../__chunks/CHKJ74UC.js";
25
25
  import "../__chunks/7452U3HH.js";
26
26
  import "../__chunks/XPF5GU3Q.js";
@@ -7,9 +7,9 @@ import {
7
7
  } from "../__chunks/V4ZFXDFK.js";
8
8
  import {
9
9
  useRadio
10
- } from "../__chunks/6HKEBMMA.js";
10
+ } from "../__chunks/7SHHFY4P.js";
11
11
  import "../__chunks/XEV62JUQ.js";
12
- import "../__chunks/YGCD7HIZ.js";
12
+ import "../__chunks/R2WNOXYG.js";
13
13
  import "../__chunks/NWCBQ4CV.js";
14
14
  import "../__chunks/UH3I23HL.js";
15
15
  import "../__chunks/6QXBPV75.js";
@@ -2,10 +2,10 @@
2
2
  import {
3
3
  Hovercard,
4
4
  useHovercard
5
- } from "../__chunks/HQ7YVNMA.js";
5
+ } from "../__chunks/WEU2EOWJ.js";
6
6
  import "../__chunks/YMV43K4F.js";
7
- import "../__chunks/2WETNHXU.js";
8
- import "../__chunks/PFM7J2TR.js";
7
+ import "../__chunks/SXPADS2D.js";
8
+ import "../__chunks/PDVJHECS.js";
9
9
  import "../__chunks/57VLL43X.js";
10
10
  import "../__chunks/CLF4PQ7T.js";
11
11
  import "../__chunks/BULCTPRV.js";
@@ -22,7 +22,7 @@ import "../__chunks/72E5EPFF.js";
22
22
  import "../__chunks/X6WIMZJE.js";
23
23
  import "../__chunks/HPP6CWMY.js";
24
24
  import "../__chunks/UYRJLDVS.js";
25
- import "../__chunks/E3XM3D67.js";
25
+ import "../__chunks/JPXNJYSO.js";
26
26
  import "../__chunks/CHKJ74UC.js";
27
27
  import "../__chunks/7452U3HH.js";
28
28
  import "../__chunks/XPF5GU3Q.js";
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  useMenubar
4
- } from "../__chunks/TZJDOU75.js";
4
+ } from "../__chunks/7R5VX7DV.js";
5
5
  import "../__chunks/KA4GX64Z.js";
6
6
  import "../__chunks/FWQLUQ4T.js";
7
- import "../__chunks/FHDXHZLB.js";
7
+ import "../__chunks/57KNUQTI.js";
8
8
  import "../__chunks/6QXBPV75.js";
9
9
  import "../__chunks/A6ER4BO6.js";
10
10
  import "../__chunks/HDMIVTNE.js";
@@ -40,5 +40,19 @@ export interface MenuItemCheckOptions<T extends As = "span"> extends Omit<Checkb
40
40
  * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
41
41
  */
42
42
  store?: MenuStore;
43
+ /**
44
+ * Determines if the check mark should be displayed. This value is automatically
45
+ * derived from the parent
46
+ * [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio) or
47
+ * [`MenuItemCheckbox`](https://ariakit.org/reference/menu-item-checkbox)
48
+ * component.
49
+ *
50
+ * Manually setting this prop will supersede the derived value.
51
+ *
52
+ * Live examples:
53
+ * - [Submenu with
54
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
55
+ */
56
+ checked?: CheckboxCheckOptions<T>["checked"];
43
57
  }
44
58
  export type MenuItemCheckProps<T extends As = "span"> = Props<MenuItemCheckOptions<T>>;
@@ -8,14 +8,14 @@ import {
8
8
  } from "../__chunks/IIVLUKKG.js";
9
9
  import {
10
10
  useMenuItem
11
- } from "../__chunks/BJR5BFSV.js";
11
+ } from "../__chunks/CVFC2LN3.js";
12
12
  import {
13
13
  useMenuScopedContext
14
14
  } from "../__chunks/YGMEBI3A.js";
15
15
  import "../__chunks/KA4GX64Z.js";
16
16
  import "../__chunks/G6ONQ5EH.js";
17
17
  import "../__chunks/6XBVQI3K.js";
18
- import "../__chunks/YGCD7HIZ.js";
18
+ import "../__chunks/R2WNOXYG.js";
19
19
  import "../__chunks/NWCBQ4CV.js";
20
20
  import "../__chunks/UH3I23HL.js";
21
21
  import "../__chunks/6QXBPV75.js";
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useMenuItem
4
- } from "../__chunks/BJR5BFSV.js";
4
+ } from "../__chunks/CVFC2LN3.js";
5
5
  import {
6
6
  MenuItemCheckedContext,
7
7
  useMenuScopedContext
@@ -9,10 +9,10 @@ import {
9
9
  import "../__chunks/KA4GX64Z.js";
10
10
  import {
11
11
  useRadio
12
- } from "../__chunks/6HKEBMMA.js";
12
+ } from "../__chunks/7SHHFY4P.js";
13
13
  import "../__chunks/XEV62JUQ.js";
14
14
  import "../__chunks/G6ONQ5EH.js";
15
- import "../__chunks/YGCD7HIZ.js";
15
+ import "../__chunks/R2WNOXYG.js";
16
16
  import "../__chunks/NWCBQ4CV.js";
17
17
  import "../__chunks/UH3I23HL.js";
18
18
  import "../__chunks/6QXBPV75.js";
@@ -50,7 +50,14 @@ export interface MenuItemOptions<T extends As = "div"> extends CompositeItemOpti
50
50
  */
51
51
  store?: MenubarStore | MenuStore;
52
52
  /**
53
- * Whether to hide the menu when the menu item is clicked.
53
+ * Whether to hide the menu when a menu item is clicked. This prop won't be
54
+ * invoked if the click is on a link and modifier keys are used to open the
55
+ * link in a new tab or download it.
56
+ *
57
+ * Live examples:
58
+ * - [Submenu with
59
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
60
+ * - [Sliding Menu](https://ariakit.org/examples/menu-slide)
54
61
  * @default true
55
62
  */
56
63
  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
@@ -2,11 +2,11 @@
2
2
  import {
3
3
  MenuItem,
4
4
  useMenuItem
5
- } from "../__chunks/BJR5BFSV.js";
5
+ } from "../__chunks/CVFC2LN3.js";
6
6
  import "../__chunks/YGMEBI3A.js";
7
7
  import "../__chunks/KA4GX64Z.js";
8
8
  import "../__chunks/G6ONQ5EH.js";
9
- import "../__chunks/YGCD7HIZ.js";
9
+ import "../__chunks/R2WNOXYG.js";
10
10
  import "../__chunks/NWCBQ4CV.js";
11
11
  import "../__chunks/UH3I23HL.js";
12
12
  import "../__chunks/6QXBPV75.js";
@@ -2,11 +2,11 @@
2
2
  import {
3
3
  MenuList,
4
4
  useMenuList
5
- } from "../__chunks/DHHIMTTV.js";
5
+ } from "../__chunks/DENCHBDS.js";
6
6
  import "../__chunks/YGMEBI3A.js";
7
7
  import "../__chunks/KA4GX64Z.js";
8
8
  import "../__chunks/HBGJOTTX.js";
9
- import "../__chunks/FHDXHZLB.js";
9
+ import "../__chunks/57KNUQTI.js";
10
10
  import "../__chunks/6QXBPV75.js";
11
11
  import "../__chunks/IB7YUKH5.js";
12
12
  import "../__chunks/4UUKJZ4V.js";
@@ -36,6 +36,8 @@ export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> e
36
36
  *
37
37
  * Live examples:
38
38
  * - [MenuItemCheckbox](https://ariakit.org/examples/menu-item-checkbox)
39
+ * - [Submenu with
40
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
39
41
  */
40
42
  setValues?: BivariantCallback<(values: MenuStoreState<T>["values"]) => void>;
41
43
  /**
package/esm/menu/menu.js CHANGED
@@ -1,24 +1,24 @@
1
1
  "use client";
2
2
  import {
3
3
  useMenuList
4
- } from "../__chunks/DHHIMTTV.js";
4
+ } from "../__chunks/DENCHBDS.js";
5
5
  import {
6
6
  useMenuProviderContext
7
7
  } from "../__chunks/YGMEBI3A.js";
8
8
  import "../__chunks/KA4GX64Z.js";
9
9
  import "../__chunks/HBGJOTTX.js";
10
- import "../__chunks/FHDXHZLB.js";
10
+ import "../__chunks/57KNUQTI.js";
11
11
  import "../__chunks/6QXBPV75.js";
12
12
  import "../__chunks/IB7YUKH5.js";
13
13
  import "../__chunks/4UUKJZ4V.js";
14
14
  import {
15
15
  useHovercard
16
- } from "../__chunks/HQ7YVNMA.js";
16
+ } from "../__chunks/WEU2EOWJ.js";
17
17
  import "../__chunks/YMV43K4F.js";
18
- import "../__chunks/2WETNHXU.js";
18
+ import "../__chunks/SXPADS2D.js";
19
19
  import {
20
20
  createDialogComponent
21
- } from "../__chunks/PFM7J2TR.js";
21
+ } from "../__chunks/PDVJHECS.js";
22
22
  import "../__chunks/57VLL43X.js";
23
23
  import "../__chunks/CLF4PQ7T.js";
24
24
  import "../__chunks/BULCTPRV.js";
@@ -35,7 +35,7 @@ import "../__chunks/72E5EPFF.js";
35
35
  import "../__chunks/X6WIMZJE.js";
36
36
  import "../__chunks/HPP6CWMY.js";
37
37
  import "../__chunks/UYRJLDVS.js";
38
- import "../__chunks/E3XM3D67.js";
38
+ import "../__chunks/JPXNJYSO.js";
39
39
  import "../__chunks/CHKJ74UC.js";
40
40
  import "../__chunks/7452U3HH.js";
41
41
  import "../__chunks/XPF5GU3Q.js";
@@ -55,7 +55,9 @@ import {
55
55
  } from "../__chunks/3ORBWXWF.js";
56
56
  import "../__chunks/6SB7F42L.js";
57
57
  import "../__chunks/SMM5JVLC.js";
58
- import "../__chunks/4OZYHFMH.js";
58
+ import {
59
+ useStoreState
60
+ } from "../__chunks/4OZYHFMH.js";
59
61
  import {
60
62
  useMergeRefs
61
63
  } from "../__chunks/6O5OEQGF.js";
@@ -67,7 +69,7 @@ import {
67
69
  } from "../__chunks/4R3V3JGP.js";
68
70
 
69
71
  // src/menu/menu.tsx
70
- import { createRef, useEffect, useRef, useState } from "react";
72
+ import { createRef, useEffect, useMemo, useRef, useState } from "react";
71
73
  import { fireEvent } from "@ariakit/core/utils/events";
72
74
  import { hasFocusWithin } from "@ariakit/core/utils/focus";
73
75
  import { invariant, isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
@@ -143,6 +145,31 @@ var useMenu = createHook(
143
145
  const modal = hasParentMenu ? false : modalProp;
144
146
  const mayAutoFocusOnShow = !!autoFocusOnShow;
145
147
  const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || !!modal;
148
+ const contentElement = useStoreState(
149
+ store.combobox || store,
150
+ "contentElement"
151
+ );
152
+ const parentContentElement = useStoreState(
153
+ (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
154
+ "contentElement"
155
+ );
156
+ const preserveTabOrderAnchor = useMemo(() => {
157
+ if (!parentContentElement)
158
+ return;
159
+ if (!contentElement)
160
+ return;
161
+ const role = contentElement.getAttribute("role");
162
+ const parentRole = parentContentElement.getAttribute("role");
163
+ const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar";
164
+ if (parentIsMenuOrMenubar && role === "menu")
165
+ return;
166
+ return parentContentElement;
167
+ }, [contentElement, parentContentElement]);
168
+ if (preserveTabOrderAnchor !== void 0) {
169
+ props = __spreadValues({
170
+ preserveTabOrderAnchor
171
+ }, props);
172
+ }
146
173
  props = useHovercard(__spreadProps(__spreadValues({
147
174
  store,
148
175
  alwaysVisible,
@@ -156,9 +183,7 @@ var useMenu = createHook(
156
183
  return true;
157
184
  },
158
185
  hideOnHoverOutside: (event) => {
159
- if (!store)
160
- return true;
161
- const { disclosureElement, activeId } = store.getState();
186
+ const disclosureElement = store == null ? void 0 : store.getState().disclosureElement;
162
187
  const getHideOnHoverOutside = () => {
163
188
  if (typeof hideOnHoverOutside === "function") {
164
189
  return hideOnHoverOutside(event);
@@ -186,8 +211,11 @@ var useMenu = createHook(
186
211
  fireEvent(disclosureElement, "mouseout", event);
187
212
  if (!hasFocusWithin(disclosureElement))
188
213
  return true;
189
- if (disclosureElement.id !== activeId)
190
- return true;
214
+ requestAnimationFrame(() => {
215
+ if (hasFocusWithin(disclosureElement))
216
+ return;
217
+ store == null ? void 0 : store.hide();
218
+ });
191
219
  return false;
192
220
  },
193
221
  modal,
@@ -2,10 +2,10 @@
2
2
  import {
3
3
  Menubar,
4
4
  useMenubar
5
- } from "../__chunks/TZJDOU75.js";
5
+ } from "../__chunks/7R5VX7DV.js";
6
6
  import "../__chunks/KA4GX64Z.js";
7
7
  import "../__chunks/FWQLUQ4T.js";
8
- import "../__chunks/FHDXHZLB.js";
8
+ import "../__chunks/57KNUQTI.js";
9
9
  import "../__chunks/6QXBPV75.js";
10
10
  import "../__chunks/A6ER4BO6.js";
11
11
  import "../__chunks/HDMIVTNE.js";
@@ -100,6 +100,8 @@ export interface PopoverOptions<T extends As = "div"> extends DialogOptions<T> {
100
100
  *
101
101
  * Live examples:
102
102
  * - [Menubar](https://ariakit.org/components/menubar)
103
+ * - [Submenu with
104
+ * Combobox](https://ariakit.org/examples/menu-nested-combobox)
103
105
  * @default false
104
106
  */
105
107
  overlap?: boolean;
@@ -2,8 +2,8 @@
2
2
  import {
3
3
  Popover,
4
4
  usePopover
5
- } from "../__chunks/2WETNHXU.js";
6
- import "../__chunks/PFM7J2TR.js";
5
+ } from "../__chunks/SXPADS2D.js";
6
+ import "../__chunks/PDVJHECS.js";
7
7
  import "../__chunks/57VLL43X.js";
8
8
  import "../__chunks/CLF4PQ7T.js";
9
9
  import "../__chunks/BULCTPRV.js";
@@ -20,7 +20,7 @@ import "../__chunks/72E5EPFF.js";
20
20
  import "../__chunks/X6WIMZJE.js";
21
21
  import "../__chunks/HPP6CWMY.js";
22
22
  import "../__chunks/UYRJLDVS.js";
23
- import "../__chunks/E3XM3D67.js";
23
+ import "../__chunks/JPXNJYSO.js";
24
24
  import "../__chunks/CHKJ74UC.js";
25
25
  import "../__chunks/7452U3HH.js";
26
26
  import "../__chunks/XPF5GU3Q.js";
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Portal,
4
4
  usePortal
5
- } from "../__chunks/E3XM3D67.js";
5
+ } from "../__chunks/JPXNJYSO.js";
6
6
  import "../__chunks/CHKJ74UC.js";
7
7
  import "../__chunks/7452U3HH.js";
8
8
  import "../__chunks/BG6HZDS7.js";
@@ -5,7 +5,7 @@ import {
5
5
  } from "../__chunks/XEV62JUQ.js";
6
6
  import {
7
7
  useComposite
8
- } from "../__chunks/FHDXHZLB.js";
8
+ } from "../__chunks/57KNUQTI.js";
9
9
  import "../__chunks/6QXBPV75.js";
10
10
  import "../__chunks/IB7YUKH5.js";
11
11
  import "../__chunks/4UUKJZ4V.js";
@@ -2,9 +2,9 @@
2
2
  import {
3
3
  Radio,
4
4
  useRadio
5
- } from "../__chunks/6HKEBMMA.js";
5
+ } from "../__chunks/7SHHFY4P.js";
6
6
  import "../__chunks/XEV62JUQ.js";
7
- import "../__chunks/YGCD7HIZ.js";
7
+ import "../__chunks/R2WNOXYG.js";
8
8
  import "../__chunks/NWCBQ4CV.js";
9
9
  import "../__chunks/UH3I23HL.js";
10
10
  import "../__chunks/6QXBPV75.js";
@@ -8,7 +8,7 @@ import {
8
8
  } from "../__chunks/5HVNGX6D.js";
9
9
  import {
10
10
  useCompositeItem
11
- } from "../__chunks/YGCD7HIZ.js";
11
+ } from "../__chunks/R2WNOXYG.js";
12
12
  import "../__chunks/NWCBQ4CV.js";
13
13
  import "../__chunks/UH3I23HL.js";
14
14
  import "../__chunks/6QXBPV75.js";
@@ -2,10 +2,10 @@
2
2
  import {
3
3
  SelectList,
4
4
  useSelectList
5
- } from "../__chunks/UV2O3GRQ.js";
5
+ } from "../__chunks/7D63S66W.js";
6
6
  import "../__chunks/HBGJOTTX.js";
7
7
  import "../__chunks/5HVNGX6D.js";
8
- import "../__chunks/FHDXHZLB.js";
8
+ import "../__chunks/57KNUQTI.js";
9
9
  import "../__chunks/6QXBPV75.js";
10
10
  import "../__chunks/IB7YUKH5.js";
11
11
  import "../__chunks/4UUKJZ4V.js";
@@ -1,21 +1,21 @@
1
1
  "use client";
2
2
  import {
3
3
  useSelectList
4
- } from "../__chunks/UV2O3GRQ.js";
4
+ } from "../__chunks/7D63S66W.js";
5
5
  import "../__chunks/HBGJOTTX.js";
6
6
  import {
7
7
  useSelectProviderContext
8
8
  } from "../__chunks/5HVNGX6D.js";
9
- import "../__chunks/FHDXHZLB.js";
9
+ import "../__chunks/57KNUQTI.js";
10
10
  import "../__chunks/6QXBPV75.js";
11
11
  import "../__chunks/IB7YUKH5.js";
12
12
  import "../__chunks/4UUKJZ4V.js";
13
13
  import {
14
14
  usePopover
15
- } from "../__chunks/2WETNHXU.js";
15
+ } from "../__chunks/SXPADS2D.js";
16
16
  import {
17
17
  createDialogComponent
18
- } from "../__chunks/PFM7J2TR.js";
18
+ } from "../__chunks/PDVJHECS.js";
19
19
  import "../__chunks/57VLL43X.js";
20
20
  import "../__chunks/CLF4PQ7T.js";
21
21
  import "../__chunks/BULCTPRV.js";
@@ -32,7 +32,7 @@ import "../__chunks/72E5EPFF.js";
32
32
  import "../__chunks/X6WIMZJE.js";
33
33
  import "../__chunks/HPP6CWMY.js";
34
34
  import "../__chunks/UYRJLDVS.js";
35
- import "../__chunks/E3XM3D67.js";
35
+ import "../__chunks/JPXNJYSO.js";
36
36
  import "../__chunks/CHKJ74UC.js";
37
37
  import "../__chunks/7452U3HH.js";
38
38
  import "../__chunks/XPF5GU3Q.js";
@@ -5,7 +5,7 @@ import {
5
5
  } from "../__chunks/4B73HROV.js";
6
6
  import {
7
7
  useComposite
8
- } from "../__chunks/FHDXHZLB.js";
8
+ } from "../__chunks/57KNUQTI.js";
9
9
  import "../__chunks/6QXBPV75.js";
10
10
  import "../__chunks/IB7YUKH5.js";
11
11
  import "../__chunks/4UUKJZ4V.js";
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useTabStore
4
- } from "../__chunks/K5VQ2XTM.js";
4
+ } from "../__chunks/LZUSNDXA.js";
5
5
  import {
6
6
  TabContextProvider
7
7
  } from "../__chunks/4B73HROV.js";