@tesouro/embedded-components-react 0.2.280 → 0.2.282

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/feature/dist/index9.js

@@ -30,7 +30,8 @@ function n({ payable: n, lineItems: r }) {
 		values: i,
 		lineItems: a.length ? a : [e()],
 		discount: t(n.discount),
-		tax: t(n.tax_amount)
+		tax: t(n.tax_amount),
+		total: t(n.total_amount)
 	};
 }
 //#endregion

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index.js

@@ -28,16 +28,16 @@ import "./index32.js";
 import "./index33.js";
 import "./index34.js";
 import "./index35.js";
-import "./index36.js";
-import "./index37.js";
-import { BillsScreen as r } from "./index38.js";
+import { BILL_DETAILS_SHEET_LABELS_EN as r } from "./index36.js";
+import { BillDetailsSheet as i } from "./index37.js";
+import { BillsScreen as a } from "./index38.js";
 import "./index39.js";
-import { BillUploadStatusTray as i } from "./index41.js";
+import { BillUploadStatusTray as o } from "./index41.js";
 import "./index43.js";
 import "./index44.js";
-import { ExtractionNotice as a } from "./index45.js";
+import { ExtractionNotice as s } from "./index45.js";
 import "./index46.js";
 import "./index47.js";
-import { SourceDocumentPanel as o } from "./index48.js";
+import { SourceDocumentPanel as c } from "./index48.js";
 import "./index49.js";
-export { e as AddBillDialog, t as BillCreateScreen, n as BillPayWidgetUi, i as BillUploadStatusTray, r as BillsScreen, a as ExtractionNotice, o as SourceDocumentPanel };
+export { e as AddBillDialog, r as BILL_DETAILS_SHEET_LABELS_EN, t as BillCreateScreen, i as BillDetailsSheet, n as BillPayWidgetUi, o as BillUploadStatusTray, a as BillsScreen, s as ExtractionNotice, c as SourceDocumentPanel };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index13.js

