reka-ui 2.9.7 → 2.9.9

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 (178) hide show
  1. package/dist/Autocomplete/AutocompleteInput.cjs +12 -16
  2. package/dist/Autocomplete/AutocompleteInput.cjs.map +1 -1
  3. package/dist/Autocomplete/AutocompleteInput.js +13 -17
  4. package/dist/Autocomplete/AutocompleteInput.js.map +1 -1
  5. package/dist/ColorField/ColorFieldInput.cjs +10 -2
  6. package/dist/ColorField/ColorFieldInput.cjs.map +1 -1
  7. package/dist/ColorField/ColorFieldInput.js +10 -2
  8. package/dist/ColorField/ColorFieldInput.js.map +1 -1
  9. package/dist/Combobox/ComboboxInput.cjs +27 -9
  10. package/dist/Combobox/ComboboxInput.cjs.map +1 -1
  11. package/dist/Combobox/ComboboxInput.js +28 -10
  12. package/dist/Combobox/ComboboxInput.js.map +1 -1
  13. package/dist/DateField/DateFieldInput.cjs +4 -1
  14. package/dist/DateField/DateFieldInput.cjs.map +1 -1
  15. package/dist/DateField/DateFieldInput.js +4 -1
  16. package/dist/DateField/DateFieldInput.js.map +1 -1
  17. package/dist/DateField/DateFieldRoot.cjs +1 -0
  18. package/dist/DateField/DateFieldRoot.cjs.map +1 -1
  19. package/dist/DateField/DateFieldRoot.js +1 -0
  20. package/dist/DateField/DateFieldRoot.js.map +1 -1
  21. package/dist/DatePicker/DatePickerRoot.cjs +15 -1
  22. package/dist/DatePicker/DatePickerRoot.cjs.map +1 -1
  23. package/dist/DatePicker/DatePickerRoot.js +15 -1
  24. package/dist/DatePicker/DatePickerRoot.js.map +1 -1
  25. package/dist/DateRangeField/DateRangeFieldInput.cjs +4 -1
  26. package/dist/DateRangeField/DateRangeFieldInput.cjs.map +1 -1
  27. package/dist/DateRangeField/DateRangeFieldInput.js +4 -1
  28. package/dist/DateRangeField/DateRangeFieldInput.js.map +1 -1
  29. package/dist/DateRangeField/DateRangeFieldRoot.cjs +1 -0
  30. package/dist/DateRangeField/DateRangeFieldRoot.cjs.map +1 -1
  31. package/dist/DateRangeField/DateRangeFieldRoot.js +1 -0
  32. package/dist/DateRangeField/DateRangeFieldRoot.js.map +1 -1
  33. package/dist/Dialog/DialogOverlayImpl.cjs +6 -1
  34. package/dist/Dialog/DialogOverlayImpl.cjs.map +1 -1
  35. package/dist/Dialog/DialogOverlayImpl.js +7 -2
  36. package/dist/Dialog/DialogOverlayImpl.js.map +1 -1
  37. package/dist/DropdownMenu/DropdownMenuFilter.cjs +19 -2
  38. package/dist/DropdownMenu/DropdownMenuFilter.cjs.map +1 -1
  39. package/dist/DropdownMenu/DropdownMenuFilter.js +19 -2
  40. package/dist/DropdownMenu/DropdownMenuFilter.js.map +1 -1
  41. package/dist/FocusScope/FocusScope.cjs +2 -0
  42. package/dist/FocusScope/FocusScope.cjs.map +1 -1
  43. package/dist/FocusScope/FocusScope.js +2 -0
  44. package/dist/FocusScope/FocusScope.js.map +1 -1
  45. package/dist/Listbox/ListboxFilter.cjs +29 -10
  46. package/dist/Listbox/ListboxFilter.cjs.map +1 -1
  47. package/dist/Listbox/ListboxFilter.js +30 -11
  48. package/dist/Listbox/ListboxFilter.js.map +1 -1
  49. package/dist/Listbox/ListboxItem.cjs +7 -2
  50. package/dist/Listbox/ListboxItem.cjs.map +1 -1
  51. package/dist/Listbox/ListboxItem.js +7 -2
  52. package/dist/Listbox/ListboxItem.js.map +1 -1
  53. package/dist/Listbox/ListboxRoot.cjs +12 -6
  54. package/dist/Listbox/ListboxRoot.cjs.map +1 -1
  55. package/dist/Listbox/ListboxRoot.js +12 -6
  56. package/dist/Listbox/ListboxRoot.js.map +1 -1
  57. package/dist/Menu/MenuItemImpl.cjs +1 -1
  58. package/dist/Menu/MenuItemImpl.cjs.map +1 -1
  59. package/dist/Menu/MenuItemImpl.js +1 -1
  60. package/dist/Menu/MenuItemImpl.js.map +1 -1
  61. package/dist/NavigationMenu/NavigationMenuContentImpl.cjs +1 -0
  62. package/dist/NavigationMenu/NavigationMenuContentImpl.cjs.map +1 -1
  63. package/dist/NavigationMenu/NavigationMenuContentImpl.js +1 -0
  64. package/dist/NavigationMenu/NavigationMenuContentImpl.js.map +1 -1
  65. package/dist/NavigationMenu/NavigationMenuRoot.cjs +16 -3
  66. package/dist/NavigationMenu/NavigationMenuRoot.cjs.map +1 -1
  67. package/dist/NavigationMenu/NavigationMenuRoot.js +16 -3
  68. package/dist/NavigationMenu/NavigationMenuRoot.js.map +1 -1
  69. package/dist/NumberField/NumberFieldInput.cjs +46 -13
  70. package/dist/NumberField/NumberFieldInput.cjs.map +1 -1
  71. package/dist/NumberField/NumberFieldInput.js +47 -14
  72. package/dist/NumberField/NumberFieldInput.js.map +1 -1
  73. package/dist/PinInput/PinInputInput.cjs +37 -2
  74. package/dist/PinInput/PinInputInput.cjs.map +1 -1
  75. package/dist/PinInput/PinInputInput.js +37 -2
  76. package/dist/PinInput/PinInputInput.js.map +1 -1
  77. package/dist/ScrollArea/ScrollAreaScrollbarX.cjs +3 -0
  78. package/dist/ScrollArea/ScrollAreaScrollbarX.cjs.map +1 -1
  79. package/dist/ScrollArea/ScrollAreaScrollbarX.js +4 -1
  80. package/dist/ScrollArea/ScrollAreaScrollbarX.js.map +1 -1
  81. package/dist/ScrollArea/ScrollAreaScrollbarY.cjs +3 -0
  82. package/dist/ScrollArea/ScrollAreaScrollbarY.cjs.map +1 -1
  83. package/dist/ScrollArea/ScrollAreaScrollbarY.js +4 -1
  84. package/dist/ScrollArea/ScrollAreaScrollbarY.js.map +1 -1
  85. package/dist/Select/SelectContent.cjs +15 -2
  86. package/dist/Select/SelectContent.cjs.map +1 -1
  87. package/dist/Select/SelectContent.js +16 -3
  88. package/dist/Select/SelectContent.js.map +1 -1
  89. package/dist/TagsInput/TagsInputInput.cjs +12 -13
  90. package/dist/TagsInput/TagsInputInput.cjs.map +1 -1
  91. package/dist/TagsInput/TagsInputInput.js +13 -14
  92. package/dist/TagsInput/TagsInputInput.js.map +1 -1
  93. package/dist/TagsInput/TagsInputRoot.cjs +1 -0
  94. package/dist/TagsInput/TagsInputRoot.cjs.map +1 -1
  95. package/dist/TagsInput/TagsInputRoot.js +1 -0
  96. package/dist/TagsInput/TagsInputRoot.js.map +1 -1
  97. package/dist/TimeField/TimeFieldInput.cjs +4 -1
  98. package/dist/TimeField/TimeFieldInput.cjs.map +1 -1
  99. package/dist/TimeField/TimeFieldInput.js +4 -1
  100. package/dist/TimeField/TimeFieldInput.js.map +1 -1
  101. package/dist/TimeField/TimeFieldRoot.cjs +1 -0
  102. package/dist/TimeField/TimeFieldRoot.cjs.map +1 -1
  103. package/dist/TimeField/TimeFieldRoot.js +1 -0
  104. package/dist/TimeField/TimeFieldRoot.js.map +1 -1
  105. package/dist/TimeRangeField/TimeRangeFieldInput.cjs +4 -1
  106. package/dist/TimeRangeField/TimeRangeFieldInput.cjs.map +1 -1
  107. package/dist/TimeRangeField/TimeRangeFieldInput.js +4 -1
  108. package/dist/TimeRangeField/TimeRangeFieldInput.js.map +1 -1
  109. package/dist/TimeRangeField/TimeRangeFieldRoot.cjs +1 -0
  110. package/dist/TimeRangeField/TimeRangeFieldRoot.cjs.map +1 -1
  111. package/dist/TimeRangeField/TimeRangeFieldRoot.js +1 -0
  112. package/dist/TimeRangeField/TimeRangeFieldRoot.js.map +1 -1
  113. package/dist/date/useDateField.cjs +38 -0
  114. package/dist/date/useDateField.cjs.map +1 -1
  115. package/dist/date/useDateField.js +38 -0
  116. package/dist/date/useDateField.js.map +1 -1
  117. package/dist/index.cjs +1 -0
  118. package/dist/index.js +1 -0
  119. package/dist/index2.d.ts.map +1 -1
  120. package/dist/index3.d.cts +24 -16
  121. package/dist/index3.d.cts.map +1 -1
  122. package/dist/index3.d.ts +13 -5
  123. package/dist/index3.d.ts.map +1 -1
  124. package/dist/index4.d.cts +655 -655
  125. package/dist/index4.d.cts.map +1 -1
  126. package/dist/index4.d.ts +684 -684
  127. package/dist/index4.d.ts.map +1 -1
  128. package/dist/internal.cjs +1 -0
  129. package/dist/internal.d.cts +2 -2
  130. package/dist/internal.d.cts.map +1 -1
  131. package/dist/internal.d.ts +2 -2
  132. package/dist/internal.d.ts.map +1 -1
  133. package/dist/internal.js +1 -0
  134. package/dist/shared/useComposing.cjs +30 -0
  135. package/dist/shared/useComposing.cjs.map +1 -0
  136. package/dist/shared/useComposing.js +24 -0
  137. package/dist/shared/useComposing.js.map +1 -0
  138. package/dist/shared.cjs +2 -0
  139. package/dist/shared.d.cts +2 -2
  140. package/dist/shared.d.ts +2 -2
  141. package/dist/shared.js +2 -1
  142. package/package.json +4 -4
  143. package/src/Autocomplete/AutocompleteInput.vue +13 -17
  144. package/src/Calendar/CalendarRoot.vue +1 -1
  145. package/src/ColorField/ColorFieldInput.vue +11 -0
  146. package/src/Combobox/ComboboxInput.vue +37 -7
  147. package/src/DateField/DateFieldInput.vue +6 -0
  148. package/src/DateField/DateFieldRoot.vue +3 -0
  149. package/src/DatePicker/DatePickerRoot.vue +18 -2
  150. package/src/DateRangeField/DateRangeFieldInput.vue +6 -0
  151. package/src/DateRangeField/DateRangeFieldRoot.vue +4 -1
  152. package/src/Dialog/DialogOverlayImpl.vue +1 -0
  153. package/src/DropdownMenu/DropdownMenuFilter.vue +20 -1
  154. package/src/FocusScope/FocusScope.vue +5 -0
  155. package/src/Listbox/ListboxFilter.vue +39 -8
  156. package/src/Listbox/ListboxItem.vue +2 -2
  157. package/src/Listbox/ListboxRoot.vue +17 -4
  158. package/src/Menu/MenuItemImpl.vue +1 -1
  159. package/src/MonthPicker/MonthPickerRoot.vue +1 -1
  160. package/src/NavigationMenu/NavigationMenuContentImpl.vue +3 -0
  161. package/src/NavigationMenu/NavigationMenuRoot.vue +19 -3
  162. package/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue +45 -0
  163. package/src/NumberField/NumberFieldInput.vue +45 -8
  164. package/src/PinInput/PinInputInput.vue +44 -1
  165. package/src/ScrollArea/ScrollAreaScrollbarX.vue +6 -1
  166. package/src/ScrollArea/ScrollAreaScrollbarY.vue +6 -1
  167. package/src/Select/SelectContent.vue +19 -3
  168. package/src/Select/__test__/SelectUnmountCleanup.vue +43 -0
  169. package/src/TagsInput/TagsInputInput.vue +16 -14
  170. package/src/TagsInput/TagsInputRoot.vue +3 -0
  171. package/src/TimeField/TimeFieldInput.vue +6 -0
  172. package/src/TimeField/TimeFieldRoot.vue +3 -0
  173. package/src/TimeRangeField/TimeRangeFieldInput.vue +6 -0
  174. package/src/TimeRangeField/TimeRangeFieldRoot.vue +3 -0
  175. package/src/YearPicker/YearPickerRoot.vue +1 -1
  176. package/src/shared/date/useDateField.ts +75 -1
  177. package/src/shared/index.ts +1 -0
  178. package/src/shared/useComposing.ts +18 -0
