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/components/demos/9_table_column_drag_demo.html ADDED Viewed

@@ -0,0 +1,325 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Table Column Drag Demo - Reorder Columns</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        margin: 0px;
+        padding: 0;
+        background: #f5f5f5;
+      }
+      .demo-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      /* Container with fixed size to show drag behavior */
+      .table-container {
+        height: 500px;
+        width: 800px;
+        overflow: auto;
+        margin: 20px 0;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+      /* Status display */
+      .status {
+        margin-top: 20px;
+        padding: 10px;
+        background: #f0f8ff;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 14px;
+      }
+      .actions {
+        margin-top: 15px;
+      }
+      .action-button {
+        background: #007acc;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      .action-button:hover {
+        background: #005a9e;
+      }
+      .info {
+        background: #e8f4fd;
+        border: 1px solid #bee5eb;
+        border-radius: 4px;
+        padding: 15px;
+        margin-bottom: 20px;
+      }
+      .info h3 {
+        margin-top: 0;
+        color: #0c5460;
+      }
+      .info ul {
+        margin-bottom: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo-container">
+      <h1>Table Column Drag Demo</h1>
+      <div class="info">
+        <h3>Column Drag & Drop Features</h3>
+        <ul>
+          <li>
+            <strong>Drag to Reorder:</strong> Grab any column header and drag it
+            to reorder columns
+          </li>
+          <li>
+            <strong>Visual Feedback:</strong> Drag clone provides visual
+            indication of the column being moved
+          </li>
+          <li>
+            <strong>Real Data:</strong> Table contains realistic user data with
+            ID, name, email, and dates
+          </li>
+          <li>
+            <strong>No Sticky Headers:</strong> Focus on drag behavior without
+            sticky positioning complexity
+          </li>
+        </ul>
+      </div>
+      <div class="table-container">
+        <div id="root"></div>
+      </div>
+    </div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState, useRef } from "preact/hooks";
+      // eslint-disable-next-line no-unused-vars
+      import { Table } from "@jsenv/navi";
+      // Generate realistic user data
+      const firstNames = [
+        "John",
+        "Jane",
+        "Michael",
+        "Sarah",
+        "David",
+        "Emily",
+        "Chris",
+        "Lisa",
+        "Mark",
+        "Anna",
+        "Tom",
+        "Kate",
+        "Alex",
+        "Maria",
+        "Paul",
+        "Susan",
+        "Jake",
+        "Emma",
+        "Luke",
+        "Nina",
+      ];
+      const lastNames = [
+        "Smith",
+        "Johnson",
+        "Williams",
+        "Brown",
+        "Jones",
+        "Garcia",
+        "Miller",
+        "Davis",
+        "Rodriguez",
+        "Martinez",
+        "Hernandez",
+        "Lopez",
+        "Gonzalez",
+        "Wilson",
+        "Anderson",
+        "Thomas",
+        "Taylor",
+        "Moore",
+        "Jackson",
+        "Martin",
+      ];
+      const domains = [
+        "example.com",
+        "test.org",
+        "demo.net",
+        "sample.io",
+        "users.co",
+      ];
+      function generateRandomUser(id) {
+        const firstName =
+          firstNames[Math.floor(Math.random() * firstNames.length)];
+        const lastName =
+          lastNames[Math.floor(Math.random() * lastNames.length)];
+        const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${domains[Math.floor(Math.random() * domains.length)]}`;
+        const creationDate = new Date(
+          2020 + Math.random() * 4,
+          Math.floor(Math.random() * 12),
+          Math.floor(Math.random() * 28) + 1,
+        );
+        return {
+          id,
+          name: `${firstName} ${lastName}`,
+          email,
+          creation_date: creationDate.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          }),
+        };
+      }
+      // Initial dataset
+      const initialData = [];
+      for (let i = 1; i <= 50; i++) {
+        initialData.push(generateRandomUser(i));
+      }
+      const initialColumns = [
+        { accessorKey: "id", value: "ID", width: 80 },
+        { accessorKey: "name", value: "Full Name", width: 180 },
+        { accessorKey: "email", value: "Email Address", width: 220 },
+        { accessorKey: "creation_date", value: "Created", width: 120 },
+      ];
+      // eslint-disable-next-line no-unused-vars
+      const TableDemo = () => {
+        const tableRef = useRef(null);
+        const [data, setData] = useState(initialData);
+        const [columns, setColumns] = useState(initialColumns);
+        const [lastAction, setLastAction] = useState(
+          "Ready for column dragging",
+        );
+        const resetColumns = () => {
+          setColumns(initialColumns);
+          setLastAction("Column order reset to default");
+        };
+        const addRandomUser = () => {
+          const newId = Math.max(...data.map((u) => u.id)) + 1;
+          const newUser = generateRandomUser(newId);
+          setData([...data, newUser]);
+          setLastAction(`Added new user: ${newUser.name}`);
+        };
+        const clearTable = () => {
+          setData([]);
+          setLastAction("Table cleared");
+        };
+        const handleColumnDrag = (fromIndex, toIndex) => {
+          const newColumns = [...columns];
+          const [movedColumn] = newColumns.splice(fromIndex, 1);
+          newColumns.splice(toIndex, 0, movedColumn);
+          setColumns(newColumns);
+          setLastAction(
+            `Moved column from position ${fromIndex + 1} to position ${toIndex + 1}`,
+          );
+        };
+        const handleSelectionChange = (selection) => {
+          const count = Object.keys(selection).length;
+          if (count > 0) {
+            setLastAction(`Selected ${count} row${count !== 1 ? "s" : ""}`);
+          }
+        };
+        return (
+          <div className="demo-container">
+            <h1>Table Column Drag Demo</h1>
+            <div className="info">
+              <h3>Column Drag & Drop Features</h3>
+              <ul>
+                <li>
+                  <strong>Drag to Reorder:</strong> Grab any column header and
+                  drag it to reorder columns
+                </li>
+                <li>
+                  <strong>Visual Feedback:</strong> Drag clone provides visual
+                  indication of the column being moved
+                </li>
+                <li>
+                  <strong>Real Data:</strong> Table contains realistic user data
+                  with ID, name, email, and dates
+                </li>
+                <li>
+                  <strong>No Sticky Headers:</strong> Focus on drag behavior
+                  without sticky positioning complexity
+                </li>
+              </ul>
+            </div>
+            <div className="table-container">
+              <Table
+                ref={tableRef}
+                data={data}
+                columns={columns}
+                // stickyColumn={false}
+                // stickyHeader={false}
+                onColumnDrag={handleColumnDrag}
+                onSelectionChange={handleSelectionChange}
+              />
+            </div>
+            <div className="status">
+              <div>
+                <strong>Column Order:</strong>{" "}
+                <span>{columns.map((col) => col.key).join(", ")}</span>
+              </div>
+              <div>
+                <strong>Last Action:</strong> <span>{lastAction}</span>
+              </div>
+            </div>
+            <div className="actions">
+              <button className="action-button" onClick={resetColumns}>
+                Reset Column Order
+              </button>
+              <button className="action-button" onClick={addRandomUser}>
+                Add Random User
+              </button>
+              <button className="action-button" onClick={clearTable}>
+                Clear Table
+              </button>
+            </div>
+          </div>
+        );
+      };
+      // Render the app
+      render(<TableDemo />, document.getElementById("root"));
+      console.log("Column drag demo loaded. Try:");
+      console.log("- Drag column headers to reorder columns");
+      console.log("- Click cells to select/deselect");
+      console.log("- Use the buttons to manipulate data");
+    </script>
+  </body>
+</html>

package/src/components/demos/action/0_button_demo.html CHANGED Viewed

@@ -103,7 +103,7 @@
         );
       };
-      const TIME_TO_WAIT = 1_000;
+      const TIME_TO_WAIT = 2_000;
       // eslint-disable-next-line no-unused-vars
       const OutsideForm = () => {
@@ -165,9 +165,7 @@
               min="5"
               name="count"
               value={count}
-              onInput={(e) => {
-                setCount(e.target.valueAsNumber);
-              }}
+              onValueChange={setCount}
             />
             <Form