@nivaro/react 0.3.31 → 0.3.33

package/dist/shared/components/item-edit/catalog-columns.js

@@ -0,0 +1,175 @@
+import { jsx as v } from "react/jsx-runtime";
+import { RotateCcw as N } from "lucide-react";
+import { useState as y, useRef as b, useEffect as R, useCallback as w } from "react";
+import { cn as m } from "../../lib/utils.js";
+const C = 48, P = 800, k = "nvr:catalog-cols:v1:", z = (e, r = C) => Math.round(Math.min(P, Math.max(r, e)));
+function T(e) {
+  if (!e) return {};
+  try {
+    const r = localStorage.getItem(k + e), o = r ? JSON.parse(r) : null;
+    if (!o || typeof o != "object") return {};
+    const n = {};
+    for (const [c, i] of Object.entries(o))
+      typeof i == "number" && Number.isFinite(i) && (n[c] = z(i));
+    return n;
+  } catch {
+    return {};
+  }
+}
+function x(e, r) {
+  if (e)
+    try {
+      Object.keys(r).length === 0 ? localStorage.removeItem(k + e) : localStorage.setItem(k + e, JSON.stringify(r));
+    } catch {
+    }
+}
+function j(e) {
+  const [r, o] = y(() => T(e)), n = b(e);
+  R(() => {
+    n.current !== e && (n.current = e, o(T(e)));
+  }, [e]);
+  const c = b(null), i = b(r);
+  i.current = r, R(
+    () => () => {
+      c.current && (clearTimeout(c.current), x(n.current, i.current));
+    },
+    []
+  );
+  const d = w(
+    (a, p, f) => o((s) => {
+      const g = { ...s, [a]: z(p, f) };
+      c.current && clearTimeout(c.current);
+      const t = n.current;
+      return c.current = setTimeout(() => {
+        c.current = null, x(t, g);
+      }, 250), g;
+    }),
+    []
+  ), l = w(() => {
+    c.current && clearTimeout(c.current), c.current = null, x(n.current, {}), o({});
+  }, []), u = w(
+    (a, p, f) => {
+      const s = r[a];
+      return {
+        "data-cpf-col": a,
+        // A set width still gives way when the row runs out of room (the card never
+        // spills), down to the minimum.
+        className: s != null ? m("shrink grow-0", f) : m(p, f),
+        style: s != null ? { width: s, minWidth: Math.min(s, C) } : void 0
+      };
+    },
+    [r]
+  );
+  return { widths: r, setWidth: d, reset: l, box: u, customized: Object.keys(r).length > 0 };
+}
+function E(e, r) {
+  if (!e) return null;
+  let o = 0;
+  for (const n of e.querySelectorAll(
+    `[data-cpf-col="${r.replace(/["\\]/g, "\\$&")}"]`
+  )) {
+    const c = [...n.querySelectorAll("[data-cpf-fit]")], i = c.length > 0 ? c.reduce((d, l) => d + l.scrollWidth, 0) + (c.length - 1) * 6 : n.scrollWidth;
+    o = Math.max(o, i + (n.offsetWidth - n.clientWidth));
+  }
+  return o > 0 ? z(o + 6) : null;
+}
+function A({
+  label: e,
+  onResize: r,
+  onFit: o,
+  min: n = C
+}) {
+  const [c, i] = y(!1), [d, l] = y(0), u = b(null), a = (t) => {
+    var h;
+    return ((h = t.parentElement) == null ? void 0 : h.getBoundingClientRect().width) ?? 0;
+  }, p = (t) => {
+    t.button === 0 && (t.preventDefault(), t.stopPropagation(), u.current = { x: t.clientX, w: a(t.currentTarget) }, t.currentTarget.setPointerCapture(t.pointerId), document.documentElement.style.cursor = "col-resize", i(!0));
+  }, f = (t) => {
+    u.current && r(Math.max(n, u.current.w + t.clientX - u.current.x));
+  }, s = (t) => {
+    u.current && (u.current = null, document.documentElement.style.cursor = "", i(!1), t.currentTarget.hasPointerCapture(t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId));
+  }, g = (t) => {
+    const h = t.shiftKey ? 32 : 8;
+    if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
+      t.preventDefault();
+      const S = a(t.currentTarget), M = Math.max(n, S + (t.key === "ArrowRight" ? h : -h));
+      l(Math.round(M)), r(M);
+    } else t.key === "Enter" && (t.preventDefault(), o());
+  };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: an interactive splitter has no native element
+    /* @__PURE__ */ v(
+      "span",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Resize ${e}`,
+        "aria-valuenow": d || void 0,
+        "aria-valuemin": n,
+        "aria-valuemax": P,
+        tabIndex: 0,
+        onFocus: (t) => l(Math.round(a(t.currentTarget))),
+        "data-cpf-resize": !0,
+        "data-tip": `${e}: drag to resize · double-click to fit`,
+        onPointerDown: p,
+        onPointerMove: f,
+        onPointerUp: s,
+        onPointerCancel: s,
+        onDoubleClick: (t) => {
+          t.preventDefault(), o();
+        },
+        onKeyDown: g,
+        onClick: (t) => t.stopPropagation(),
+        className: m(
+          // Centred in the 16px gap after the cell (rows and headers use gap-4), so the
+          // rule sits 8px clear of any label, right-aligned ones (On-Hand, Price) too,
+          // and the cell's own width is unchanged.
+          "group/resize absolute -top-1 -right-[14px] -bottom-1 z-[1] flex w-3 cursor-col-resize touch-none select-none justify-center rounded-sm focus-visible:bg-nvr-cyan/10 focus-visible:outline-none"
+        ),
+        children: /* @__PURE__ */ v(
+          "span",
+          {
+            className: m(
+              "my-1.5 w-px rounded-full transition-colors duration-150 group-focus-visible/resize:w-0.5",
+              c ? "bg-nvr-cyan" : (
+                // Always a faint rule so the column's edge is visible; stronger on hover.
+                "bg-slate-300 group-hover/resize:bg-slate-400 group-focus-visible/resize:bg-nvr-cyan dark:bg-white/10 dark:group-hover/resize:bg-slate-500"
+              )
+            )
+          }
+        )
+      }
+    )
+  );
+}
+function X({
+  show: e,
+  onReset: r,
+  className: o
+}) {
+  return e ? /* @__PURE__ */ v(
+    "button",
+    {
+      type: "button",
+      "data-cpf-reset": !0,
+      "aria-label": "Reset column widths",
+      "data-tip": "Reset column widths",
+      onClick: (n) => {
+        n.stopPropagation(), r();
+      },
+      className: m(
+        "flex h-5 w-5 shrink-0 items-center justify-center rounded text-slate-500 transition-colors dark:text-slate-400 hover:bg-slate-200/70 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan dark:hover:bg-white/10 dark:hover:text-slate-200",
+        o
+      ),
+      children: /* @__PURE__ */ v(N, { className: "h-3 w-3" })
+    }
+  ) : null;
+}
+export {
+  P as COL_MAX,
+  C as COL_MIN,
+  A as ColResizeHandle,
+  X as ResetColumnsButton,
+  E as fitWidth,
+  j as useColumnWidths
+};

package/dist/shared/lib/unsaved-work.js

@@ -1,62 +1,110 @@
-import { useEffect as c } from "react";
-import { subscribeRecordOutbox as f, getRecordOutbox as i } from "./record-outbox.js";
-const r = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
-let a = 0;
-function u() {
-  for (const e of [...s])
+import { useRef as d, useEffect as v } from "react";
+import { subscribeRecordOutbox as h, getRecordOutbox as p } from "./record-outbox.js";
+const a = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Set();
+let b = 0;
+function c() {
+  for (const t of [...u])
     try {
-      e();
+      t();
     } catch {
     }
 }
-function d(e, t) {
-  const n = ++a;
-  return r.set(n, { label: e, dirty: t }), u(), () => {
-    r.delete(n) && u();
+function g(t, n, r = {}) {
+  const e = ++b;
+  return a.set(e, { label: t, dirty: n, saveForReload: r.saveForReload }), c(), () => {
+    a.delete(e) && c();
   };
 }
 function l() {
   try {
-    return i().length;
+    return p().length;
   } catch {
     return 0;
   }
 }
-function b() {
-  const e = [];
-  for (const n of r.values()) {
-    let o = !1;
+function m() {
+  const t = [];
+  for (const r of a.values()) {
+    let e = !1;
     try {
-      o = n.dirty();
+      e = r.dirty();
     } catch {
-      o = !1;
+      e = !1;
     }
-    o && !e.includes(n.label) && e.push(n.label);
+    e && !t.includes(r.label) && t.push(r.label);
   }
-  const t = l();
-  return t && e.push(`${t} save${t === 1 ? "" : "s"} waiting to be sent`), e;
+  const n = l();
+  return n && t.push(`${n} save${n === 1 ? "" : "s"} waiting to be sent`), t;
 }
-function g() {
-  return b().length > 0;
+function w() {
+  return m().length > 0;
 }
-function k(e) {
-  s.add(e);
-  const t = f(e);
+const y = 3e3;
+async function F() {
+  const t = await Promise.all(
+    [...a.values()].map(async (e) => {
+      let o = !1;
+      try {
+        o = e.dirty();
+      } catch {
+        o = !1;
+      }
+      if (!o) return null;
+      let s = !1;
+      if (e.saveForReload)
+        try {
+          s = await Promise.race([
+            Promise.resolve(e.saveForReload()),
+            new Promise((f) => setTimeout(() => f(!1), y))
+          ]);
+        } catch {
+          s = !1;
+        }
+      return s ? null : e.label;
+    })
+  ), n = [...new Set(t.filter((e) => e != null))], r = l();
+  return r && n.push(`${r} save${r === 1 ? "" : "s"} waiting to be sent`), n;
+}
+let i = !1;
+function k() {
+  i = !0, setTimeout(() => {
+    i = !1;
+  }, 5e3);
+}
+function O() {
+  return i;
+}
+function W(t) {
+  u.add(t);
+  const n = h(t);
   return () => {
-    s.delete(e), t();
+    u.delete(t), n();
   };
 }
-function p(e, t = "Unsaved changes") {
-  c(() => {
-    if (e)
-      return d(t, () => !0);
-  }, [e, t]);
+function x(t, n = "Unsaved changes", r) {
+  const e = d(r);
+  e.current = r;
+  const o = !!r;
+  v(() => {
+    if (t)
+      return g(
+        n,
+        () => !0,
+        o ? { saveForReload: () => {
+          var s;
+          return ((s = e.current) == null ? void 0 : s.call(e)) ?? !1;
+        } } : {}
+      );
+  }, [t, n, o]);
 }
 export {
-  g as hasUnsavedWork,
-  u as notifyUnsavedWorkChanged,
-  d as registerUnsavedWork,
-  k as subscribeUnsavedWork,
-  b as unsavedWorkLabels,
-  p as useUnsavedWork
+  k as beginReloadForUpdate,
+  w as hasUnsavedWork,
+  O as isReloadingForUpdate,
+  c as notifyUnsavedWorkChanged,
+  F as prepareForReload,
+  g as registerUnsavedWork,
+  W as subscribeUnsavedWork,
+  m as unsavedWorkLabels,
+  x as useUnsavedWork
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nivaro/react",
-  "version": "0.3.31",
+  "version": "0.3.33",
   "description": "React hooks and components for Nivaro CMS forms",
   "type": "module",
   "main": "./dist/index.js",