@nivaro/react 0.3.30 → 0.3.32

package/dist/shared/components/item-edit/RecordHeaderActions.js

@@ -1,30 +1,30 @@
-import { jsx as i, Fragment as w, jsxs as f } from "react/jsx-runtime";
-import { useQuery as v, useQueryClient as q, useMutation as R } from "@tanstack/react-query";
+import { jsx as i, Fragment as x, jsxs as f } from "react/jsx-runtime";
+import { useQuery as w, useQueryClient as q, useMutation as R } from "@tanstack/react-query";
 import { Play as C, Pause as N, Zap as $ } from "lucide-react";
-import { useMemo as b, useState as F } from "react";
+import { useMemo as y, useState as F } from "react";
 import { toast as p } from "sonner";
-import { useNivaroClient as x } from "../../context.js";
-import { get as j, post as y } from "../../lib/commands.js";
+import { useNivaroClient as v } from "../../context.js";
+import { get as j, post as k } from "../../lib/commands.js";
 import { userErrorMessage as A } from "../../lib/safe-error.js";
 import { cn as S } from "../../lib/utils.js";
 import { useAvailableBulkActions as B, guardMatches as P } from "../bulk/BulkActionButtons.js";
-import { Button as k } from "../ui/button.js";
+import { Button as b } from "../ui/button.js";
 import { Dialog as T, DialogContent as D, DialogHeader as H, DialogTitle as M, DialogDescription as Q, DialogBody as _, DialogFooter as E } from "../ui/dialog.js";
 import { Textarea as J } from "../ui/textarea.js";
 import { invalidateRecordQueries as K } from "./RecordLiveSync.js";
 function ie(e, n, t) {
-  const h = x(), m = !!n && n !== "new", { data: u } = B(m ? [e] : []), d = b(
+  const h = v(), m = !!n && n !== "new", { data: u } = B(m ? [e] : []), d = y(
     () => ((u == null ? void 0 : u[e]) ?? []).filter(
       (o) => o.header === !0 && (o.kind === "update_fields" || o.kind === "transition")
     ),
     [u, e]
-  ), s = b(() => {
+  ), s = y(() => {
     const o = /* @__PURE__ */ new Set();
     for (const a of d)
       for (const r of a.guard ?? [])
         r && typeof r.field == "string" && !(t && r.field in t) && o.add(r.field);
     return [...o].sort();
-  }, [d, t]), { data: l } = v({
+  }, [d, t]), { data: l } = w({
     queryKey: ["record-header-action-guard", e, String(n), s.join(",")],
     queryFn: () => h.request(
       j(`/items/${encodeURIComponent(e)}/${encodeURIComponent(String(n))}`, {
@@ -34,7 +34,7 @@ function ie(e, n, t) {
     enabled: m && s.length > 0,
     staleTime: 0
   });
-  return b(() => {
+  return y(() => {
     if (s.length > 0 && !l) return d.filter((a) => {
       var r;
       return !((r = a.guard) != null && r.length);
@@ -54,23 +54,28 @@ function ae({
   actions: e,
   onPick: n
 }) {
-  return e.length === 0 ? null : /* @__PURE__ */ i(w, { children: e.map((t) => /* @__PURE__ */ f(
-    "button",
-    {
-      type: "button",
-      "data-record-header-action": t.key,
-      "data-tip": W(t),
-      onClick: () => n(t),
-      className: S(
-        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border px-3 text-[13px] font-medium shadow-sm transition-colors",
-        t.variant === "danger" ? "border-red-300 text-red-600 hover:bg-red-50 dark:border-red-500/40 dark:text-red-400 dark:hover:bg-red-500/10" : "border-slate-300 bg-background text-slate-700 hover:bg-accent dark:border-border dark:text-slate-200"
-      ),
-      children: [
-        U(t),
-        t.label
-      ]
-    },
-    `${t.source}:${t.key}`
+  return e.length === 0 ? null : /* @__PURE__ */ i(x, { children: e.map((t) => (
+    // Same Button, size and type as the pipeline's transition buttons beside them.
+    /* @__PURE__ */ f(
+      b,
+      {
+        type: "button",
+        size: "sm",
+        variant: "outline",
+        "data-record-header-action": t.key,
+        "data-tip": W(t),
+        onClick: () => n(t),
+        className: S(
+          "shrink-0 gap-1.5 text-[12px]",
+          t.variant === "danger" && "border-red-300 text-red-600 hover:bg-red-50 hover:text-red-700 dark:border-red-500/40 dark:text-red-400 dark:hover:bg-red-500/10"
+        ),
+        children: [
+          U(t),
+          t.label
+        ]
+      },
+      `${t.source}:${t.key}`
+    )
   )) });
 }
 function se({
@@ -80,9 +85,9 @@ function se({
   onClose: h,
   onDone: m
 }) {
-  const u = x(), d = q(), [s, l] = F(""), o = !!(e != null && e.require_reason), a = R({
+  const u = v(), d = q(), [s, l] = F(""), o = !!(e != null && e.require_reason), a = R({
     mutationFn: async (r) => {
-      const c = { collection: n, ids: [t], reason: s.trim() || null }, g = r.source === "db" ? await u.request(y("/bulk-actions/run", { ...c, key: r.key })) : await u.request(y(`/bulk-actions/${r.key}/execute`, c));
+      const c = { collection: n, ids: [t], reason: s.trim() || null }, g = r.source === "db" ? await u.request(k("/bulk-actions/run", { ...c, key: r.key })) : await u.request(k(`/bulk-actions/${r.key}/execute`, c));
       return { a: r, result: g.data ?? {} };
     },
     onSuccess: ({ a: r, result: c }) => {
@@ -118,9 +123,9 @@ function se({
           )
         ] }),
         /* @__PURE__ */ f(E, { children: [
-          /* @__PURE__ */ i(k, { variant: "outline", onClick: h, disabled: a.isPending, children: "Cancel" }),
+          /* @__PURE__ */ i(b, { variant: "outline", onClick: h, disabled: a.isPending, children: "Cancel" }),
           /* @__PURE__ */ i(
-            k,
+            b,
             {
               onClick: () => e && a.mutate(e),
               disabled: !e || a.isPending || o && !s.trim(),

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/package.json

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