@nivaro/react 0.3.34 → 0.3.35
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.
- package/dist/full.css +1 -1
- package/dist/hooks/useSessionRecorder.js +1 -1
- package/dist/shared/components/ItemEditForm.js +2009 -1996
- package/dist/shared/components/item-edit/FieldAffordances.js +351 -307
- package/dist/shared/components/item-edit/FieldRow.js +453 -447
- package/dist/shared/components/item-edit/PersonalDefaultControl.js +211 -0
- package/dist/shared/components/item-edit/PersonalDefaultPill.js +9 -39
- package/dist/shared/components/item-edit/RecordLiveSync.js +115 -110
- package/dist/shared/components/item-edit/entry/useEntryKeyboard.js +27 -27
- package/dist/shared/components/item-edit/live-record-marks.js +13 -0
- package/dist/shared/components/item-edit/usePersonalDefaults.js +314 -230
- package/package.json +1 -1
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import { jsx as t, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import { UserRoundPlus as D, UserRoundPen as S, UserRoundX as C, Check as U, UserRound as w, Undo2 as E } from "lucide-react";
|
|
3
|
+
import { useState as Y, Fragment as F, useInsertionEffect as P } from "react";
|
|
4
|
+
import { toast as c } from "sonner";
|
|
5
|
+
import { usePersonalDefaultsApi as I } from "./usePersonalDefaults.js";
|
|
6
|
+
function T(e) {
|
|
7
|
+
return e.applied && e.hasDefault ? "applied" : e.editable ? e.loaded ? e.failed && !e.hasDefault ? e.hasValue ? "offer" : null : e.hasDefault ? e.hasValue ? e.isDefault ? "saved" : "update" : "saved-empty" : e.hasValue ? "offer" : "reserve" : "reserve" : null;
|
|
8
|
+
}
|
|
9
|
+
function K(e, n, a) {
|
|
10
|
+
return e != null && e.allowed(n) ? T({
|
|
11
|
+
editable: a,
|
|
12
|
+
loaded: e.loaded,
|
|
13
|
+
hasValue: e.hasValue(n),
|
|
14
|
+
hasDefault: e.defaultFor(n) !== null,
|
|
15
|
+
isDefault: e.isDefault(n),
|
|
16
|
+
applied: e.applied(n),
|
|
17
|
+
failed: e.failed
|
|
18
|
+
}) : null;
|
|
19
|
+
}
|
|
20
|
+
function g(e, n) {
|
|
21
|
+
var d, i, p;
|
|
22
|
+
const a = e;
|
|
23
|
+
return ((i = (d = a == null ? void 0 : a.response) == null ? void 0 : d.data) == null ? void 0 : i.error) ?? ((p = a == null ? void 0 : a.data) == null ? void 0 : p.error) ?? (a == null ? void 0 : a.error) ?? (a == null ? void 0 : a.message) ?? n;
|
|
24
|
+
}
|
|
25
|
+
function R(e, n) {
|
|
26
|
+
return e.clear(n).then(
|
|
27
|
+
(a) => (c.success(
|
|
28
|
+
"Your default was cleared",
|
|
29
|
+
a ? {
|
|
30
|
+
action: {
|
|
31
|
+
label: "Undo",
|
|
32
|
+
onClick: () => {
|
|
33
|
+
e.restore(a).then(
|
|
34
|
+
() => c.success("Your default is back"),
|
|
35
|
+
(d) => c.error(g(d, "Could not put your default back"))
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
} : void 0
|
|
40
|
+
), !0),
|
|
41
|
+
(a) => (c.error(g(a, "Could not clear your default")), !1)
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
const A = `
|
|
45
|
+
[data-pd-row]{container-type:inline-size;container-name:nvrpd}
|
|
46
|
+
[data-personal-default-slot]{min-width:13rem}
|
|
47
|
+
[data-personal-default-slot][data-pd-new]{min-width:16rem}
|
|
48
|
+
[data-personal-default-slot] [data-pd-icon]{display:none}
|
|
49
|
+
@container nvrpd (max-width: 319px){
|
|
50
|
+
[data-personal-default-slot],[data-personal-default-slot][data-pd-new]{min-width:9rem}
|
|
51
|
+
[data-personal-default-slot] [data-pd-label]{display:none}
|
|
52
|
+
[data-personal-default-slot] [data-pd-icon]{display:inline-block}
|
|
53
|
+
}
|
|
54
|
+
@container nvrpd (max-width: 191px){
|
|
55
|
+
[data-personal-default-slot]{min-width:3.25rem}
|
|
56
|
+
[data-personal-default-slot][data-pd-new]{min-width:5rem}
|
|
57
|
+
[data-personal-default-slot] [data-pd-primary]{display:none}
|
|
58
|
+
}
|
|
59
|
+
@media (hover: none) and (pointer: coarse){
|
|
60
|
+
[data-pd-row] [data-pd-action]::before{top:-16px;bottom:-8px}
|
|
61
|
+
[data-personal-default-confirm] button{height:2.75rem;padding-inline:.875rem}
|
|
62
|
+
}
|
|
63
|
+
@media (hover: none){
|
|
64
|
+
button[data-field-menu-trigger]{opacity:1}
|
|
65
|
+
}
|
|
66
|
+
`, N = "nvr-personal-default-css";
|
|
67
|
+
function L() {
|
|
68
|
+
P(() => {
|
|
69
|
+
if (typeof document > "u" || document.getElementById(N)) return;
|
|
70
|
+
const e = document.createElement("style");
|
|
71
|
+
e.id = N, e.textContent = A, document.head.appendChild(e);
|
|
72
|
+
}, []);
|
|
73
|
+
}
|
|
74
|
+
const y = 'relative inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded px-1 text-[10.5px] font-medium text-slate-500 transition-colors duration-150 before:absolute before:inset-x-0 before:-inset-y-0.5 before:content-[""] hover:bg-muted hover:text-slate-800 active:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 disabled:cursor-not-allowed disabled:opacity-50 aria-expanded:bg-muted aria-expanded:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground dark:focus-visible:ring-sky-300 dark:aria-expanded:text-foreground', V = "inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap px-1 text-[10.5px] font-medium text-slate-500 dark:text-muted-foreground", $ = "inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded bg-sky-50 px-1.5 text-[10.5px] font-medium text-sky-800 dark:bg-sky-900/30 dark:text-sky-200";
|
|
75
|
+
function j() {
|
|
76
|
+
return /* @__PURE__ */ t(
|
|
77
|
+
"span",
|
|
78
|
+
{
|
|
79
|
+
"aria-hidden": !0,
|
|
80
|
+
className: "select-none px-px text-[10.5px] text-slate-400 dark:text-slate-500",
|
|
81
|
+
children: "·"
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
function X({
|
|
86
|
+
field: e,
|
|
87
|
+
label: n,
|
|
88
|
+
state: a,
|
|
89
|
+
confirmOpen: d,
|
|
90
|
+
onConfirm: i,
|
|
91
|
+
onUndo: p,
|
|
92
|
+
onCleared: h
|
|
93
|
+
}) {
|
|
94
|
+
L();
|
|
95
|
+
const l = I(), [v, b] = Y(!1), o = n || e, x = a !== "saved-empty", m = /* @__PURE__ */ s(
|
|
96
|
+
"button",
|
|
97
|
+
{
|
|
98
|
+
type: "button",
|
|
99
|
+
"data-personal-default-clear": e,
|
|
100
|
+
"aria-label": x ? `Clear your saved default for ${o} (the field keeps its value)` : `Clear your saved default for ${o}`,
|
|
101
|
+
"data-tip": x ? "Forget your saved default — this field keeps its value" : "Forget your saved default",
|
|
102
|
+
"data-pd-action": !0,
|
|
103
|
+
tabIndex: -1,
|
|
104
|
+
disabled: v || !l,
|
|
105
|
+
"aria-busy": v || void 0,
|
|
106
|
+
onClick: () => {
|
|
107
|
+
l && (b(!0), R(l, e).then((r) => {
|
|
108
|
+
b(!1), r && (h == null || h());
|
|
109
|
+
}));
|
|
110
|
+
},
|
|
111
|
+
className: y,
|
|
112
|
+
children: [
|
|
113
|
+
/* @__PURE__ */ t(C, { "data-pd-icon": !0, className: "h-3 w-3", "aria-hidden": !0 }),
|
|
114
|
+
/* @__PURE__ */ t("span", { "data-pd-label": !0, children: "Clear default" })
|
|
115
|
+
]
|
|
116
|
+
},
|
|
117
|
+
"clear"
|
|
118
|
+
), k = (r) => /* @__PURE__ */ s(
|
|
119
|
+
"button",
|
|
120
|
+
{
|
|
121
|
+
type: "button",
|
|
122
|
+
...r === "make" ? { "data-personal-default-make": e } : { "data-personal-default-update": e },
|
|
123
|
+
"aria-label": r === "make" ? `Make this your default for ${o}` : `Update your saved default for ${o} to this value`,
|
|
124
|
+
"aria-haspopup": "dialog",
|
|
125
|
+
"aria-expanded": d === r,
|
|
126
|
+
"data-tip": r === "make" ? "Start your new records with this value" : "Start your new records with this value instead",
|
|
127
|
+
"data-pd-action": !0,
|
|
128
|
+
tabIndex: -1,
|
|
129
|
+
onClick: (f) => i(f.currentTarget, r),
|
|
130
|
+
className: y,
|
|
131
|
+
children: [
|
|
132
|
+
r === "make" ? /* @__PURE__ */ t(D, { className: "h-3 w-3", "aria-hidden": !0 }) : /* @__PURE__ */ t(S, { className: "h-3 w-3", "aria-hidden": !0 }),
|
|
133
|
+
/* @__PURE__ */ t("span", { "data-pd-primary": !0, children: r === "make" ? "Make default" : "Update default" })
|
|
134
|
+
]
|
|
135
|
+
},
|
|
136
|
+
r
|
|
137
|
+
);
|
|
138
|
+
let u = [];
|
|
139
|
+
return a === "offer" ? u = [k("make")] : a === "update" ? u = [k("update"), m] : a === "saved" || a === "saved-empty" ? u = [
|
|
140
|
+
/* @__PURE__ */ s(
|
|
141
|
+
"span",
|
|
142
|
+
{
|
|
143
|
+
"data-personal-default-saved": e,
|
|
144
|
+
"data-tip": a === "saved" ? "Your new records start with this value" : "You have a saved default for this field — new records start with it",
|
|
145
|
+
className: V,
|
|
146
|
+
children: [
|
|
147
|
+
a === "saved" ? /* @__PURE__ */ t(U, { className: "h-3 w-3 text-sky-700 dark:text-sky-300", "aria-hidden": !0 }) : /* @__PURE__ */ t(w, { className: "h-3 w-3", "aria-hidden": !0 }),
|
|
148
|
+
/* @__PURE__ */ t("span", { className: "sr-only", children: "Your default" }),
|
|
149
|
+
/* @__PURE__ */ t("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
"status"
|
|
153
|
+
),
|
|
154
|
+
m
|
|
155
|
+
] : a === "applied" && (u = [
|
|
156
|
+
/* @__PURE__ */ s(
|
|
157
|
+
"span",
|
|
158
|
+
{
|
|
159
|
+
"data-personal-default": e,
|
|
160
|
+
"data-tip": "Filled in from your saved default",
|
|
161
|
+
className: $,
|
|
162
|
+
children: [
|
|
163
|
+
/* @__PURE__ */ t(w, { className: "h-3 w-3", "aria-hidden": !0 }),
|
|
164
|
+
/* @__PURE__ */ t("span", { className: "sr-only", children: "Your default" }),
|
|
165
|
+
/* @__PURE__ */ t("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
"status"
|
|
169
|
+
),
|
|
170
|
+
/* @__PURE__ */ s(
|
|
171
|
+
"button",
|
|
172
|
+
{
|
|
173
|
+
type: "button",
|
|
174
|
+
"data-personal-default-undo": e,
|
|
175
|
+
"aria-label": `Undo: empty ${o} (your saved default stays)`,
|
|
176
|
+
"data-tip": "Empty this field — your saved default stays",
|
|
177
|
+
"data-pd-action": !0,
|
|
178
|
+
onClick: p,
|
|
179
|
+
className: y,
|
|
180
|
+
children: [
|
|
181
|
+
/* @__PURE__ */ t(E, { className: "h-3 w-3", "aria-hidden": !0 }),
|
|
182
|
+
/* @__PURE__ */ t("span", { "data-pd-label": !0, children: "Undo" })
|
|
183
|
+
]
|
|
184
|
+
},
|
|
185
|
+
"undo"
|
|
186
|
+
),
|
|
187
|
+
m
|
|
188
|
+
]), /* @__PURE__ */ t(
|
|
189
|
+
"span",
|
|
190
|
+
{
|
|
191
|
+
"data-personal-default-slot": e,
|
|
192
|
+
"data-state": a,
|
|
193
|
+
"data-pd-new": l != null && l.isNew ? "" : void 0,
|
|
194
|
+
"aria-hidden": a === "reserve" ? !0 : void 0,
|
|
195
|
+
className: "inline-flex shrink-0 items-center justify-end",
|
|
196
|
+
children: u.map((r, f) => /* @__PURE__ */ s(F, { children: [
|
|
197
|
+
f > 0 && /* @__PURE__ */ t(j, {}),
|
|
198
|
+
r
|
|
199
|
+
] }, String(r.key ?? f)))
|
|
200
|
+
}
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
export {
|
|
204
|
+
A as PERSONAL_DEFAULT_CSS,
|
|
205
|
+
X as PersonalDefaultSlot,
|
|
206
|
+
R as clearPersonalDefault,
|
|
207
|
+
K as personalDefaultSlotFor,
|
|
208
|
+
T as personalDefaultSlotState,
|
|
209
|
+
g as refusalText,
|
|
210
|
+
L as usePersonalDefaultCss
|
|
211
|
+
};
|
|
@@ -1,50 +1,20 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { UserRound as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
onUndo: s
|
|
7
|
-
}) {
|
|
8
|
-
return /* @__PURE__ */ a(
|
|
9
|
-
"span",
|
|
10
|
-
{
|
|
11
|
-
"data-personal-default": t,
|
|
12
|
-
"data-tip": "Prefilled from your saved default · Undo",
|
|
13
|
-
className: "inline-flex h-5 items-center gap-1 rounded bg-sky-50 pl-1.5 pr-0.5 text-[10.5px] font-medium text-sky-800 dark:bg-sky-900/30 dark:text-sky-200",
|
|
14
|
-
children: [
|
|
15
|
-
/* @__PURE__ */ e(n, { className: "h-3 w-3", "aria-hidden": !0 }),
|
|
16
|
-
"Your default",
|
|
17
|
-
/* @__PURE__ */ e(
|
|
18
|
-
"button",
|
|
19
|
-
{
|
|
20
|
-
type: "button",
|
|
21
|
-
onClick: s,
|
|
22
|
-
"aria-label": r ? `Undo your default for ${r}` : "Undo your default",
|
|
23
|
-
"data-personal-default-undo": t,
|
|
24
|
-
className: 'relative inline-flex h-4 w-4 items-center justify-center rounded text-sky-700 before:absolute before:-inset-1 before:content-[""] transition-colors duration-150 hover:bg-sky-100 hover:text-sky-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 dark:text-sky-300 dark:focus-visible:ring-sky-300 dark:hover:bg-sky-800/50 dark:hover:text-white',
|
|
25
|
-
children: /* @__PURE__ */ e(i, { className: "h-3 w-3", "aria-hidden": !0 })
|
|
26
|
-
}
|
|
27
|
-
)
|
|
28
|
-
]
|
|
29
|
-
}
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
const u = "inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan/40 dark:text-slate-400 dark:hover:text-slate-100";
|
|
33
|
-
function f({ field: t, text: r }) {
|
|
34
|
-
return /* @__PURE__ */ a(
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { UserRound as r } from "lucide-react";
|
|
3
|
+
const l = "inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan/40 dark:text-slate-400 dark:hover:text-slate-100";
|
|
4
|
+
function o({ field: t, text: s }) {
|
|
5
|
+
return /* @__PURE__ */ n(
|
|
35
6
|
"p",
|
|
36
7
|
{
|
|
37
8
|
"data-personal-default-hint": t,
|
|
38
9
|
className: "flex items-start gap-1 text-[11.5px] leading-snug text-slate-500 dark:text-slate-400",
|
|
39
10
|
children: [
|
|
40
|
-
/* @__PURE__ */ e(
|
|
41
|
-
/* @__PURE__ */ e("span", { children:
|
|
11
|
+
/* @__PURE__ */ e(r, { className: "mt-0.5 h-3 w-3 shrink-0", "aria-hidden": !0 }),
|
|
12
|
+
/* @__PURE__ */ e("span", { children: s })
|
|
42
13
|
]
|
|
43
14
|
}
|
|
44
15
|
);
|
|
45
16
|
}
|
|
46
17
|
export {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
d as PersonalDefaultPill
|
|
18
|
+
l as PERSONAL_DEFAULT_GHOST_BUTTON,
|
|
19
|
+
o as PersonalDefaultHint
|
|
50
20
|
};
|