@@ -3,44 +3,45 @@ import { BILL_FORM_FIELDS_LABELS_EN as n } from "./index12.js";
 import { useId as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index13.js
-function o({ values: o, errors: s, onChange: c, testId: l, labels: u }) {
-	let d = {
+function o({ values: o, errors: s, onChange: c, disabled: l, testId: u, labels: d }) {
+	let f = {
 		...n,
-		...u
-	}, f = r(), p = (n, r, l) => {
-		let u = `${f}-${n}`, d = `${u}-error`, p = s?.[n];
+		...d
+	}, p = r(), m = (n, r, u) => {
+		let d = `${p}-${n}`, f = `${d}-error`, m = s?.[n];
 		return /* @__PURE__ */ a("div", {
 			className: "ttw:flex ttw:flex-col ttw:gap-1.5",
 			children: [
 				/* @__PURE__ */ i(t, {
-					htmlFor: u,
+					htmlFor: d,
 					children: r
 				}),
 				/* @__PURE__ */ i(e, {
-					id: u,
-					type: l,
+					id: d,
+					type: u,
 					value: o[n],
-					"aria-invalid": p ? !0 : void 0,
-					"aria-describedby": p ? d : void 0,
+					disabled: l,
+					"aria-invalid": m ? !0 : void 0,
+					"aria-describedby": m ? f : void 0,
 					onChange: (e) => c({ [n]: e.target.value })
 				}),
-				p ? /* @__PURE__ */ i("p", {
-					id: d,
+				m ? /* @__PURE__ */ i("p", {
+					id: f,
 					className: "ttw:text-sm ttw:text-destructive",
-					children: p
+					children: m
 				}) : null
 			]
 		});
 	};
 	return /* @__PURE__ */ a("div", {
 		className: "ttw:flex ttw:flex-col ttw:gap-4",
-		"data-testid": l,
+		"data-testid": u,
 		children: [/* @__PURE__ */ a("div", {
 			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [p("invoiceDate", d.invoiceDate, "date"), p("dueDate", d.dueDate, "date")]
+			children: [m("invoiceDate", f.invoiceDate, "date"), m("dueDate", f.dueDate, "date")]
 		}), /* @__PURE__ */ a("div", {
 			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [p("invoiceNumber", d.invoiceNumber), p("poNumber", d.poNumber)]
+			children: [m("invoiceNumber", f.invoiceNumber), m("poNumber", f.poNumber)]
 		})]
 	});
 }

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index16.js

@@ -86,6 +86,7 @@ function y({ items: y, glCodeOptions: b, discount: x, onDiscountChange: S, tax:
 												onValueChange: (e) => d.onChange({ glCode: e }),
 												children: [/* @__PURE__ */ m(l, {
 													id: `${p}-gl-code`,
+													className: "ttw:w-full",
 													"aria-invalid": S("glCode") ? !0 : void 0,
 													"aria-describedby": S("glCode") ? x("glCode") : void 0,
 													children: /* @__PURE__ */ m(u, { placeholder: M.glCodePlaceholder })

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index21.js

@@ -1,6 +1,6 @@
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index21.js
 var e = {
-	fieldLabel: "Vendor",
+	fieldLabel: "Select or add vendor",
 	placeholder: "Search",
 	loading: "Searching vendors...",
 	emptyResults: "No vendors found",

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index22.js

@@ -1,131 +1,96 @@
-import { Input as e, Skeleton as t, cn as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as r } from "./index21.js";
-import { useId as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Plus as c, Search as l } from "lucide-react";
+import { Command as e, CommandGroup as t, CommandInput as n, CommandItem as r, CommandList as i, CommandSeparator as a, Label as o, Popover as s, PopoverContent as c, PopoverTrigger as l, Skeleton as u, cn as d } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as f } from "./index21.js";
+import { useId as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Plus as _, Search as v } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index22.js
-var u = 5, d = "ttw:min-h-44";
-function f({ query: f, onQueryChange: p, results: m, isLoading: h, onAddVendor: g, testId: _, labels: v }) {
-	let y = {
-		...r,
-		...v
-	}, b = i(), x = i(), [S, C] = a(!1), [w, T] = a(-1), E = h ? 0 : m.length + 1, D = S && w >= 0 ? `${x}-option-${w}` : void 0, O = (e) => {
-		C(!1), T(-1), e();
-	}, k = () => {
-		C(!1), T(-1), g();
-	}, A = () => {
-		C(!1), T(-1);
-	};
-	return /* @__PURE__ */ s("div", {
+var y = 5, b = "ttw:min-h-44";
+function x({ query: x, onQueryChange: S, results: C, isLoading: w, onAddVendor: T, testId: E, labels: D }) {
+	let O = {
+		...f,
+		...D
+	}, k = p(), [A, j] = m(!1);
+	return /* @__PURE__ */ g("div", {
 		className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-		"data-testid": _,
-		children: [/* @__PURE__ */ o("label", {
-			htmlFor: b,
-			className: "ttw:text-sm ttw:font-medium",
-			children: y.fieldLabel
-		}), /* @__PURE__ */ s("div", {
-			className: "ttw:relative",
-			children: [/* @__PURE__ */ s("div", {
-				className: "ttw:flex ttw:h-10 ttw:items-center ttw:gap-2 ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3",
-				children: [/* @__PURE__ */ o(l, {
-					"aria-hidden": !0,
-					className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
-				}), /* @__PURE__ */ o(e, {
-					id: b,
-					value: f,
-					onChange: (e) => {
-						C(!0), T(-1), p(e.target.value);
-					},
-					onFocus: () => C(!0),
-					onBlur: A,
-					onKeyDown: (e) => {
-						if (e.key === "Escape") {
-							A();
-							return;
-						}
-						if (E) {
-							if (e.key === "ArrowDown") {
-								e.preventDefault(), C(!0), T((e) => e >= E - 1 ? 0 : e + 1);
-								return;
-							}
-							if (e.key === "ArrowUp") {
-								e.preventDefault(), C(!0), T((e) => e <= 0 ? E - 1 : e - 1);
-								return;
-							}
-							e.key === "Enter" && S && w >= 0 && (e.preventDefault(), w < m.length ? O(m[w].onSelect) : k());
-						}
-					},
-					placeholder: y.placeholder,
+		"data-testid": E,
+		children: [/* @__PURE__ */ h(o, {
+			htmlFor: k,
+			children: O.fieldLabel
+		}), /* @__PURE__ */ g(s, {
+			open: A,
+			onOpenChange: j,
+			children: [/* @__PURE__ */ h(l, {
+				asChild: !0,
+				children: /* @__PURE__ */ g("button", {
+					type: "button",
+					id: k,
 					role: "combobox",
-					"aria-autocomplete": "list",
-					"aria-expanded": S,
-					"aria-controls": S ? x : void 0,
-					"aria-activedescendant": D,
-					className: "ttw:h-auto ttw:border-0 ttw:p-0 ttw:shadow-none ttw:ring-0 ttw:focus-visible:ring-0"
-				})]
-			}), S ? /* @__PURE__ */ s("div", {
-				id: x,
-				role: "listbox",
-				className: "ttw:absolute ttw:top-full ttw:left-0 ttw:z-10 ttw:mt-1 ttw:max-h-72 ttw:w-full ttw:overflow-y-auto ttw:rounded-md ttw:border ttw:border-border ttw:bg-popover ttw:p-1 ttw:shadow-md",
-				children: [
-					h ? /* @__PURE__ */ s("div", {
-						className: n("ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2", d),
-						"aria-busy": "true",
-						children: [/* @__PURE__ */ o("span", {
-							className: "ttw:sr-only",
-							children: y.loading
-						}), Array.from({ length: u }).map((e, n) => /* @__PURE__ */ s("div", {
-							className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
-							children: [/* @__PURE__ */ o(t, {
-								height: 14,
-								width: "55%"
-							}), /* @__PURE__ */ o(t, {
-								height: 14,
-								width: "30%"
-							})]
-						}, n))]
-					}) : m.length === 0 && f ? /* @__PURE__ */ o("div", {
-						className: n("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", d),
-						children: y.emptyResults
-					}) : m.length > 0 ? /* @__PURE__ */ o("div", {
-						role: "group",
-						children: m.map((e, t) => /* @__PURE__ */ s("button", {
-							id: `${x}-option-${t}`,
-							type: "button",
-							role: "option",
-							"aria-selected": w === t,
-							onMouseDown: (e) => e.preventDefault(),
-							onMouseEnter: () => T(t),
-							onClick: () => O(e.onSelect),
-							className: n("ttw:flex ttw:w-full ttw:items-center ttw:justify-between ttw:gap-4 ttw:rounded-sm ttw:px-2 ttw:py-1.5 ttw:text-left ttw:text-sm ttw:outline-hidden", w === t ? "ttw:bg-accent ttw:text-accent-foreground" : "ttw:text-popover-foreground"),
-							children: [/* @__PURE__ */ o("span", {
-								className: "ttw:text-foreground",
-								children: e.name
-							}), /* @__PURE__ */ o("span", {
-								className: "ttw:text-muted-foreground",
-								children: e.email
-							})]
-						}, `${e.name}:${e.email}:${t}`))
-					}) : null,
-					h || m.length > 0 || f ? /* @__PURE__ */ o("div", { className: "ttw:-mx-1 ttw:my-1 ttw:h-px ttw:bg-border" }) : null,
-					/* @__PURE__ */ o("div", {
-						role: "group",
-						children: /* @__PURE__ */ s("button", {
-							id: `${x}-option-${m.length}`,
-							type: "button",
-							role: "option",
-							"aria-selected": w === m.length,
-							onMouseDown: (e) => e.preventDefault(),
-							onMouseEnter: () => T(m.length),
-							onClick: k,
-							className: n("ttw:flex ttw:w-full ttw:items-center ttw:gap-2 ttw:rounded-sm ttw:px-2 ttw:py-1.5 ttw:text-left ttw:text-sm ttw:text-primary ttw:outline-hidden", w === m.length ? "ttw:bg-accent" : "ttw:bg-transparent"),
-							children: [/* @__PURE__ */ o(c, { className: "ttw:size-4 ttw:text-primary" }), y.addVendorAction]
-						})
-					})
-				]
-			}) : null]
+					"aria-expanded": A,
+					className: "ttw:flex ttw:h-10 ttw:w-full ttw:items-center ttw:gap-2 ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3 ttw:text-left ttw:text-sm ttw:shadow-xs ttw:outline-none ttw:focus-visible:border-ring ttw:focus-visible:ring-[3px] ttw:focus-visible:ring-ring/50",
+					children: [/* @__PURE__ */ h(v, {
+						"aria-hidden": !0,
+						className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
+					}), /* @__PURE__ */ h("span", {
+						className: d("ttw:min-w-0 ttw:flex-1 ttw:truncate", !x && "ttw:text-muted-foreground"),
+						children: x || O.placeholder
+					})]
+				})
+			}), /* @__PURE__ */ h(c, {
+				align: "start",
+				className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:p-0",
+				children: /* @__PURE__ */ g(e, {
+					shouldFilter: !1,
+					children: [/* @__PURE__ */ h(n, {
+						value: x,
+						onValueChange: S,
+						placeholder: O.placeholder,
+						"aria-label": O.placeholder
+					}), /* @__PURE__ */ g(i, {
+						className: d("ttw:max-h-72", b),
+						children: [
+							w ? /* @__PURE__ */ g("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2",
+								"aria-busy": "true",
+								children: [/* @__PURE__ */ h("span", {
+									className: "ttw:sr-only",
+									children: O.loading
+								}), Array.from({ length: y }).map((e, t) => /* @__PURE__ */ g("div", {
+									className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
+									children: [/* @__PURE__ */ h(u, {
+										height: 14,
+										width: "55%"
+									}), /* @__PURE__ */ h(u, {
+										height: 14,
+										width: "30%"
+									})]
+								}, t))]
+							}) : C.length === 0 && x ? /* @__PURE__ */ h("div", {
+								className: d("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", b),
+								children: O.emptyResults
+							}) : C.length > 0 ? /* @__PURE__ */ h(t, { children: C.map((e, t) => /* @__PURE__ */ g(r, {
+								value: `${e.name} ${e.email} ${t}`,
+								onSelect: () => e.onSelect(),
+								children: [/* @__PURE__ */ h("span", {
+									className: "ttw:text-foreground",
+									children: e.name
+								}), /* @__PURE__ */ h("span", {
+									className: "ttw:ml-auto ttw:text-muted-foreground",
+									children: e.email
+								})]
+							}, `${e.name}:${e.email}:${t}`)) }) : null,
+							w || C.length > 0 || x ? /* @__PURE__ */ h(a, {}) : null,
+							/* @__PURE__ */ g(r, {
+								value: "__add_vendor__",
+								onSelect: T,
+								className: "ttw:sticky ttw:bottom-0 ttw:bg-popover ttw:text-primary",
+								children: [/* @__PURE__ */ h(_, { className: "ttw:size-4 ttw:text-primary" }), O.addVendorAction]
+							})
+						]
+					})]
+				})
+			})]
 		})]
 	});
 }
 //#endregion
-export { f as VendorSearchCombobox, f as default };
+export { x as VendorSearchCombobox, x as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index24.js

@@ -6,7 +6,8 @@ import "./index23.js";
 var n = {
 	heading: "Who are you paying?",
 	summaryCard: e,
-	search: t
+	search: t,
+	noVendorPlaceholder: "No vendor selected"
 };
 //#endregion
 export { n as VENDOR_SECTION_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index25.js

@@ -1,48 +1,53 @@
 import { Typography as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { InlineErrorAlert as t } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
-import "../../../shared/ui/dist/index.js";
-import { VendorSummaryCard as n } from "./index19.js";
+import { VendorSummaryCard as t } from "./index19.js";
 import "./index20.js";
-import { VendorSearchCombobox as r } from "./index22.js";
+import { VendorSearchCombobox as n } from "./index22.js";
 import "./index23.js";
-import { VENDOR_SECTION_LABELS_EN as i } from "./index24.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { VENDOR_SECTION_LABELS_EN as r } from "./index24.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index25.js
-function s(s) {
-	let { onEdit: c, onClear: l, error: u, testId: d, labels: f } = s, p = {
-		...i,
-		...f,
+function o(o) {
+	let { onEdit: s, onClear: c, error: l, testId: u, labels: d, disabled: f } = o, p = {
+		...r,
+		...d,
 		summaryCard: {
-			...i.summaryCard,
-			...f?.summaryCard
+			...r.summaryCard,
+			...d?.summaryCard
 		},
 		search: {
-			...i.search,
-			...f?.search
+			...r.search,
+			...d?.search
 		}
 	};
-	return /* @__PURE__ */ o("section", {
+	return /* @__PURE__ */ a("section", {
 		className: "ttw:flex ttw:flex-col ttw:gap-3",
-		"data-testid": d,
+		"data-testid": u,
 		children: [
-			/* @__PURE__ */ a(e, {
+			/* @__PURE__ */ i(e, {
 				component: "h2",
 				variant: "h6",
 				className: "ttw:font-semibold",
 				children: p.heading
 			}),
-			u ? /* @__PURE__ */ a(t, { children: u }) : null,
-			s.mode === "resolved" ? /* @__PURE__ */ a(n, {
-				summary: s.summary,
-				onEdit: c,
-				onClear: l,
+			o.mode === "resolved" ? /* @__PURE__ */ i(t, {
+				summary: o.summary,
+				onEdit: s,
+				onClear: c,
 				labels: p.summaryCard
-			}) : s.mode === "selecting" ? /* @__PURE__ */ a(r, {
-				...s.search,
+			}) : f ? /* @__PURE__ */ i(e, {
+				variant: "body2",
+				className: "ttw:text-muted-foreground",
+				children: p.noVendorPlaceholder
+			}) : o.mode === "selecting" ? /* @__PURE__ */ i(n, {
+				...o.search,
 				labels: p.search
-			}) : s.newVendorForm
+			}) : o.newVendorForm,
+			l ? /* @__PURE__ */ i("p", {
+				className: "ttw:text-sm ttw:text-destructive",
+				children: l
+			}) : null
 		]
 	});
 }
 //#endregion
-export { s as VendorSection, s as default };
+export { o as VendorSection, o as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index27.js

@@ -9,7 +9,7 @@ var r = {
 	closeButton: "Close",
 	menuTrigger: "More actions",
 	cancelButton: "Cancel",
-	saveDraftButton: "Save as draft",
+	saveDraftButton: "Save and close",
 	finalizeButton: "Finalize",
 	hiddenDescription: "Enter the details of the bill you want to pay.",
 	vendorSection: n,