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

@jsenv/navi 0.0.1 → 0.1.1

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 (139) hide show

package/dist/jsenv_navi.js +22959 -0
package/index.js +66 -16
package/package.json +23 -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/field/input_textual.jsx +418 -0
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/input_textual.jsx +0 -338
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/validation_message_demo.html ADDED Viewed

@@ -0,0 +1,203 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Simple Validation Message Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        font-family: Arial, sans-serif;
+        background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
+        min-height: 300vh; /* Make page scrollable */
+      }
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+      }
+      .section {
+        margin: 40px 0;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .target-element {
+        display: inline-block;
+        padding: 12px 20px;
+        background: #4caf50;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 10px;
+        font-size: 16px;
+      }
+      .target-element:hover {
+        background: #45a049;
+      }
+      .spacer {
+        height: 200px;
+        background: repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          rgba(0, 0, 0, 0.1) 20px,
+          rgba(0, 0, 0, 0.1) 40px
+        );
+        margin: 40px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        font-weight: bold;
+        font-size: 18px;
+      }
+      .scroll-instruction {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: #333;
+        color: white;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 14px;
+        z-index: 1000;
+      }
+      .scrollable-container {
+        height: 300px;
+        width: 100%;
+        overflow: auto;
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        background: #f9f9f9;
+        padding: 20px;
+      }
+      .scrollable-content {
+        height: 600px;
+        width: 800px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        background: repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 30px,
+          rgba(0, 0, 255, 0.1) 30px,
+          rgba(0, 0, 255, 0.1) 60px
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div class="scroll-instruction">
+      Scroll to test validation message positioning
+    </div>
+    <div class="container">
+      <h1>Simple Validation Message Demo</h1>
+      <p>
+        This demo shows how the validation message follows its target element
+        during scrolling.
+      </p>
+      <div class="section">
+        <h2>Auto-opened Validation Message</h2>
+        <p>This validation message opens automatically when the page loads:</p>
+        <p>
+          <strong
+            >Scroll inside the container below to test positioning within a
+            scrollable parent:</strong
+          >
+        </p>
+        <div class="scrollable-container">
+          <div class="scrollable-content">
+            <div>Top of scrollable area</div>
+            <button id="auto-target" class="target-element">
+              Target Element (Auto-opened message)
+            </button>
+            <div>Bottom of scrollable area</div>
+          </div>
+        </div>
+      </div>
+      <div class="spacer">
+        Scroll Area 1 - Keep scrolling to test positioning
+      </div>
+      <div class="section">
+        <h2>Middle Section</h2>
+        <p>
+          The validation message should follow the target element as you scroll
+          past this section.
+        </p>
+      </div>
+      <div class="spacer">Scroll Area 2 - More scrolling space</div>
+      <div class="section">
+        <h2>Another Section</h2>
+        <p>
+          Continue scrolling to test the message positioning at different scroll
+          positions.
+        </p>
+      </div>
+      <div class="spacer">Scroll Area 3 - Bottom section</div>
+      <div class="section">
+        <h2>Final Section</h2>
+        <p>Scroll back up to see how the validation message behaves.</p>
+      </div>
+      <div
+        style="
+          height: 50vh;
+          background: #f0f0f0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-top: 40px;
+        "
+      >
+        <p>Bottom spacer - scroll back up to see validation messages</p>
+      </div>
+    </div>
+    <script type="module">
+      import { openValidationMessage } from "../validation_message.js";
+      // Auto-open validation message on page load
+      window.addEventListener("load", () => {
+        const autoTarget = document.getElementById("auto-target");
+        openValidationMessage(
+          autoTarget,
+          `This is a very long validation message that was opened automatically when the page loaded. <strong>Try scrolling both horizontally and vertically</strong> within the container to see how the validation message follows the target element! This message is intentionally made very long to test how the positioning system handles messages that exceed the visible area of their container. The message should properly position itself even when parts of it would normally be clipped by the container boundaries. You can scroll in any direction - up, down, left, right - to test the robustness of the positioning algorithm. This lengthy content helps verify that the validation message system can handle edge cases where the message content is larger than the available viewport space within scrollable containers.`,
+          {
+            level: "warning",
+            debug: true,
+            canClickThrough: true,
+            onClose: () => {
+              console.log("Validation message was closed");
+            },
+          },
+        );
+      });
+      console.log(
+        "Simple validation message demo loaded. Check console for debug output.",
+      );
+    </script>
+  </body>
+</html>

package/src/validation/hooks/use_constraints.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { useLayoutEffect } from "preact/hooks";
+import { useCustomValidationRef } from "./use_custom_validation_ref.js";
+export const useConstraints = (elementRef, constraints, targetSelector) => {
+  const customValidationRef = useCustomValidationRef(
+    elementRef,
+    targetSelector,
+  );
+  useLayoutEffect(() => {
+    const customValidation = customValidationRef.current;
+    const cleanupCallbackSet = new Set();
+    for (const constraint of constraints) {
+      const unregister = customValidation.registerConstraint(constraint);
+      cleanupCallbackSet.add(unregister);
+    }
+    return () => {
+      for (const cleanupCallback of cleanupCallbackSet) {
+        cleanupCallback();
+      }
+    };
+  }, constraints);
+};

package/src/validation/hooks/use_custom_validation_ref.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { useLayoutEffect, useRef } from "preact/hooks";
+import { installCustomConstraintValidation } from "../custom_constraint_validation.js";
+export const useCustomValidationRef = (elementRef, targetSelector) => {
+  const customValidationRef = useRef();
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      console.warn(
+        "useCustomValidationRef: elementRef.current is null, make sure to pass a ref to an element",
+      );
+      /* can happen if the component does this for instance:
+      const Component = () => {
+        const ref = useRef(null)
+        if (something) {
+          return <input ref={ref} />
+        }
+        return <span></span>
+      }
+      usually it's better to split the component in two but hey
+      */
+      return null;
+    }
+    let target;
+    if (targetSelector) {
+      target = element.querySelector(targetSelector);
+      if (!target) {
+        console.warn(
+          `useCustomValidationRef: targetSelector "${targetSelector}" did not match in element`,
+        );
+        return null;
+      }
+    } else {
+      target = element;
+    }
+    const unsubscribe = subscribe(element, target);
+    const validationInterface = element.__validationInterface__;
+    customValidationRef.current = validationInterface;
+    return () => {
+      unsubscribe();
+    };
+  }, [targetSelector]);
+  return customValidationRef;
+};
+const subscribeCountWeakMap = new WeakMap();
+const subscribe = (element, target) => {
+  if (element.__validationInterface__) {
+    let subscribeCount = subscribeCountWeakMap.get(element);
+    subscribeCountWeakMap.set(element, subscribeCount + 1);
+  } else {
+    installCustomConstraintValidation(element, target);
+    subscribeCountWeakMap.set(element, 1);
+  }
+  return () => {
+    unsubscribe(element);
+  };
+};
+const unsubscribe = (element) => {
+  const subscribeCount = subscribeCountWeakMap.get(element);
+  if (subscribeCount === 1) {
+    element.__validationInterface__.uninstall();
+    subscribeCountWeakMap.delete(element);
+  } else {
+    subscribeCountWeakMap.set(element, subscribeCount - 1);
+  }
+};

package/src/validation/hooks/use_validation_message.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { useCallback } from "preact/hooks";
+import { useCustomValidationRef } from "./use_custom_validation_ref.js";
+export const useValidationMessage = (inputRef, key, target, options = {}) => {
+  const customValidationRef = useCustomValidationRef(inputRef, target);
+  const addCustomMessage = useCallback(
+    (message) => {
+      customValidationRef.current.addCustomMessage(key, message, options);
+    },
+    [customValidationRef, key],
+  );
+  const removeCustomMessage = useCallback(() => {
+    customValidationRef.current.removeCustomMessage(key);
+  }, [customValidationRef, key]);
+  return [addCustomMessage, removeCustomMessage];
+};