package/dist/internal.cjs CHANGED
@@ -14,6 +14,7 @@ require('./shared/trap-focus.cjs');
14
14
  require('./shared/useArrowNavigation.cjs');
15
15
  require('./ConfigProvider/ConfigProvider.cjs');
16
16
  require('./shared/useBodyScrollLock.cjs');
17
+ require('./shared/useComposing.cjs');
17
18
  require('./date/comparators.cjs');
18
19
  require('./date/utils.cjs');
19
20
  require('./date/calendar.cjs');
@@ -1,7 +1,7 @@
1
1
  import "./index2.cjs";
2
2
  import "./index3.cjs";
3
3
  import { MenuArrowProps, MenuCheckboxItemEmits, MenuCheckboxItemProps, MenuContentEmits, MenuContentProps, MenuEmits, MenuGroupProps, MenuItemEmits, MenuItemIndicatorProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuRadioGroupEmits, MenuRadioGroupProps, MenuRadioItemEmits, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentEmits, MenuSubContentProps, MenuSubEmits, MenuSubProps, MenuSubTriggerProps, PopperAnchorProps, _default$277 as _default$13, _default$278 as _default$8, _default$279 as _default, _default$280 as _default$6, _default$281 as _default$10, _default$282 as _default$3, _default$283 as _default$14, _default$284 as _default$12, _default$285 as _default$2, _default$286 as _default$1, _default$287 as _default$11, _default$288 as _default$7, _default$290 as _default$9, _default$291 as _default$4, _default$292 as _default$5, injectMenuContext, injectMenuRootContext } from "./index4.cjs";
