npm - @hypermedia-components/core - Versions diffs - 0.1.1 → 0.1.2 - Mend

@hypermedia-components/core 0.1.1 → 0.1.2

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

package/dist/csrf-header.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * Install the csrf-header behavior: attach the page's CSRF token
+ * (`<meta name="csrf-token" content="…">`, header name from the meta's
+ * `data-header` attribute, default `X-CSRF-Token`) to every htmx
+ * request via `htmx:configRequest`.
+ *
+ * The meta tag is read at request time, so a rotated token is picked
+ * up automatically. A header already set on the request (e.g. via
+ * `data-hx-headers`) is left untouched. Without the meta tag the
+ * behavior is inert.
+ *
+ * @param {Document} [root]
+ *   The root to listen on. Defaults to the global document when
+ *   available.
+ * @returns {() => void} an idempotent uninstaller.
+ *
+ * @example
+ * // <head>
+ * //   <meta name="csrf-token" content="3x4mpl3…">
+ * // </head>
+ *
+ * import { installCsrfHeader } from '@hypermedia-components/core';
+ * installCsrfHeader();
+ */
+export function installCsrfHeader(root?: Document): () => void;

package/dist/csrf-header.js ADDED Viewed

@@ -0,0 +1,83 @@
+// csrf-header behavior — the blessed CSRF token delivery convention for
+// htmx requests (#246).
+//
+// Contract:
+//   - The server's layout renders the token into the page head:
+//
+//       <meta name="csrf-token" content="…">
+//
+//     The header name defaults to `X-CSRF-Token` and is configurable on
+//     the carrier for stacks that expect a different one:
+//
+//       <meta name="csrf-token" content="…" data-header="X-CSRFToken">
+//
+//   - On every `htmx:configRequest` the behavior reads the meta tag —
+//     at request time, so server-side token rotation needs no
+//     re-install — and adds the header to the outgoing request.
+//   - A header already present in `event.detail.headers` is never
+//     overwritten: a per-request `data-hx-headers` (or an earlier
+//     listener) wins over the page-level convention.
+//   - No meta tag, or an empty `content` → strict no-op.
+//
+// The behavior never makes a request — htmx owns the network. Plain
+// `<form method="post">` submissions never fire `htmx:configRequest`;
+// no-JS degradation needs the framework's hidden-field mechanism.
+//
+// installCsrfHeader() returns an `uninstall` function. Idempotent.
+const INSTALL_KEY = '__hcCsrfHeaderUninstall';
+const DEFAULT_HEADER = 'X-CSRF-Token';
+/**
+ * Install the csrf-header behavior: attach the page's CSRF token
+ * (`<meta name="csrf-token" content="…">`, header name from the meta's
+ * `data-header` attribute, default `X-CSRF-Token`) to every htmx
+ * request via `htmx:configRequest`.
+ *
+ * The meta tag is read at request time, so a rotated token is picked
+ * up automatically. A header already set on the request (e.g. via
+ * `data-hx-headers`) is left untouched. Without the meta tag the
+ * behavior is inert.
+ *
+ * @param {Document} [root]
+ *   The root to listen on. Defaults to the global document when
+ *   available.
+ * @returns {() => void} an idempotent uninstaller.
+ *
+ * @example
+ * // <head>
+ * //   <meta name="csrf-token" content="3x4mpl3…">
+ * // </head>
+ *
+ * import { installCsrfHeader } from '@hypermedia-components/core';
+ * installCsrfHeader();
+ */
+export function installCsrfHeader(root = (typeof document !== 'undefined' ? document : null)) {
+  if (!root) return () => {};
+  if (root[INSTALL_KEY]) return root[INSTALL_KEY];
+  function onConfigRequest(event) {
+    const headers = event?.detail?.headers;
+    if (!headers || typeof headers !== 'object') return;
+    const doc = root.nodeType === 9 ? root : root.ownerDocument;
+    const meta = doc.querySelector('meta[name="csrf-token"]');
+    const token = meta?.getAttribute('content');
+    if (!token) return;
+    const header = meta.getAttribute('data-header') || DEFAULT_HEADER;
+    if (header in headers) return; // an explicit per-request header wins
+    headers[header] = token;
+  }
+  root.addEventListener('htmx:configRequest', onConfigRequest);
+  const uninstall = () => {
+    if (root[INSTALL_KEY] !== uninstall) return;
+    root.removeEventListener('htmx:configRequest', onConfigRequest);
+    delete root[INSTALL_KEY];
+  };
+  root[INSTALL_KEY] = uninstall;
+  return uninstall;
+}

