npm - @jsenv/navi - Versions diffs - 0.0.1 → 0.1.0 - Mend

@jsenv/navi 0.0.1 → 0.1.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 (138) hide show

package/dist/jsenv_navi.js +22954 -0
package/index.js +66 -16
package/package.json +22 -11
package/src/actions.js +50 -26
package/src/browser_integration/browser_integration.js +31 -6
package/src/browser_integration/via_history.js +42 -9
package/src/components/action_execution/render_actionable_component.jsx +6 -4
package/src/components/action_execution/use_action.js +51 -282
package/src/components/action_execution/use_execute_action.js +106 -92
package/src/components/action_execution/use_run_on_mount.js +9 -0
package/src/components/action_renderer.jsx +21 -32
package/src/components/demos/0_button_demo.html +574 -103
package/src/components/demos/10_column_reordering_debug.html +277 -0
package/src/components/demos/11_table_selection_debug.html +432 -0
package/src/components/demos/1_checkbox_demo.html +579 -202
package/src/components/demos/2_input_textual_demo.html +81 -138
package/src/components/demos/3_radio_demo.html +0 -2
package/src/components/demos/4_select_demo.html +19 -23
package/src/components/demos/6_tablist_demo.html +77 -0
package/src/components/demos/7_table_selection_demo.html +176 -0
package/src/components/demos/8_table_fixed_headers_demo.html +584 -0
package/src/components/demos/9_table_column_drag_demo.html +325 -0
package/src/components/demos/action/0_button_demo.html +2 -4
package/src/components/demos/action/1_input_text_demo.html +643 -222
package/src/components/demos/action/3_details_demo.html +146 -115
package/src/components/demos/action/4_input_checkbox_demo.html +442 -322
package/src/components/demos/action/5_input_checkbox_state_demo.html +270 -0
package/src/components/demos/action/6_checkbox_list_demo.html +304 -72
package/src/components/demos/action/7_radio_list_demo.html +310 -170
package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html} +65 -76
package/src/components/demos/action/9_link_demo.html +84 -62
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +695 -0
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +429 -0
package/src/components/demos/ui_transition/2_height_transition_test.html +295 -0
package/src/components/details/details.jsx +62 -64
package/src/components/edition/editable.jsx +186 -0
package/src/components/field/README.md +247 -0
package/src/components/{input → field}/button.jsx +151 -130
package/src/components/field/checkbox_list.jsx +184 -0
package/src/components/{collect_form_element_values.js → field/collect_form_element_values.js} +7 -4
package/src/components/{input → field}/field_css.js +4 -1
package/src/components/field/form.jsx +211 -0
package/src/components/{input → field}/input.jsx +1 -0
package/src/components/{input → field}/input_checkbox.jsx +132 -155
package/src/components/{input → field}/input_radio.jsx +135 -46
package/src/components/{input → field}/input_textual.jsx +247 -173
package/src/components/field/label.jsx +32 -0
package/src/components/field/radio_list.jsx +182 -0
package/src/components/{input → field}/select.jsx +17 -32
package/src/components/field/use_action_events.js +132 -0
package/src/components/field/use_form_events.js +55 -0
package/src/components/field/use_ui_state_controller.js +506 -0
package/src/components/item_tracker/README.md +461 -0
package/src/components/item_tracker/use_isolated_item_tracker.jsx +209 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +148 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +460 -0
package/src/components/item_tracker/use_item_tracker.jsx +143 -0
package/src/components/item_tracker/use_item_tracker_demo.html +207 -0
package/src/components/item_tracker/use_item_tracker_demo.jsx +216 -0
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +87 -0
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +61 -0
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +17 -0
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +371 -0
package/src/components/link/link.jsx +65 -102
package/src/components/link/link_with_icon.jsx +52 -0
package/src/components/loader/loader_background.jsx +85 -64
package/src/components/loader/rectangle_loading.jsx +38 -19
package/src/components/route.jsx +8 -4
package/src/components/selection/selection.jsx +1583 -0
package/src/components/svg/font_sized_svg.jsx +45 -0
package/src/components/svg/icon_and_text.jsx +21 -0
package/src/components/svg/svg_mask_overlay.jsx +105 -0
package/src/components/table/drag/table_drag.jsx +506 -0
package/src/components/table/resize/table_resize.jsx +650 -0
package/src/components/table/resize/table_size.js +43 -0
package/src/components/table/selection/table_selection.js +106 -0
package/src/components/table/selection/table_selection.jsx +203 -0
package/src/components/table/sticky/sticky_group.js +354 -0
package/src/components/table/sticky/table_sticky.js +25 -0
package/src/components/table/sticky/table_sticky.jsx +501 -0
package/src/components/table/table.jsx +721 -0
package/src/components/table/table_css.js +211 -0
package/src/components/table/table_ui.jsx +49 -0
package/src/components/table/use_cells_and_columns.js +90 -0
package/src/components/table/use_object_array_to_cells.js +46 -0
package/src/components/table/z_indexes.js +23 -0
package/src/components/tablist/tablist.jsx +99 -0
package/src/components/text/overflow.jsx +15 -0
package/src/components/text/text_and_count.jsx +28 -0
package/src/components/ui_transition.jsx +128 -0
package/src/components/use_auto_focus.js +58 -7
package/src/components/use_batch_during_render.js +33 -0
package/src/components/use_debounce_true.js +7 -7
package/src/components/use_dependencies_diff.js +35 -0
package/src/components/use_focus_group.js +4 -3
package/src/components/use_initial_value.js +8 -34
package/src/components/use_signal_sync.js +1 -1
package/src/components/use_stable_callback.js +68 -0
package/src/components/use_state_array.js +16 -9
package/src/docs/actions.md +22 -0
package/src/notes.md +33 -12
package/src/route/route.js +97 -47
package/src/store/resource_graph.js +2 -1
package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js} +13 -13
package/src/utils/is_signal.js +20 -0
package/src/utils/stringify_for_display.js +4 -23
package/src/validation/constraints/confirm_constraint.js +14 -0
package/src/validation/constraints/create_unique_value_constraint.js +27 -0
package/src/validation/constraints/native_constraints.js +313 -0
package/src/validation/constraints/readonly_constraint.js +36 -0
package/src/validation/constraints/single_space_constraint.js +13 -0
package/src/validation/custom_constraint_validation.js +599 -0
package/src/validation/custom_message.js +18 -0
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/form_validation_demo.html +142 -0
package/src/validation/demos/form_validation_demo_preact.html +87 -0
package/src/validation/demos/form_validation_native_popover_demo.html +168 -0
package/src/validation/demos/form_validation_vs_native_demo.html +172 -0
package/src/validation/demos/validation_message_demo.html +203 -0
package/src/validation/hooks/use_constraints.js +23 -0
package/src/validation/hooks/use_custom_validation_ref.js +73 -0
package/src/validation/hooks/use_validation_message.js +19 -0
package/src/validation/validation_message.js +741 -0
package/src/components/editable_text/editable_text.jsx +0 -96
package/src/components/form.jsx +0 -144
package/src/components/input/checkbox_list.jsx +0 -294
package/src/components/input/field.jsx +0 -61
package/src/components/input/radio_list.jsx +0 -283
package/src/components/input/use_form_event.js +0 -20
package/src/components/input/use_on_change.js +0 -12
package/src/components/selection/selection.js +0 -5
package/src/components/selection/selection_context.jsx +0 -262
package/src/components/shortcut/shortcut_context.jsx +0 -390
package/src/components/use_action_events.js +0 -37
package/src/utils/iterable_weak_set.js +0 -62
/package/src/components/demos/action/{11_nested_shortcuts_demo.html → 11_nested_shortcuts_demo.xhtml} +0 -0
/package/src/components/{shortcut → keyboard_shortcuts}/os.js +0 -0
/package/src/route/{route.test.html → route.xtest.html} +0 -0

