@jsenv/navi 0.10.1 → 0.11.0

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 (207) hide show
  1. package/dist/jsenv_navi.js +13858 -23295
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +5 -7
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -177
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
package/src/validation/demos/form_validation_vs_native_demo.html DELETED
@@ -1,172 +0,0 @@
1
- <!--
2
-
3
- TOFIX:
4
-
5
- resize observer pas content lorsqu'on a un contenu vachement large
6
-
7
- lorsqu'on zoom le comportement semble étrange
8
-
9
-
10
- -->
11
-
12
- <!doctype html>
13
- <html>
14
- <head>
15
- <title>From validation demo</title>
16
- <meta name="viewport" content="width=device-width, initial-scale=1" />
17
- <meta charset="utf-8" />
18
- <link rel="icon" href="data:," />
19
- <style>
20
- body {
21
- background: yellow;
22
- }
23
-
24
- input {
25
- border-width: 5px;
26
- }
27
- </style>
28
- </head>
29
- <body>
30
- <div id="app">
31
- <div style="display: flex; gap: 30px">
32
- <div>
33
- <h3>Basic</h3>
34
- <div style="border: 1px solid black; width: 300px">
35
- <form action="javascript:void(0)">
36
- <input
37
- type="text"
38
- pattern="^[a-z]{4,8}$"
39
- title="4 to 8 lowercase letters"
40
- autocomplete="off"
41
- value="10"
42
- oninput="this.reportValidity()"
43
- />
44
- </form>
45
- </div>
46
- </div>
47
-
48
- <div>
49
- <h3>Basic right</h3>
50
- <div style="border: 1px solid black; width: 600px">
51
- <form action="javascript:void(0)">
52
- <input
53
- type="text"
54
- pattern="^[a-z]{4,8}$"
55
- title="4 to 8 lowercase letters"
56
- autocomplete="off"
57
- value="10"
58
- style="width: 500px"
59
- oninput="this.reportValidity()"
60
- />
61
- </form>
62
-
63
- <button id="report">reportValidity()</button>
64
- </div>
65
- </div>
66
-
67
- <div>
68
- <h3>Message smaller than input</h3>
69
- <form action="javascript:void(0)">
70
- <input
71
- type="text"
72
- pattern="^[a-z]{4,8}$"
73
- title="4 to 8 lowercase letters"
74
- autocomplete="off"
75
- value="10"
76
- oninput="this.reportValidity()"
77
- style="width: 300px"
78
- />
79
- </form>
80
- </div>
81
-
82
- <div>
83
- <h3>Message bigger than input</h3>
84
- <form action="javascript:void(0)">
85
- <input
86
- type="text"
87
- pattern="^[a-z]{4,8}$"
88
- title="4 to 8 lowercase letters"
89
- autocomplete="off"
90
- value="10"
91
- oninput="this.reportValidity()"
92
- style="width: 20px"
93
- />
94
- </form>
95
- </div>
96
- </div>
97
-
98
- <div>
99
- <h3>Top of scrollable content</h3>
100
- <div style="border: 1px solid black; overflow: auto; height: 150px">
101
- <form action="javascript:void(0)">
102
- <input
103
- type="text"
104
- pattern="^[a-z]{4,8}$"
105
- title="4 to 8 lowercase letters"
106
- autocomplete="off"
107
- value="10"
108
- oninput="this.reportValidity()"
109
- />
110
- </form>
111
- <div style="height: 300px; background: blue"></div>
112
- </div>
113
- </div>
114
-
115
- <div>
116
- <h3>Bottom of scrollable content</h3>
117
- <div style="border: 1px solid black; overflow: auto; height: 150px">
118
- <div style="height: 300px; background: blue"></div>
119
- <form action="javascript:void(0)">
120
- <input
121
- type="text"
122
- pattern="^[a-z]{4,8}$"
123
- title="4 to 8 lowercase letters"
124
- autocomplete="off"
125
- value="10"
126
- oninput="this.reportValidity()"
127
- />
128
- </form>
129
- </div>
130
- </div>
131
-
132
- <div>
133
- <h3>Middle of scrollable content</h3>
134
- <div style="border: 1px solid black; overflow: auto; height: 150px">
135
- <div style="height: 250px; background: blue"></div>
136
- <form action="javascript:void(0)">
137
- <input
138
- type="text"
139
- pattern="^[a-z]{4,8}$"
140
- title="4 to 8 lowercase letters"
141
- autocomplete="off"
142
- value="10"
143
- oninput="this.reportValidity()"
144
- />
145
- </form>
146
- <div style="height: 250px; background: blue"></div>
147
- </div>
148
- </div>
149
- </div>
150
-
151
- <br />
152
- <br />
153
- <br />
154
- <div style="background: red; width: 2000px; height: 1px"></div>
155
- <div style="background: blue; height: 400px"></div>
156
- <script type="module">
157
- import { openCallout } from "../../components/callout/callout.js";
158
-
159
- const inputs = document.querySelectorAll("input");
160
- for (const input of inputs) {
161
- input.addEventListener("focus", () => {
162
- openCallout(input, "Veuillez respecter le format requis.");
163
- });
164
- }
165
-
166
- const reportButton = document.querySelector("#report");
167
- document.querySelector("#report").onclick = () => {
168
- reportButton.parentNode.querySelector("input").reportValidity();
169
- };
170
- </script>
171
- </body>
172
- </html>
package/src/validation/hooks/use_constraints.js DELETED
@@ -1,23 +0,0 @@
1
- import { useLayoutEffect } from "preact/hooks";
2
-
3
- import { useCustomValidationRef } from "./use_custom_validation_ref.js";
4
-
5
- export const useConstraints = (elementRef, constraints, targetSelector) => {
6
- const customValidationRef = useCustomValidationRef(
7
- elementRef,
8
- targetSelector,
9
- );
10
- useLayoutEffect(() => {
11
- const customValidation = customValidationRef.current;
12
- const cleanupCallbackSet = new Set();
13
- for (const constraint of constraints) {
14
- const unregister = customValidation.registerConstraint(constraint);
15
- cleanupCallbackSet.add(unregister);
16
- }
17
- return () => {
18
- for (const cleanupCallback of cleanupCallbackSet) {
19
- cleanupCallback();
20
- }
21
- };
22
- }, constraints);
23
- };
package/src/validation/hooks/use_custom_validation_ref.js DELETED
@@ -1,73 +0,0 @@
1
- import { useLayoutEffect, useRef } from "preact/hooks";
2
-
3
- import { installCustomConstraintValidation } from "../custom_constraint_validation.js";
4
-
5
- export const useCustomValidationRef = (elementRef, targetSelector) => {
6
- const customValidationRef = useRef();
7
-
8
- useLayoutEffect(() => {
9
- const element = elementRef.current;
10
- if (!element) {
11
- console.warn(
12
- "useCustomValidationRef: elementRef.current is null, make sure to pass a ref to an element",
13
- );
14
- /* can happen if the component does this for instance:
15
- const Component = () => {
16
- const ref = useRef(null)
17
-
18
- if (something) {
19
- return <input ref={ref} />
20
- }
21
- return <span></span>
22
- }
23
-
24
- usually it's better to split the component in two but hey
25
- */
26
- return null;
27
- }
28
- let target;
29
- if (targetSelector) {
30
- target = element.querySelector(targetSelector);
31
- if (!target) {
32
- console.warn(
33
- `useCustomValidationRef: targetSelector "${targetSelector}" did not match in element`,
34
- );
35
- return null;
36
- }
37
- } else {
38
- target = element;
39
- }
40
- const unsubscribe = subscribe(element, target);
41
- const validationInterface = element.__validationInterface__;
42
- customValidationRef.current = validationInterface;
43
- return () => {
44
- unsubscribe();
45
- };
46
- }, [targetSelector]);
47
-
48
- return customValidationRef;
49
- };
50
-
51
- const subscribeCountWeakMap = new WeakMap();
52
- const subscribe = (element, target) => {
53
- if (element.__validationInterface__) {
54
- let subscribeCount = subscribeCountWeakMap.get(element);
55
- subscribeCountWeakMap.set(element, subscribeCount + 1);
56
- } else {
57
- installCustomConstraintValidation(element, target);
58
- subscribeCountWeakMap.set(element, 1);
59
- }
60
- return () => {
61
- unsubscribe(element);
62
- };
63
- };
64
-
65
- const unsubscribe = (element) => {
66
- const subscribeCount = subscribeCountWeakMap.get(element);
67
- if (subscribeCount === 1) {
68
- element.__validationInterface__.uninstall();
69
- subscribeCountWeakMap.delete(element);
70
- } else {
71
- subscribeCountWeakMap.set(element, subscribeCount - 1);
72
- }
73
- };
package/src/validation/hooks/use_validation_message.js DELETED
@@ -1,19 +0,0 @@
1
- import { useCallback } from "preact/hooks";
2
-
3
- import { useCustomValidationRef } from "./use_custom_validation_ref.js";
4
-
5
- export const useValidationMessage = (inputRef, key, target, options = {}) => {
6
- const customValidationRef = useCustomValidationRef(inputRef, target);
7
-
8
- const addCustomMessage = useCallback(
9
- (message) => {
10
- customValidationRef.current.addCustomMessage(key, message, options);
11
- },
12
- [customValidationRef, key],
13
- );
14
- const removeCustomMessage = useCallback(() => {
15
- customValidationRef.current.removeCustomMessage(key);
16
- }, [customValidationRef, key]);
17
-
18
- return [addCustomMessage, removeCustomMessage];
19
- };
package/src/validation/input_change_effect.js DELETED
@@ -1,106 +0,0 @@
1
- import { createPubSub } from "@jsenv/dom";
2
-
3
- export const listenInputChange = (input, callback) => {
4
- const [teardown, addTeardown] = createPubSub();
5
-
6
- let valueAtInteraction;
7
- const oninput = () => {
8
- valueAtInteraction = undefined;
9
- };
10
- const onkeydown = (e) => {
11
- if (e.key === "Enter") {
12
- /**
13
- * Browser trigger a "change" event right after the enter is pressed
14
- * if the input value has changed.
15
- * We need to prevent the next change event otherwise we would request action twice
16
- */
17
- valueAtInteraction = input.value;
18
- }
19
- if (e.key === "Escape") {
20
- /**
21
- * Browser trigger a "change" event right after the escape is pressed
22
- * if the input value has changed.
23
- * We need to prevent the next change event otherwise we would request action when
24
- * we actually want to cancel
25
- */
26
- valueAtInteraction = input.value;
27
- }
28
- };
29
- const onchange = (e) => {
30
- if (
31
- valueAtInteraction !== undefined &&
32
- e.target.value === valueAtInteraction
33
- ) {
34
- valueAtInteraction = undefined;
35
- return;
36
- }
37
- callback(e);
38
- };
39
- input.addEventListener("input", oninput);
40
- input.addEventListener("keydown", onkeydown);
41
- input.addEventListener("change", onchange);
42
- addTeardown(() => {
43
- input.removeEventListener("input", oninput);
44
- input.removeEventListener("keydown", onkeydown);
45
- input.removeEventListener("change", onchange);
46
- });
47
-
48
- programmatic_change: {
49
- // Handle programmatic value changes that don't trigger browser change events
50
- //
51
- // Problem: When input values are set programmatically (not by user typing),
52
- // browsers don't fire the 'change' event. However, our application logic
53
- // still needs to detect these changes.
54
- //
55
- // Example scenario:
56
- // 1. User starts editing (letter key pressed, value set programmatically)
57
- // 2. User doesn't type anything additional (this is the key part)
58
- // 3. User clicks outside to finish editing
59
- // 4. Without this code, no change event would fire despite the fact that the input value did change from its original state
60
- //
61
- // This distinction is crucial because:
62
- //
63
- // - If the user typed additional text after the initial programmatic value,
64
- // the browser would fire change events normally
65
- // - But when they don't type anything else, the browser considers it as "no user interaction"
66
- // even though the programmatic initial value represents a meaningful change
67
- //
68
- // We achieve this by checking if the input value has changed between focus and blur without any user interaction
69
- // if yes we fire the callback because input value did change
70
- let valueAtStart = input.value;
71
- let interacted = false;
72
-
73
- const onfocus = () => {
74
- interacted = false;
75
- valueAtStart = input.value;
76
- };
77
- const oninput = (e) => {
78
- if (!e.isTrusted) {
79
- // non trusted "input" events will be ignored by the browser when deciding to fire "change" event
80
- // we ignore them too
81
- return;
82
- }
83
- interacted = true;
84
- };
85
- const onblur = (e) => {
86
- if (interacted) {
87
- return;
88
- }
89
- if (valueAtStart === input.value) {
90
- return;
91
- }
92
- callback(e);
93
- };
94
-
95
- input.addEventListener("focus", onfocus);
96
- input.addEventListener("input", oninput);
97
- input.addEventListener("blur", onblur);
98
- addTeardown(() => {
99
- input.removeEventListener("focus", onfocus);
100
- input.removeEventListener("input", oninput);
101
- input.removeEventListener("blur", onblur);
102
- });
103
- }
104
-
105
- return teardown;
106
- };