package/dist/datagrid.js CHANGED Viewed

@@ -80,6 +80,32 @@ function rowCells(row) {
   );
 }
+// The navigation matrix as a VISUAL grid: a cell with rowspan/colspan is
+// entered into every (row, column) slot it covers, so arrow keys move by
+// visual position and multi-row records stay column-aligned (the lead
+// rowspan cell is reachable from every sub-row it spans).
+function buildMatrix(grid) {
+  const rows = bodyRows(grid);
+  const out = rows.map(() => []);
+  rows.forEach((row, r) => {
+    let c = 0;
+    for (const cell of rowCells(row)) {
+      while (out[r][c] !== undefined) c += 1; // slot taken by a rowspan above
+      const cs = cell.colSpan || 1;
+      // rowspan="0" = "to the end of the row group" (HTML spec); either way
+      // a span never crosses into the next record's rows.
+      const rs = cell.rowSpan === 0 ? rows.length - r : cell.rowSpan || 1;
+      for (let dr = 0; dr < rs; dr += 1) {
+        const target = rows[r + dr];
+        if (!target || target.parentNode !== row.parentNode) break;
+        for (let dc = 0; dc < cs; dc += 1) out[r + dr][c + dc] = cell;
+      }
+      c += cs;
+    }
+  });
+  return out;
+}
 /** Measure header heights + frozen widths → sticky offset variables. */
 function measure(grid) {
   const headTrs = ownedBy(grid, '.hc-datagrid__head > tr');
@@ -149,7 +175,8 @@ function attach(grid, detachers) {
     for (const h of ownedBy(grid, '.hc-datagrid__headcell')) {
       if (!h.getAttribute('role')) h.setAttribute('role', 'columnheader');
     }
-    matrix.flat().forEach((cell) => {
+    // A spanning cell occupies several matrix slots — visit each cell once.
+    new Set(matrix.flat()).forEach((cell) => {
       cell.setAttribute('role', cell.tagName === 'TH' ? 'rowheader' : 'gridcell');
       cell.tabIndex = -1;
       // Widgets in cells are not separate tab stops — the grid manages focus.
@@ -160,15 +187,16 @@ function attach(grid, detachers) {
   }
   function rebuild() {
-    matrix = bodyRows(grid).map(rowCells);
+    matrix = buildMatrix(grid);
     applyRoles();
     applyResizedWidths(); // re-apply column widths to swapped-in rows
-    const cur = matrix[active.r]?.[active.c] ?? matrix[0]?.[0];
-    if (cur) {
-      cur.tabIndex = 0;
-      const pos = locate(cur);
+    let cur = matrix[active.r]?.[active.c];
+    if (!cur) {
+      cur = matrix[0]?.[0];
+      const pos = cur && locate(cur);
       if (pos) active = pos;
     }
+    if (cur) cur.tabIndex = 0;
   }
   // ---- Column resize ----
@@ -331,6 +359,23 @@ function attach(grid, detachers) {
     cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
   }
+  // Arrow movement: walk from the active slot in direction (dr, dc),
+  // skipping further slots of the same spanning cell so a rowspan/colspan
+  // cell counts as a single stop. The active slot (not the cell's top-left)
+  // is the walk origin, so the entry row/column is kept while crossing a
+  // span — ↓ then ↑ round-trips.
+  function step(dr, dc) {
+    const { r, c } = active;
+    const cur = matrix[r]?.[c];
+    let nr = r + dr;
+    let nc = c + dc;
+    while (cur && matrix[nr]?.[nc] === cur) {
+      nr += dr;
+      nc += dc;
+    }
+    setActive(nr, nc);
+  }
   function toggleRow(r) {
     const row = bodyRows(grid)[r];
     if (!row) return;
@@ -386,10 +431,10 @@ function attach(grid, detachers) {
       else if (key === 'ArrowLeft') key = 'ArrowRight';
     }
     switch (key) {
-      case 'ArrowDown': setActive(r + 1, c); break;
-      case 'ArrowUp': setActive(r - 1, c); break;
-      case 'ArrowRight': setActive(r, c + 1); break;
-      case 'ArrowLeft': setActive(r, c - 1); break;
+      case 'ArrowDown': step(1, 0); break;
+      case 'ArrowUp': step(-1, 0); break;
+      case 'ArrowRight': step(0, 1); break;
+      case 'ArrowLeft': step(0, -1); break;
       case 'Home': setActive(event.ctrlKey ? 0 : r, 0); break;
       case 'End':
         if (event.ctrlKey) setActive(matrix.length - 1, Infinity);
@@ -419,9 +464,11 @@ function attach(grid, detachers) {
     if (!cell || !grid.contains(cell)) return;
     const pos = locate(cell);
     if (!pos) return;
-    if (pos.r !== active.r || pos.c !== active.c) {
+    if (matrix[active.r]?.[active.c] !== cell) {
       setActive(pos.r, pos.c, false); // don't re-focus; focus is already here
     } else {
+      // Already the active cell — keep the active slot as-is so a spanning
+      // cell remembers which sub-row/column it was entered from.
       cell.setAttribute('data-active', '');
     }
   }

package/dist/field-errors.js CHANGED Viewed

@@ -68,16 +68,21 @@ function scopeOf(alert, root) {
 }
 // First control in the scope whose `name` matches. `form.elements`
-// handles radio/checkbox groups natively (RadioNodeList → first member).
+// handles radio/checkbox groups natively (RadioNodeList). Hidden inputs
+// are skipped when the group has a visible member: the blessed boolean
+// idiom pairs `<input type="hidden" value="false">` with the real
+// checkbox under one name, and the ARIA wiring, focus, and edit-to-clear
+// belong on the control the user can operate.
 function controlFor(scope, name) {
   let found;
   if (scope.elements && typeof scope.elements.namedItem === 'function') {
     found = scope.elements.namedItem(name);
   } else {
-    found = scope.querySelector(`[name="${escapeName(name)}"]`);
+    found = scope.querySelectorAll(`[name="${escapeName(name)}"]`);
   }
   if (found && found.tagName == null && typeof found.length === 'number') {
-    found = found[0] ?? null; // RadioNodeList
+    const members = Array.from(found); // RadioNodeList / NodeList
+    found = members.find((el) => el.type !== 'hidden') ?? members[0];
   }
   return found ?? null;
 }

package/dist/hc.behaviors.d.ts CHANGED Viewed

@@ -29,5 +29,6 @@ import { installDatagrid } from './datagrid.js';
 import { installValidation } from './validation.js';
 import { installThemeToggle } from './theme-toggle.js';
 import { installFieldErrors } from './field-errors.js';
-export { installConfirm, installToast, installCloseDialog, installClosePopover, installRemoteDialog, installTabs, installMenu, installMenubar, installNavmenu, installTooltip, installPopover, installSlider, installCombobox, installMulticombobox, installDrawer, installHovercard, installToggleGroup, installCarousel, installToolbar, installAvatar, installPasswordToggle, installContextMenu, installCommand, installCalendar, installInputOtp, installSplitter, installShell, installDatagrid, installValidation, installThemeToggle, installFieldErrors };
+import { installCsrfHeader } from './csrf-header.js';
+export { installConfirm, installToast, installCloseDialog, installClosePopover, installRemoteDialog, installTabs, installMenu, installMenubar, installNavmenu, installTooltip, installPopover, installSlider, installCombobox, installMulticombobox, installDrawer, installHovercard, installToggleGroup, installCarousel, installToolbar, installAvatar, installPasswordToggle, installContextMenu, installCommand, installCalendar, installInputOtp, installSplitter, installShell, installDatagrid, installValidation, installThemeToggle, installFieldErrors, installCsrfHeader };
 export { setMessages, resetMessages, getMessages, hasMessage, DEFAULT_MESSAGES } from "./i18n.js";

package/dist/hc.behaviors.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { installDatagrid } from './datagrid.js';
 import { installValidation } from './validation.js';
 import { installThemeToggle } from './theme-toggle.js';
 import { installFieldErrors } from './field-errors.js';
+import { installCsrfHeader } from './csrf-header.js';
 function init() {
   installConfirm();
@@ -71,6 +72,7 @@ function init() {
   installValidation();
   installThemeToggle();
   installFieldErrors();
+  installCsrfHeader();
 }
 if (typeof document !== 'undefined') {
@@ -113,6 +115,7 @@ export {
   installValidation,
   installThemeToggle,
   installFieldErrors,
+  installCsrfHeader,
 };
 // i18n — set the locale before this module's auto-init runs (e.g. inline