4
- import * as vue785 from "vue";
4
+ import * as vue19 from "vue";
5
5
 
6
6
  //#region src/Menu/MenuAnchor.vue.d.ts
7
7
  interface MenuAnchorProps extends PopperAnchorProps {}
@@ -9,7 +9,7 @@ declare var __VLS_8: {};
9
9
  type __VLS_Slots = {} & {
10
10
  default?: (props: typeof __VLS_8) => any;
11
11
  };
12
- declare const __VLS_base: vue785.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue785.ComponentOptionsMixin, vue785.ComponentOptionsMixin, {}, string, vue785.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue785.ComponentProvideOptions, false, {}, any>;
12
+ declare const __VLS_base: vue19.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue19.ComponentOptionsMixin, vue19.ComponentOptionsMixin, {}, string, vue19.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue19.ComponentProvideOptions, false, {}, any>;
13
13
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
14
14
  declare const _default$15: typeof __VLS_export;
15
15
  type __VLS_WithSlots<T, S> = T & {
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.cts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,MAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,MAAA,CAAA,qBAAA,EAAA,MAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
1
+ {"version":3,"file":"internal.d.cts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,KAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,KAAA,CAAA,qBAAA,EAAA,KAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,KAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,KAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
@@ -1,7 +1,7 @@
1
1
  import "./index2.js";
2
2
  import "./index3.js";
3
3
  import { MenuArrowProps, MenuCheckboxItemEmits, MenuCheckboxItemProps, MenuContentEmits, MenuContentProps, MenuEmits, MenuGroupProps, MenuItemEmits, MenuItemIndicatorProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuRadioGroupEmits, MenuRadioGroupProps, MenuRadioItemEmits, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentEmits, MenuSubContentProps, MenuSubEmits, MenuSubProps, MenuSubTriggerProps, PopperAnchorProps, _default$277 as _default$13, _default$278 as _default$8, _default$279 as _default, _default$280 as _default$6, _default$281 as _default$10, _default$282 as _default$3, _default$283 as _default$14, _default$284 as _default$12, _default$285 as _default$2, _default$286 as _default$1, _default$287 as _default$11, _default$288 as _default$7, _default$290 as _default$9, _default$291 as _default$4, _default$292 as _default$5, injectMenuContext, injectMenuRootContext } from "./index4.js";
4
- import * as vue1111 from "vue";
4
+ import * as vue372 from "vue";
5
5
 
6
6
  //#region src/Menu/MenuAnchor.vue.d.ts
7
7
  interface MenuAnchorProps extends PopperAnchorProps {}
@@ -9,7 +9,7 @@ declare var __VLS_8: {};
9
9
  type __VLS_Slots = {} & {
10
10
  default?: (props: typeof __VLS_8) => any;
11
11
  };
12
- declare const __VLS_base: vue1111.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue1111.ComponentOptionsMixin, vue1111.ComponentOptionsMixin, {}, string, vue1111.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue1111.ComponentProvideOptions, false, {}, any>;
12
+ declare const __VLS_base: vue372.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue372.ComponentOptionsMixin, vue372.ComponentOptionsMixin, {}, string, vue372.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue372.ComponentProvideOptions, false, {}, any>;
13
13
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
14
14
  declare const _default$15: typeof __VLS_export;
15
15
  type __VLS_WithSlots<T, S> = T & {
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,OAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,OAAA,CAAA,qBAAA,EAAA,OAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
1
+ {"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,MAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,MAAA,CAAA,qBAAA,EAAA,MAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
package/dist/internal.js CHANGED
@@ -14,6 +14,7 @@ import "./shared/trap-focus.js";
14
14
  import "./shared/useArrowNavigation.js";
15
15
  import "./ConfigProvider/ConfigProvider.js";
16
16
  import "./shared/useBodyScrollLock.js";
17
+ import "./shared/useComposing.js";
17
18
  import "./date/comparators.js";
18
19
  import "./date/utils.js";
19
20
  import "./date/calendar.js";
@@ -0,0 +1,30 @@
1
+ const require_rolldown_runtime = require('../rolldown-runtime.cjs');
2
+ const vue = require_rolldown_runtime.__toESM(require("vue"));
3
+
4
+ //#region src/shared/useComposing.ts
5
+ function useComposing(onEnd) {
6
+ const isComposing = (0, vue.ref)(false);
7
+ function handleCompositionStart() {
8
+ isComposing.value = true;
9
+ }
10
+ function handleCompositionEnd(event) {
11
+ (0, vue.nextTick)(() => {
12
+ isComposing.value = false;
13
+ onEnd?.(event);
14
+ });
15
+ }
16
+ return {
17
+ isComposing,
18
+ handleCompositionStart,
19
+ handleCompositionEnd
20
+ };
21
+ }
22
+
23
+ //#endregion
24
+ Object.defineProperty(exports, 'useComposing', {
25
+ enumerable: true,
26
+ get: function () {
27
+ return useComposing;
28
+ }
29
+ });
30
+ //# sourceMappingURL=useComposing.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useComposing.cjs","names":["onEnd?: (event: CompositionEvent) => void","event: CompositionEvent"],"sources":["../../src/shared/useComposing.ts"],"sourcesContent":[],"mappings":";;;;AAEA,SAAgB,aAAaA,OAA2C;CACtE,MAAM,cAAc,aAAI,MAAM;CAE9B,SAAS,yBAAyB;AAChC,cAAY,QAAQ;CACrB;CAED,SAAS,qBAAqBC,OAAyB;AACrD,oBAAS,MAAM;AACb,eAAY,QAAQ;AACpB,WAAQ,MAAM;EACf,EAAC;CACH;AAED,QAAO;EAAE;EAAa;EAAwB;CAAsB;AACrE"}
@@ -0,0 +1,24 @@
1
+ import { nextTick, ref } from "vue";
2
+
3
+ //#region src/shared/useComposing.ts
4
+ function useComposing(onEnd) {
5
+ const isComposing = ref(false);
6
+ function handleCompositionStart() {
7
+ isComposing.value = true;
8
+ }
9
+ function handleCompositionEnd(event) {
10
+ nextTick(() => {
11
+ isComposing.value = false;
12
+ onEnd?.(event);
13
+ });
14
+ }
15
+ return {
16
+ isComposing,
17
+ handleCompositionStart,
18
+ handleCompositionEnd
19
+ };
20
+ }
21
+
22
+ //#endregion
23
+ export { useComposing };
24
+ //# sourceMappingURL=useComposing.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useComposing.js","names":["onEnd?: (event: CompositionEvent) => void","event: CompositionEvent"],"sources":["../../src/shared/useComposing.ts"],"sourcesContent":[],"mappings":";;;AAEA,SAAgB,aAAaA,OAA2C;CACtE,MAAM,cAAc,IAAI,MAAM;CAE9B,SAAS,yBAAyB;AAChC,cAAY,QAAQ;CACrB;CAED,SAAS,qBAAqBC,OAAyB;AACrD,WAAS,MAAM;AACb,eAAY,QAAQ;AACpB,WAAQ,MAAM;EACf,EAAC;CACH;AAED,QAAO;EAAE;EAAa;EAAwB;CAAsB;AACrE"}
package/dist/shared.cjs CHANGED
@@ -14,6 +14,7 @@ const require_shared_trap_focus = require('./shared/trap-focus.cjs');
14
14
  const require_shared_useArrowNavigation = require('./shared/useArrowNavigation.cjs');
15
15
  require('./ConfigProvider/ConfigProvider.cjs');
16
16
  const require_shared_useBodyScrollLock = require('./shared/useBodyScrollLock.cjs');
17
+ const require_shared_useComposing = require('./shared/useComposing.cjs');
17
18
  require('./date/comparators.cjs');
18
19
  require('./date/utils.cjs');
19
20
  require('./date/calendar.cjs');
@@ -60,6 +61,7 @@ exports.snapValueToStep = require_shared_clamp.snapValueToStep;
60
61
  exports.trapFocus = require_shared_trap_focus.trapFocus;
61
62
  exports.useArrowNavigation = require_shared_useArrowNavigation.useArrowNavigation;
62
63
  exports.useBodyScrollLock = require_shared_useBodyScrollLock.useBodyScrollLock;
64
+ exports.useComposing = require_shared_useComposing.useComposing;
63
65
  exports.useDateFormatter = require_shared_useDateFormatter.useDateFormatter;
64
66
  exports.useDirection = require_shared_useDirection.useDirection;
65
67
  exports.useEmitAsProps = require_shared_useEmitAsProps.useEmitAsProps;
package/dist/shared.d.cts CHANGED
@@ -1,2 +1,2 @@
1
- import { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault } from "./index3.cjs";
2
- export { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
1
+ import { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useComposing, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault } from "./index3.cjs";
2
+ export { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useComposing, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
package/dist/shared.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault } from "./index3.js";
2
- export { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
1
+ import { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useComposing, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault } from "./index3.js";
2
+ export { DateRange, DateStep, DateValue, Formatter, SegmentPart, TimeRange, TimeValue, areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useComposing, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
package/dist/shared.js CHANGED
@@ -14,6 +14,7 @@ import { trapFocus } from "./shared/trap-focus.js";
14
14
  import { useArrowNavigation } from "./shared/useArrowNavigation.js";
15
15
  import "./ConfigProvider/ConfigProvider.js";
16
16
  import { useBodyScrollLock } from "./shared/useBodyScrollLock.js";
17
+ import { useComposing } from "./shared/useComposing.js";
17
18
  import "./date/comparators.js";
18
19
  import "./date/utils.js";
19
20
  import "./date/calendar.js";
@@ -40,4 +41,4 @@ import { useTypeahead } from "./shared/useTypeahead.js";
40
41
  import { withDefault } from "./shared/withDefault.js";
41
42
  import "./shared/index.js";
42
43
 
43
- export { areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
44
+ export { areEqual, chunk, clamp, createContext, findValuesBetween, getActiveElement, handleAndDispatchCustomEvent, isBrowser, isNullish, isValidVNodeElement, isValueEqualOrExist, omit, onFocusOutside, pick, renderSlotFragments, roundToStepPrecision, snapValueToStep, trapFocus, useArrowNavigation, useBodyScrollLock, useComposing, useDateFormatter, useDirection, useEmitAsProps, useFilter, useFocusGuards, useFormControl, useForwardExpose, useForwardProps, useForwardPropsEmits, useForwardRef, useGraceArea, useHideOthers, useId, useKbd, useLocale, useSelectionBehavior, useSize, useStateMachine, useTestKbd, useTypeahead, withDefault };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reka-ui",
3
3
  "type": "module",
4
- "version": "2.9.7",
4
+ "version": "2.9.9",
5
5
  "description": "Vue port for Radix UI Primitives.",
6
6
  "author": "UnoVue Contributors (https://github.com/unovue)",
7
7
  "license": "MIT",
@@ -111,15 +111,15 @@
111
111
  "@tsconfig/node24": "^24.0.0",
112
112
  "@types/jsdom": "^28.0.0",
113
113
  "@types/node": "^24.0.13",
114
- "@vitejs/plugin-vue": "^6.0.6",
114
+ "@vitejs/plugin-vue": "^6.0.7",
115
115
  "@vitest/coverage-istanbul": "^3.2.4",
116
116
  "@vue/test-utils": "^2.4.10",
117
117
  "@vue/tsconfig": "^0.7.0",
118
118
  "jsdom": "^26.1.0",
119
119
  "size-limit": "^12.0.1",
120
120
  "tsdown": "^0.12.9",
121
- "vite": "^8.0.10",
122
- "vitest": "^3.2.4",
121
+ "vite": "^8.0.14",
122
+ "vitest": "^4.1.0",
123
123
  "vitest-axe": "0.1.0",
124
124
  "vitest-canvas-mock": "^0.3.3",
125
125
  "vue": "3.5.17",
@@ -7,11 +7,12 @@ export interface AutocompleteInputProps extends ListboxFilterProps {}
7
7
 
8
8
  <script setup lang="ts">
9
9
  import { useVModel } from '@vueuse/core'
10
- import { nextTick, onMounted, ref, watch } from 'vue'
10
+ import { nextTick, onMounted, watch } from 'vue'
11
11
  import { injectComboboxRootContext } from '@/Combobox/ComboboxRoot.vue'
12
12
  import { ListboxFilter } from '@/Listbox'
13
13
  import { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'
14
14
  import { usePrimitiveElement } from '@/Primitive'
15
+ import { useComposing } from '@/shared'
15
16
  import { injectAutocompleteRootContext } from './AutocompleteRoot.vue'
16
17
 
17
18
  const props = withDefaults(defineProps<AutocompleteInputProps>(), {
@@ -37,22 +38,17 @@ onMounted(() => {
37
38
  rootContext.onInputElementChange(currentElement.value as HTMLInputElement)
38
39
  })
39
40
 
40
- const isComposing = ref(false)
41
- function onCompositionStart() {
42
- isComposing.value = true
43
- }
44
- function onCompositionEnd() {
45
- nextTick(() => {
46
- isComposing.value = false
47
- const el = currentElement.value as HTMLInputElement
48
- if (el)
49
- processInputValue(el.value)
50
- })
51
- }
41
+ const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
42
+ const el = event.target as HTMLInputElement
43
+ if (el)
44
+ processInputValue(el.value)
45
+ })
52
46
 
53
- function handleKeyDown(_ev: KeyboardEvent) {
47
+ function handleKeyDown(ev: KeyboardEvent) {
48
+ // Don't swallow arrow keys mid-composition, they're used for IME candidate navigation
54
49
  if (isComposing.value)
55
50
  return
51
+ ev.preventDefault()
56
52
  if (!rootContext.open.value)
57
53
  rootContext.onOpenChange(true)
58
54
  }
@@ -124,10 +120,10 @@ watch(rootContext.filterState, (_newValue, oldValue) => {
124
120
  autocomplete="off"
125
121
  @click="handleClick"
126
122
  @input="handleInput"
127
- @keydown.down.up.prevent="handleKeyDown"
123
+ @keydown.down.up="handleKeyDown"
128
124
  @focus="handleFocus"
129
- @compositionstart="onCompositionStart"
130
- @compositionend="onCompositionEnd"
125
+ @compositionstart="handleCompositionStart"
126
+ @compositionend="handleCompositionEnd"
131
127
  >
132
128
  <slot />
133
129
  </ListboxFilter>
@@ -98,7 +98,7 @@ export interface CalendarRootProps extends PrimitiveProps {
98
98
  /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
99
99
  prevPage?: (placeholder: DateValue) => DateValue
100
100
  /** The controlled selected date value of the calendar. Can be bound as `v-model`. */
101
- modelValue?: DateValue | DateValue[] | undefined
101
+ modelValue?: DateValue | DateValue[] | null
102
102
  /** Whether multiple dates can be selected */
103
103
  multiple?: boolean
104
104
  /** Whether or not to disable days outside the current view. */
@@ -9,6 +9,7 @@ export interface ColorFieldInputProps extends PrimitiveProps {}
9
9
  <script setup lang="ts">
10
10
  import { computed, ref } from 'vue'
11
11
  import { Primitive } from '@/Primitive'
12
+ import { useComposing } from '@/shared'
12
13
  import { injectColorFieldRootContext } from './ColorFieldRoot.vue'
13
14
 
14
15
  const props = withDefaults(defineProps<ColorFieldInputProps>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<ColorFieldInputProps>(), {
18
19
  const rootContext = injectColorFieldRootContext()
19
20
 
20
21
  const isFocused = ref(false)
22
+ const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing()
21
23
 
22
24
  const inputType = computed(() => {
23
25
  return rootContext.channel.value ? 'text' : 'text'
@@ -48,6 +50,11 @@ function handleWheel(event: WheelEvent) {
48
50
  }
49
51
 
50
52
  function handleKeydown(event: KeyboardEvent) {
53
+ // Don't step/commit mid-composition, keys are used for IME candidate navigation and commit.
54
+ // `isComposing` stays true until the tick after `compositionend`, so the commit keydown
55
+ // (which can report `event.isComposing === false`) is still skipped.
56
+ if (isComposing.value || event.isComposing)
57
+ return
51
58
  switch (event.key) {
52
59
  case 'ArrowUp':
53
60
  event.preventDefault()
@@ -82,6 +89,8 @@ function handleKeydown(event: KeyboardEvent) {
82
89
 
83
90
  // Handle numeric key validation for channel mode
84
91
  function handleBeforeInput(event: InputEvent) {
92
+ if (event.isComposing)
93
+ return
85
94
  if (!rootContext.channel.value)
86
95
  return // No validation for hex mode
87
96
 
@@ -129,6 +138,8 @@ function handleBeforeInput(event: InputEvent) {
129
138
  @keydown="handleKeydown"
130
139
  @wheel="handleWheel"
131
140
  @beforeinput="handleBeforeInput"
141
+ @compositionstart="handleCompositionStart"
142
+ @compositionend="handleCompositionEnd"
132
143
  >
133
144
  <slot />
134
145
  </Primitive>
@@ -3,6 +3,7 @@ import type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'
3
3
  import { useVModel } from '@vueuse/core'
4
4
  import { nextTick, onMounted, watch } from 'vue'
5
5
  import { usePrimitiveElement } from '@/Primitive'
6
+ import { useComposing } from '@/shared'
6
7
 
7
8
  export type ComboboxInputEmits = ListboxFilterEmits
8
9
  export interface ComboboxInputProps extends ListboxFilterProps {
@@ -34,27 +35,42 @@ onMounted(() => {
34
35
  rootContext.onInputElementChange(currentElement.value as HTMLInputElement)
35
36
  })
36
37
 
38
+ const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
39
+ const el = event.target as HTMLInputElement
40
+ if (el)
41
+ processInputValue(el.value)
42
+ })
43
+
37
44
  function handleKeyDown(ev: KeyboardEvent) {
45
+ // Don't swallow arrow keys mid-composition, they're used for IME candidate navigation
46
+ if (isComposing.value)
47
+ return
48
+ ev.preventDefault()
38
49
  if (!rootContext.open.value)
39
50
  rootContext.onOpenChange(true)
40
51
  }
41
52
 
42
- function handleInput(event: InputEvent) {
43
- const target = event.target as HTMLInputElement
53
+ function processInputValue(value: string) {
44
54
  if (!rootContext.open.value) {
45
55
  rootContext.onOpenChange(true)
46
56
  nextTick(() => {
47
- if (target.value) {
48
- rootContext.filterSearch.value = target.value
57
+ if (value) {
58
+ rootContext.filterSearch.value = value
49
59
  listboxContext.highlightFirstItem()
50
60
  }
51
61
  })
52
62
  }
53
63
  else {
54
- rootContext.filterSearch.value = target.value
64
+ rootContext.filterSearch.value = value
55
65
  }
56
66
  }
57
67
 
68
+ function handleInput(event: InputEvent) {
69
+ if (isComposing.value)
70
+ return
71
+ processInputValue((event.target as HTMLInputElement).value)
72
+ }
73
+
58
74
  function handleFocus() {
59
75
  if (rootContext.openOnFocus.value && !rootContext.open.value)
60
76
  rootContext.onOpenChange(true)
@@ -74,7 +90,19 @@ function handleBlur(ev: FocusEvent) {
74
90
  const isInsideContent = document.getElementById(rootContext.contentId)?.contains(nextFocus)
75
91
 
76
92
  if (!isInsideRoot && !isInsideContent) {
77
- rootContext.onOpenChange(false)
93
+ // Delay to let FocusScope's focus-restoration (handleFocusOut) run first.
94
+ // Without this, closing fires before FocusScope can pull focus back inside,
95
+ // causing a second combobox to immediately close when switching between two.
96
+ requestAnimationFrame(() => {
97
+ if (!rootContext.open.value)
98
+ return
99
+ const active = document.activeElement
100
+ const isStillOutside = !rootContext.parentElement.value?.contains(active)
101
+ && !document.getElementById(rootContext.contentId)?.contains(active)
102
+ if (isStillOutside) {
103
+ rootContext.onOpenChange(false)
104
+ }
105
+ })
78
106
  }
79
107
  }
80
108
 
@@ -138,9 +166,11 @@ watch(rootContext.filterState, (_newValue, oldValue) => {
138
166
  autocomplete="off"
139
167
  @click="handleClick"
140
168
  @input="handleInput"
141
- @keydown.down.up.prevent="handleKeyDown"
169
+ @keydown.down.up="handleKeyDown"
142
170
  @focus="handleFocus"
143
171
  @blur="handleBlur"
172
+ @compositionstart="handleCompositionStart"
173
+ @compositionend="handleCompositionEnd"
144
174
  >
145
175
  <slot />
146
176
  </ListboxFilter>
@@ -23,6 +23,9 @@ const lastKeyZero = ref(false)
23
23
  const {
24
24
  handleSegmentClick,
25
25
  handleSegmentKeydown,
26
+ handleSegmentBeforeInput,
27
+ handleSegmentCompositionStart,
28
+ handleSegmentCompositionEnd,
26
29
  attributes,
27
30
  } = useDateField({
28
31
  hasLeftFocus,
@@ -59,6 +62,9 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
59
62
  v-on="part !== 'literal' ? {
60
63
  mousedown: handleSegmentClick,
61
64
  keydown: handleSegmentKeydown,
65
+ beforeinput: handleSegmentBeforeInput,
66
+ compositionstart: handleSegmentCompositionStart,
67
+ compositionend: handleSegmentCompositionEnd,
62
68
  focusout: () => { hasLeftFocus = true },
63
69
  focusin: (e: FocusEvent) => {
64
70
  rootContext.setFocusedElement(e.target as HTMLElement)
@@ -251,6 +251,9 @@ const inputMinValue = computed(() => props.minValue ? normalizeInputValue(props.
251
251
  const kbd = useKbd()
252
252
 
253
253
  function handleKeydown(e: KeyboardEvent) {
254
+ // Don't navigate between segments mid-composition, arrow keys are used for IME candidate navigation
255
+ if (e.isComposing)
256
+ return
254
257
  if (!isSegmentNavigationKey(e.key))
255
258
  return
256
259
  if (e.key === kbd.ARROW_LEFT)
@@ -140,10 +140,23 @@ const open = useVModel(props, 'open', emits, {
140
140
 
141
141
  const dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()
142
142
 
143
+ /**
144
+ * Reset time fields on DateValue instances that support time granularity.
145
+ */
146
+ function resetTime(date: DateValue) {
147
+ if (!('hour' in date))
148
+ return date
149
+
150
+ return date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
151
+ }
152
+
143
153
  watch(modelValue, (value) => {
144
154
  if (value && value.compare(placeholder.value) !== 0) {
145
155
  placeholder.value = value.copy()
146
156
  }
157
+ else if (!value && 'hour' in placeholder.value) {
158
+ placeholder.value = resetTime(placeholder.value)
159
+ }
147
160
  if (closeOnSelect.value) {
148
161
  open.value = false
149
162
  }
@@ -178,8 +191,11 @@ provideDatePickerRootContext({
178
191
  dir,
179
192
  step,
180
193
  onDateChange(date: DateValue | undefined) {
181
- if (!date || !modelValue.value) {
182
- modelValue.value = date?.copy() ?? undefined
194
+ if (!date) {
195
+ modelValue.value = undefined
196
+ }
197
+ else if (!modelValue.value) {
198
+ modelValue.value = date.copy()
183
199
  }
184
200
  else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {
185
201
  modelValue.value = undefined
@@ -26,6 +26,9 @@ const lastKeyZero = ref(false)
26
26
  const {
27
27
  handleSegmentClick,
28
28
  handleSegmentKeydown,
29
+ handleSegmentBeforeInput,
30
+ handleSegmentCompositionStart,
31
+ handleSegmentCompositionEnd,
29
32
  attributes,
30
33
  } = useDateField({
31
34
  hasLeftFocus,
@@ -63,6 +66,9 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
63
66
  v-on="part !== 'literal' ? {
64
67
  mousedown: handleSegmentClick,
65
68
  keydown: handleSegmentKeydown,
69
+ beforeinput: handleSegmentBeforeInput,
70
+ compositionstart: handleSegmentCompositionStart,
71
+ compositionend: handleSegmentCompositionEnd,
66
72
  focusout: () => { hasLeftFocus = true },
67
73
  focusin: (e: FocusEvent) => {
68
74
  rootContext.setFocusedElement(e.target as HTMLElement)
@@ -84,7 +84,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps, FormFieldProps
84
84
 
85
85
  export type DateRangeFieldRootEmits = {
86
86
  /** Event handler called whenever the model value changes */
87
- 'update:modelValue': [DateRange]
87
+ 'update:modelValue': [date: DateRange]
88
88
  /** Event handler called whenever the placeholder value changes */
89
89
  'update:placeholder': [date: DateValue]
90
90
  }
@@ -337,6 +337,9 @@ const prevFocusableSegment = computed(() => {
337
337
  const kbd = useKbd()
338
338
 
339
339
  function handleKeydown(e: KeyboardEvent) {
340
+ // Don't navigate between segments mid-composition, arrow keys are used for IME candidate navigation
341
+ if (e.isComposing)
342
+ return
340
343
  if (!isSegmentNavigationKey(e.key))
341
344
  return
342
345
  if (e.key === kbd.ARROW_LEFT)
@@ -23,6 +23,7 @@ useForwardExpose()
23
23
  :as-child="asChild"
24
24
  :data-state="rootContext.open.value ? 'open' : 'closed'"
25
25
  style="pointer-events: auto"
26
+ @pointerdown.left.self.prevent
26
27
  >
27
28
  <slot />
28
29
  </Primitive>
@@ -6,6 +6,7 @@ import { injectMenuContentContext } from '@/Menu/MenuContentImpl.vue'
6
6
  import { injectMenuRootContext } from '@/Menu/MenuRoot.vue'
7
7
  import { injectMenuSubContext } from '@/Menu/MenuSub.vue'
8
8
  import { Primitive, usePrimitiveElement } from '@/Primitive'
9
+ import { useComposing } from '@/shared'
9
10
 
10
11
  export interface DropdownMenuFilterProps extends PrimitiveProps {
11
12
  /** The controlled value of the filter. Can be binded with v-model. */
@@ -70,18 +71,34 @@ onUnmounted(() => {
70
71
  contentContext.searchRef.value = ''
71
72
  })
72
73
 
74
+ const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
75
+ const el = event.target as HTMLInputElement
76
+ if (el) {
77
+ modelValue.value = el.value
78
+ contentContext.searchRef.value = el.value
79
+ }
80
+ })
81
+
73
82
  function handleInput(event: InputEvent) {
74
83
  if (disabled.value)
75
84
  return
85
+ if (isComposing.value)
86
+ return
76
87
  const target = event.target as HTMLInputElement
77
88
  modelValue.value = target.value
78
- // Update the menu's search ref to help with filtering
79
89
  contentContext.searchRef.value = target.value
80
90
  }
81
91
 
82
92
  function handleKeyDown(event: KeyboardEvent) {
83
93
  if (disabled.value)
84
94
  return
95
+ // During composition the keys belong to the IME (candidate navigation/commit).
96
+ // Stop them from bubbling to the menu content's keydown handler (which would
97
+ // navigate/typeahead) without calling preventDefault, so the IME still works.
98
+ if (isComposing.value) {
99
+ event.stopPropagation()
100
+ return
101
+ }
85
102
  if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
86
103
  event.preventDefault()
87
104
  contentContext.onKeydownNavigation(event)
@@ -113,6 +130,8 @@ function handleKeyDown(event: KeyboardEvent) {
113
130
  role="searchbox"
114
131
  @input="handleInput"
115
132
  @keydown="handleKeyDown"
133
+ @compositionstart="handleCompositionStart"
134
+ @compositionend="handleCompositionEnd"
116
135
  >
117
136
  <slot :model-value="modelValue" />
118
137
  </Primitive>
@@ -185,6 +185,10 @@ watchEffect(async (cleanupFn) => {
185
185
  container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
186
186
  container.dispatchEvent(unmountEvent)
187
187
 
188
+ // Signal that blur events fired below are system-initiated (focus trap
189
+ // cleanup), not user-initiated. Consumers can use this to skip validation.
190
+ container.setAttribute('data-focus-scope-unmounting', '')
191
+
188
192
  setTimeout(() => {
189
193
  if (!unmountEvent.defaultPrevented)
190
194
  focus(previouslyFocusedElement ?? document.body, { select: true })
@@ -193,6 +197,7 @@ watchEffect(async (cleanupFn) => {
193
197
  container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
194
198
 
195
199
  focusScopesStack.remove(focusScope)
200
+ container.removeAttribute('data-focus-scope-unmounting')
196
201
  }, 0)
197
202
  })
198
203
  })