@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/list/CopyListLinkButton.js

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Check as d, Link2 as m } from "lucide-react";
+import { useState as u, useRef as p, useEffect as f } from "react";
+import { toast as r } from "sonner";
+import { copyListLink as k } from "../../lib/list-link.js";
+import { cn as h } from "../../lib/utils.js";
+function L({
+  listKey: s,
+  getState: a,
+  className: n
+}) {
+  const [l, o] = u(!1), e = p(null);
+  f(
+    () => () => {
+      e.current && clearTimeout(e.current);
+    },
+    []
+  );
+  const c = async () => {
+    const i = await k(s, a());
+    i === "copied" ? (r.success("Link copied"), o(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => o(!1), 1500)) : i === "too-long" ? r.error("This view is too big for a link — save it as a shared view instead") : r.error("Could not copy the link");
+  };
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: () => void c(),
+      "aria-label": "Copy link to this view",
+      "data-tip": "Copy link to this view",
+      "data-copy-list-link": "",
+      className: h(
+        "flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+        n
+      ),
+      children: l ? /* @__PURE__ */ t(d, { className: "h-4 w-4 text-emerald-500 dark:text-emerald-400" }) : /* @__PURE__ */ t(m, { className: "h-4 w-4" })
+    }
+  );
+}
+export {
+  L as CopyListLinkButton
+};

package/dist/shared/components/list/InlineEdit.js