package/src/validation/demos/form_validation_demo.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!--
+TOFIX:
+resize observer pas content lorsqu'on a un contenu vachement large
+lorsqu'on zoom le comportement semble étrange
+-->
+<!doctype html>
+<html>
+  <head>
+    <title>From validation demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        background: yellow;
+      }
+      input {
+        border-width: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div style="display: flex; gap: 30px">
+        <div>
+          <h3>Required</h3>
+          <div style="border: 1px solid black">
+            <form action="javascript:void(0)">
+              <input
+                type="text"
+                required
+                value=""
+                title="Coucou"
+                oninput="this.reportValidity()"
+              />
+              <button>button</button>
+              <button type="submit">button type submit</button>
+              <input preserve type="submit" value="submit" />
+              <a onclick="this.parentNode.requestSubmit()"
+                >form.requestSubmit()</a
+              >
+            </form>
+          </div>
+        </div>
+        <div>
+          <h3>Native email</h3>
+          <div style="border: 1px solid black">
+            <form action="javascript:void(0)">
+              <input
+                type="email"
+                preserve
+                value=""
+                oninput="this.reportValidity()"
+              />
+              <button>button</button>
+              <button type="submit">button type submit</button>
+              <input preserve type="submit" value="submit" />
+            </form>
+          </div>
+        </div>
+        <div>
+          <h3>Pattern</h3>
+          <div style="border: 1px solid black">
+            <form action="javascript:void(0)">
+              <input
+                type="text"
+                pattern="^[a-z]{4,8}$"
+                title="4 to 8 lowercase letters"
+                value="10"
+                oninput="this.reportValidity()"
+              />
+            </form>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3>No "a" constraint</h3>
+        <div style="border: 1px solid black">
+          <form action="javascript:void(0)">
+            <input
+              id="no_a_constraint"
+              type="text"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+          <button id="add_custom">Add custom message</button>
+          <button id="remove_custom">Remove custom message</button>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      // eslint-disable-next-line import-x/no-unresolved
+      import { installInputValidation } from "./input_validity.js";
+      const noAConstraint = {
+        check: (input) => {
+          const value = input.value;
+          if (value.includes("a")) {
+            return `Ce champ ne doit pas contenir la lettre "a".`;
+          }
+          return null;
+        },
+      };
+      for (const input of document.querySelectorAll("input")) {
+        if (input.hasAttribute("preserve")) {
+          continue;
+        }
+        installInputValidation(input, {
+          customConstraints:
+            input.id === "no_a_constraint" ? [noAConstraint] : [],
+        });
+      }
+      const addCustomButton = document.querySelector("#add_custom");
+      document.querySelector("#add_custom").addEventListener("click", () => {
+        const input = addCustomButton.parentNode.querySelector("input");
+        input.validationInterface.addCustomMessage("test", "Hey oh", {
+          level: "error",
+        });
+      });
+      const removeCustomButton = document.querySelector("#remove_custom");
+      removeCustomButton.addEventListener("click", () => {
+        const input = removeCustomButton.parentNode.querySelector("input");
+        input.validationInterface.removeCustomMessage("test");
+      });
+    </script>
+  </body>
+</html>

package/src/validation/demos/form_validation_demo_preact.html ADDED Viewed

@@ -0,0 +1,87 @@
+<!--
+TOFIX:
+resize observer pas content lorsqu'on a un contenu vachement large
+lorsqu'on zoom le comportement semble étrange
+-->
+<!doctype html>
+<html>
+  <head>
+    <title>From validation demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        background: yellow;
+      }
+      input {
+        border-width: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useRef } from "preact/hooks";
+      import { useConstraints } from "../hooks/use_constraints.js";
+      import { useValidationMessage } from "../hooks/use_validation_message.js";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const inputRef = useRef();
+        useConstraints(inputRef, (input) => {
+          const value = input.value;
+          if (value.includes("a")) {
+            return `Ce champ ne doit pas contenir la lettre "a".`;
+          }
+          return null;
+        });
+        const [addInputError, removeInputError] = useValidationMessage(
+          inputRef,
+          "error",
+        );
+        return (
+          <div>
+            <input
+              required
+              ref={inputRef}
+              type="text"
+              placeholder="Type something"
+              onCancel={() => {
+                console.log("cancel");
+              }}
+            />
+            <button
+              onClick={() => {
+                addInputError("hey");
+              }}
+            >
+              Set error
+            </button>
+            <button
+              onClick={() => {
+                removeInputError();
+              }}
+            >
+              Reset error
+            </button>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#app"));
+    </script>
+  </body>
+</html>

package/src/validation/demos/form_validation_native_popover_demo.html ADDED Viewed

@@ -0,0 +1,168 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Form validation native popover</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Form validation popover</h1>
+      <div>
+        <p>This demo shows how native popover behaves on form validation</p>
+      </div>
+      <div style="display: flex; gap: 30px">
+        <div style="border: 1px solid black">
+          <h3>Basic</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>Top of scrollable content</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+          <div style="height: 300px; background: blue"></div>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>Bottom of scrollable content</h3>
+          <div style="height: 300px; background: blue"></div>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+      </div>
+      <br />
+      <div style="display: flex; gap: 30px">
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>minLength</h3>
+          <form action="javascript:void(0)">
+            <input type="text" minlength="5" oninput="this.reportValidity()" />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>maxLength</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              id="max_length"
+              maxlength="5"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>min on number</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="number"
+              min="5"
+              value="4"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>min on range</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="range"
+              id="min_range"
+              min="10"
+              max="100"
+              value="5"
+              oninput="this.reportValidity()"
+              onchange="this.reportValidity()"
+            />
+          </form>
+        </div>
+      </div>
+      <br />
+      <div style="display: flex; gap: 30px">
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>min on week</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="week"
+              min="2017-W3"
+              max="2017-W8"
+              value="2017-W5"
+              oninput="this.reportValidity()"
+              onchange="this.reportValidity()"
+            />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>min on date</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="date"
+              id="date_min"
+              min="2018-01-01"
+              max="2018-05-05"
+              value="2019-12-31"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <h3>min on time</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="time"
+              id="time_min"
+              min="09:10"
+              max="18:00"
+              value="06:00"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+      </div>
+      <!-- <div style="background: blue; height: 400px"></div> -->
+    </div>
+    <script type="module"></script>
+  </body>
+</html>

package/src/validation/demos/form_validation_vs_native_demo.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!--
+TOFIX:
+resize observer pas content lorsqu'on a un contenu vachement large
+lorsqu'on zoom le comportement semble étrange
+-->
+<!doctype html>
+<html>
+  <head>
+    <title>From validation demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        background: yellow;
+      }
+      input {
+        border-width: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div style="display: flex; gap: 30px">
+        <div>
+          <h3>Basic</h3>
+          <div style="border: 1px solid black; width: 300px">
+            <form action="javascript:void(0)">
+              <input
+                type="text"
+                pattern="^[a-z]{4,8}$"
+                title="4 to 8 lowercase letters"
+                autocomplete="off"
+                value="10"
+                oninput="this.reportValidity()"
+              />
+            </form>
+          </div>
+        </div>
+        <div>
+          <h3>Basic right</h3>
+          <div style="border: 1px solid black; width: 600px">
+            <form action="javascript:void(0)">
+              <input
+                type="text"
+                pattern="^[a-z]{4,8}$"
+                title="4 to 8 lowercase letters"
+                autocomplete="off"
+                value="10"
+                style="width: 500px"
+                oninput="this.reportValidity()"
+              />
+            </form>
+            <button id="report">reportValidity()</button>
+          </div>
+        </div>
+        <div>
+          <h3>Message smaller than input</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+              style="width: 300px"
+            />
+          </form>
+        </div>
+        <div>
+          <h3>Message bigger than input</h3>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+              style="width: 20px"
+            />
+          </form>
+        </div>
+      </div>
+      <div>
+        <h3>Top of scrollable content</h3>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+          <div style="height: 300px; background: blue"></div>
+        </div>
+      </div>
+      <div>
+        <h3>Bottom of scrollable content</h3>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <div style="height: 300px; background: blue"></div>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+        </div>
+      </div>
+      <div>
+        <h3>Middle of scrollable content</h3>
+        <div style="border: 1px solid black; overflow: auto; height: 150px">
+          <div style="height: 250px; background: blue"></div>
+          <form action="javascript:void(0)">
+            <input
+              type="text"
+              pattern="^[a-z]{4,8}$"
+              title="4 to 8 lowercase letters"
+              autocomplete="off"
+              value="10"
+              oninput="this.reportValidity()"
+            />
+          </form>
+          <div style="height: 250px; background: blue"></div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <br />
+    <br />
+    <div style="background: red; width: 2000px; height: 1px"></div>
+    <div style="background: blue; height: 400px"></div>
+    <script type="module">
+      import { openValidationMessage } from "../validation_message.js";
+      const inputs = document.querySelectorAll("input");
+      for (const input of inputs) {
+        input.addEventListener("focus", () => {
+          openValidationMessage(input, "Veuillez respecter le format requis.");
+        });
+      }
+      const reportButton = document.querySelector("#report");
+      document.querySelector("#report").onclick = () => {
+        reportButton.parentNode.querySelector("input").reportValidity();
+      };
+    </script>
+  </body>
+</html>