@@ -0,0 +1,363 @@
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import { useQuery as $ } from "@tanstack/react-query";
+import { Loader2 as L, Check as K, Pencil as R } from "lucide-react";
+import { useState as y, useRef as w, useEffect as P, useCallback as C } from "react";
+import { useNivaroClient as O } from "../../context.js";
+import { patch as _, get as j } from "../../lib/commands.js";
+import { inlineValueUnchanged as A, inlineInputValue as F, parseInlineInput as D } from "../../lib/list-inline-edit.js";
+import { userErrorMessage as q } from "../../lib/safe-error.js";
+import { choiceLabel as U, cn as N } from "../../lib/utils.js";
+import { RelationCombobox as M } from "../item-edit/RelationCombobox.js";
+import { Command as V, CommandInput as z, CommandList as B, CommandEmpty as J, CommandItem as I } from "../ui/command.js";
+import { Popover as Q, PopoverAnchor as Y, PopoverContent as G } from "../ui/popover.js";
+function me() {
+  const t = O(), [p, o] = y(null), [n, i] = y({}), [l, a] = y({}), [d, h] = y({}), r = w({});
+  P(
+    () => () => {
+      for (const e of Object.values(r.current)) clearTimeout(e);
+    },
+    []
+  );
+  const c = C((e) => {
+    i((f) => {
+      if (!(e in f)) return f;
+      const u = { ...f };
+      return delete u[e], u;
+    });
+  }, []), b = C(
+    (e) => {
+      c(e), o(e);
+    },
+    [c]
+  ), k = C(() => o(null), []), m = C(
+    (e) => {
+      var u;
+      if (o(e.next ?? null), A(e.kind, e.before, e.value)) return;
+      const f = ((u = e.optimistic) == null ? void 0 : u.call(e)) ?? (() => {
+      });
+      a((x) => ({ ...x, [e.cellKey]: !0 })), c(e.cellKey), t.request(
+        _(`/items/${encodeURIComponent(e.collection)}/${encodeURIComponent(String(e.id))}`, {
+          [e.field]: e.value
+        })
+      ).then((x) => {
+        var g;
+        (g = e.onSaved) == null || g.call(e, (x == null ? void 0 : x.data) ?? null), h((E) => ({ ...E, [e.cellKey]: !0 })), clearTimeout(r.current[e.cellKey]), r.current[e.cellKey] = setTimeout(() => {
+          h((E) => {
+            const S = { ...E };
+            return delete S[e.cellKey], S;
+          });
+        }, 1500);
+      }).catch((x) => {
+        f(), i((g) => ({
+          ...g,
+          [e.cellKey]: q(x, "This change was not saved")
+        }));
+      }).finally(() => {
+        a((x) => {
+          const g = { ...x };
+          return delete g[e.cellKey], g;
+        });
+      });
+    },
+    [t, c]
+  );
+  return {
+    editing: p,
+    start: b,
+    cancel: k,
+    commit: m,
+    errorOf: (e) => n[e] ?? null,
+    savingOf: (e) => !!l[e],
+    savedOf: (e) => !!d[e],
+    clearError: c
+  };
+}
+function H(t) {
+  const p = O(), { data: o } = $({
+    queryKey: ["cbv-collection-meta", t],
+    queryFn: () => p.request(j(`/collections/${t}`)).then((i) => i.data),
+    enabled: !!t,
+    staleTime: 10 * 6e4,
+    retry: !1
+  }), n = o == null ? void 0 : o.picker_filter;
+  if (n) {
+    if (typeof n == "object" && !Array.isArray(n)) return n;
+    if (typeof n == "string")
+      try {
+        const i = JSON.parse(n);
+        if (i && typeof i == "object" && !Array.isArray(i))
+          return i;
+      } catch {
+      }
+  }
+}
+const T = "h-7 w-full min-w-[120px] rounded border border-nvr-cyan bg-white px-1.5 text-[12px] text-slate-800 shadow-sm outline-none ring-2 ring-nvr-cyan/30 dark:bg-slate-900 dark:text-slate-100";
+function W({
+  kind: t,
+  value: p,
+  label: o,
+  onCommit: n,
+  onCancel: i
+}) {
+  const [l, a] = y(() => F(t, p)), [d, h] = y(null), r = w(!1), c = w(null);
+  P(() => {
+    var e, f, u;
+    (e = c.current) == null || e.focus();
+    try {
+      (u = (f = c.current) == null ? void 0 : f.select) == null || u.call(f);
+    } catch {
+    }
+  }, []);
+  const b = (e) => {
+    var u;
+    if (r.current) return;
+    const f = D(t, l);
+    if (!f.ok) {
+      h(f.error), (u = c.current) == null || u.focus();
+      return;
+    }
+    r.current = !0, n(f.value, e);
+  }, k = (e) => {
+    e.stopPropagation(), e.key === "Escape" ? (e.preventDefault(), r.current = !0, i()) : e.key === "Enter" && !(t === "longtext" && e.shiftKey) ? (e.preventDefault(), b(0)) : e.key === "Tab" && (e.preventDefault(), b(e.shiftKey ? -1 : 1));
+  }, m = {
+    "aria-label": `Edit ${o}`,
+    "aria-invalid": d ? !0 : void 0,
+    value: l,
+    onChange: (e) => {
+      a(e.target.value), d && h(null);
+    },
+    onKeyDown: k,
+    // Clicking away keeps what was typed (a spreadsheet's habit); a value that
+    // does not parse is dropped (Enter / Tab say why instead).
+    onBlur: () => {
+      if (!r.current) {
+        if (!D(t, l).ok) {
+          r.current = !0, i();
+          return;
+        }
+        b(0);
+      }
+    },
+    onClick: (e) => e.stopPropagation(),
+    onDoubleClick: (e) => e.stopPropagation()
+  };
+  return /* @__PURE__ */ v("span", { className: "block min-w-0", "data-inline-editor": t, children: [
+    t === "longtext" ? /* @__PURE__ */ s(
+      "textarea",
+      {
+        ref: c,
+        rows: 2,
+        ...m,
+        className: N(T, "h-auto min-h-[28px] resize-y py-1")
+      }
+    ) : /* @__PURE__ */ s(
+      "input",
+      {
+        ref: c,
+        type: t === "date" ? "date" : t === "datetime" ? "datetime-local" : "text",
+        inputMode: t === "integer" ? "numeric" : t === "number" ? "decimal" : void 0,
+        ...m,
+        className: N(
+          T,
+          (t === "integer" || t === "number") && "text-right tabular-nums"
+        )
+      }
+    ),
+    d && /* @__PURE__ */ s("span", { className: "mt-0.5 block text-[10.5px] font-medium text-red-600 dark:text-red-400", children: d })
+  ] });
+}
+function X({
+  value: t,
+  options: p,
+  label: o,
+  onCommit: n,
+  onCancel: i
+}) {
+  var h;
+  const l = w(!1), a = t == null ? "" : String(t), d = (r, c = 0) => {
+    l.current || (l.current = !0, n(r === "" ? null : r, c));
+  };
+  return /* @__PURE__ */ v(
+    Q,
+    {
+      open: !0,
+      onOpenChange: (r) => {
+        !r && !l.current && (l.current = !0, i());
+      },
+      children: [
+        /* @__PURE__ */ s(Y, { asChild: !0, children: /* @__PURE__ */ s("span", { className: "block h-7 min-w-[120px] rounded border border-nvr-cyan bg-white px-1.5 py-1 text-[12px] text-slate-700 ring-2 ring-nvr-cyan/30 dark:bg-slate-900 dark:text-slate-200", children: ((h = p.find((r) => r.value === a)) == null ? void 0 : h.label) ?? (a || "—") }) }),
+        /* @__PURE__ */ s(
+          G,
+          {
+            align: "start",
+            className: "w-[240px] p-0",
+            onClick: (r) => r.stopPropagation(),
+            onKeyDown: (r) => {
+              r.stopPropagation(), r.key === "Tab" && (r.preventDefault(), d(a, r.shiftKey ? -1 : 1));
+            },
+            children: /* @__PURE__ */ v(V, { children: [
+              /* @__PURE__ */ s(z, { placeholder: `Set ${o}…`, className: "h-8 text-[12px]" }),
+              /* @__PURE__ */ v(B, { children: [
+                /* @__PURE__ */ s(J, { className: "py-3 text-center text-[12px] text-muted-foreground", children: "No matches" }),
+                /* @__PURE__ */ v(
+                  I,
+                  {
+                    value: "__clear__ —",
+                    onSelect: () => d(""),
+                    className: "text-[12px] text-slate-500 dark:text-slate-400",
+                    children: [
+                      /* @__PURE__ */ s("span", { className: "mr-2 inline-block w-3" }),
+                      "— Clear —"
+                    ]
+                  }
+                ),
+                p.map((r) => /* @__PURE__ */ v(
+                  I,
+                  {
+                    value: `${r.label} ${r.value}`,
+                    onSelect: () => d(r.value),
+                    className: "text-[12px]",
+                    children: [
+                      /* @__PURE__ */ s(
+                        K,
+                        {
+                          className: N("mr-2 h-3 w-3", r.value === a ? "opacity-100" : "opacity-0")
+                        }
+                      ),
+                      r.label
+                    ]
+                  },
+                  r.value
+                ))
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Z({
+  target: t,
+  value: p,
+  onCommit: o,
+  onCancel: n
+}) {
+  const i = H(t), l = w(!1);
+  return P(() => {
+    const a = (d) => {
+      d.key !== "Escape" || l.current || (l.current = !0, n());
+    };
+    return document.addEventListener("keydown", a, !0), () => document.removeEventListener("keydown", a, !0);
+  }, [n]), // biome-ignore lint/a11y/noStaticElementInteractions: stops the row's open-on-click
+  /* @__PURE__ */ s(
+    "span",
+    {
+      className: "block min-w-[180px]",
+      onClick: (a) => a.stopPropagation(),
+      onKeyDown: (a) => a.stopPropagation(),
+      "data-inline-editor": "m2o",
+      children: /* @__PURE__ */ s(
+        M,
+        {
+          collection: t,
+          value: p,
+          defaultOpen: !0,
+          extraFilter: i,
+          onChange: (a) => {
+            l.current || (l.current = !0, o(a ?? null, 0));
+          },
+          onClose: () => {
+            l.current || (l.current = !0, n());
+          }
+        }
+      )
+    }
+  );
+}
+function de({
+  controller: t,
+  cellKey: p,
+  kind: o,
+  value: n,
+  label: i,
+  choices: l,
+  target: a,
+  onCommit: d,
+  children: h
+}) {
+  const r = t.editing === p, c = t.errorOf(p), b = t.savingOf(p), k = t.savedOf(p);
+  if (r) {
+    const m = t.cancel;
+    if (o === "m2o" && a)
+      return /* @__PURE__ */ s(Z, { target: a, value: n, onCommit: d, onCancel: m });
+    if (o === "choice" || o === "boolean") {
+      const e = o === "boolean" ? [
+        { value: "true", label: "Yes" },
+        { value: "false", label: "No" }
+      ] : (l ?? []).map((u) => ({ value: u.value, label: U(u.label) })), f = o === "boolean" && n != null ? n === !0 || n === 1 || n === "1" || n === "true" ? "true" : "false" : n;
+      return /* @__PURE__ */ s(
+        X,
+        {
+          value: f,
+          options: e,
+          label: i,
+          onCommit: (u, x) => d(o === "boolean" ? u == null ? null : u === "true" : u, x),
+          onCancel: m
+        }
+      );
+    }
+    return /* @__PURE__ */ s(
+      W,
+      {
+        kind: o,
+        value: n,
+        label: i,
+        onCommit: d,
+        onCancel: m
+      }
+    );
+  }
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: wraps arbitrary cell content (links, chips)
+    /* @__PURE__ */ v(
+      "span",
+      {
+        role: "button",
+        tabIndex: 0,
+        "data-inline-editable": o,
+        "data-inline-error": c ? "" : void 0,
+        "aria-label": `${i}: edit`,
+        onClick: (m) => {
+          m.stopPropagation(), t.start(p);
+        },
+        onDoubleClick: (m) => m.stopPropagation(),
+        onKeyDown: (m) => {
+          (m.key === "Enter" || m.key === "F2") && (m.preventDefault(), m.stopPropagation(), t.start(p));
+        },
+        className: N(
+          "group/ie -mx-1 flex min-h-[22px] min-w-[48px] cursor-text items-center gap-1 rounded px-1 outline-none transition-colors hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-nvr-cyan/50 dark:hover:bg-white/[0.06]",
+          c && "ring-1 ring-red-400 dark:ring-red-500/70",
+          b && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate", children: h }),
+          b ? /* @__PURE__ */ s(L, { className: "h-3 w-3 shrink-0 animate-spin text-slate-400" }) : k ? /* @__PURE__ */ s(K, { className: "h-3 w-3 shrink-0 text-emerald-500 dark:text-emerald-400" }) : /* @__PURE__ */ s(R, { className: "invisible h-3 w-3 shrink-0 text-slate-400 group-hover/ie:visible group-focus-visible/ie:visible dark:text-slate-500" }),
+          c && /* @__PURE__ */ s(
+            "span",
+            {
+              className: "ml-1 max-w-[220px] shrink-0 truncate text-[10.5px] font-medium text-red-600 dark:text-red-400",
+              "data-tip": c,
+              "data-inline-refusal": "",
+              children: c
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  de as InlineEditCell,
+  me as useInlineEdit
+};