@tesouro/embedded-components-react 0.5.189 → 0.5.191

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

@@ -1,170 +1,2 @@
-import { Alert as e, AlertTitle as t, Badge as n, Button as r, cn as i } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { BillStatusBadge as a } from "./index21.js";
-import "./index22.js";
-import { BillOverflowMenu as o } from "./index46.js";
-import "./index47.js";
-import { BILL_DUPLICATE_NOTICE_LABELS_EN as s } from "./index73.js";
-import { useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { FileQuestionIcon as d, MoveDiagonal2Icon as f } from "lucide-react";
-//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index74.js
-var p = {
-	success: "ttw:text-green-700",
-	warning: "ttw:text-amber-800"
-}, m = "ttw:grid-cols-[minmax(220px,1.5fr)_minmax(110px,1fr)_minmax(88px,1fr)_minmax(96px,1fr)_minmax(96px,1fr)_minmax(112px,1fr)_48px]", h = "ttw:grid-cols-[minmax(220px,1.5fr)_minmax(110px,1fr)_minmax(88px,1fr)_minmax(96px,1fr)_minmax(96px,1fr)_minmax(112px,1fr)]";
-function g({ onNotADuplicate: g, onRemoveBill: _, onOpenFullScreen: v, isActionDisabled: y, rows: b, collapsedRowCount: x, showMoreLabel: S, testId: C, labels: w }) {
-	let T = {
-		...s,
-		...w
-	}, E = !!b?.length, [D, O] = c(!1), k = x !== void 0 && !!S && (b?.length ?? 0) > x, A = k && !D ? b?.slice(0, x) : b;
-	return E ? /* @__PURE__ */ u("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:rounded-lg ttw:border ttw:border-amber-500 ttw:bg-amber-50 ttw:p-2 ttw:text-amber-700",
-		"data-testid": C,
-		children: [/* @__PURE__ */ u("div", {
-			className: "ttw:flex ttw:items-center ttw:gap-2",
-			children: [/* @__PURE__ */ l(d, {
-				className: "ttw:size-4 ttw:shrink-0",
-				"aria-hidden": !0
-			}), /* @__PURE__ */ l("p", {
-				className: "ttw:text-sm ttw:leading-5",
-				children: T.message
-			})]
-		}), /* @__PURE__ */ u("div", {
-			className: "ttw:overflow-x-auto ttw:rounded-md ttw:border ttw:border-amber-200",
-			children: [
-				/* @__PURE__ */ u("div", {
-					className: i("ttw:grid ttw:min-w-240 ttw:border-b ttw:border-amber-200 ttw:text-xs ttw:font-semibold ttw:text-amber-700", m),
-					children: [
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2",
-							children: T.vendorColumn
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2",
-							children: T.invoiceNumberColumn
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2 ttw:text-right",
-							children: T.amountColumn
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2",
-							children: T.addedOnColumn
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2",
-							children: T.dueDateColumn
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "ttw:px-3 ttw:py-2",
-							children: T.statusColumn
-						}),
-						/* @__PURE__ */ l("div", { className: "ttw:px-3 ttw:py-2" })
-					]
-				}),
-				A?.map((e) => /* @__PURE__ */ u("div", {
-					className: i("ttw:group ttw:grid ttw:min-h-13 ttw:min-w-240 ttw:items-center ttw:border-b ttw:border-amber-200 ttw:text-sm ttw:text-foreground", m),
-					children: [/* @__PURE__ */ u("button", {
-						type: "button",
-						className: i("ttw:col-span-6 ttw:grid ttw:items-center ttw:text-left ttw:transition-colors", h, e.onOpen ? "ttw:cursor-pointer ttw:hover:bg-amber-100 ttw:focus-visible:bg-amber-100" : "ttw:cursor-default"),
-						"aria-disabled": !e.onOpen,
-						tabIndex: e.onOpen ? 0 : -1,
-						onClick: e.onOpen,
-						children: [
-							/* @__PURE__ */ u("span", {
-								className: "ttw:flex ttw:min-w-0 ttw:flex-col ttw:items-start ttw:gap-1 ttw:px-3 ttw:py-2",
-								children: [/* @__PURE__ */ l("span", {
-									className: i("ttw:min-w-0 ttw:font-medium", e.roleTone && p[e.roleTone]),
-									children: e.roleLabel
-								}), e.badges?.length ? /* @__PURE__ */ l("span", {
-									className: "ttw:flex ttw:flex-wrap ttw:gap-1",
-									children: e.badges.map((e) => /* @__PURE__ */ l(n, {
-										variant: "secondary",
-										children: e
-									}, e))
-								}) : null]
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "ttw:px-3 ttw:py-2",
-								children: e.invoiceNumberLabel
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "ttw:px-3 ttw:py-2 ttw:text-right",
-								children: e.amountLabel
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "ttw:px-3 ttw:py-2",
-								children: e.addedOnLabel
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "ttw:px-3 ttw:py-2",
-								children: e.dueDateLabel
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "ttw:px-3 ttw:py-2",
-								children: e.status ? /* @__PURE__ */ l(a, {
-									status: e.status,
-									tone: e.statusTone ?? "neutral"
-								}) : null
-							})
-						]
-					}), /* @__PURE__ */ l("div", {
-						className: "ttw:flex ttw:justify-end ttw:px-1 ttw:py-2",
-						children: e.menu ? /* @__PURE__ */ l(o, {
-							actions: e.menu.items.map((e) => ({
-								...e,
-								variant: "ghost"
-							})),
-							triggerLabel: e.menu.triggerLabel
-						}) : null
-					})]
-				}, e.id)),
-				k && !D ? /* @__PURE__ */ l("button", {
-					type: "button",
-					className: "ttw:w-full ttw:px-3 ttw:py-2 ttw:text-center ttw:text-sm ttw:font-medium ttw:text-amber-800 ttw:hover:bg-amber-100 ttw:focus-visible:bg-amber-100",
-					onClick: () => O(!0),
-					children: S
-				}) : null
-			]
-		})]
-	}) : /* @__PURE__ */ u(e, {
-		className: "ttw:[&>svg]:size-6 ttw:flex ttw:items-center ttw:bg-amber-50 ttw:text-amber-700 ttw:border-amber-300",
-		"data-testid": C,
-		children: [
-			/* @__PURE__ */ l(d, {}),
-			/* @__PURE__ */ l(t, {
-				className: "ttw:flex-1",
-				children: T.message
-			}),
-			g ? /* @__PURE__ */ l(r, {
-				type: "button",
-				variant: "outline",
-				className: "ttw:text-foreground",
-				disabled: y,
-				onClick: g,
-				children: T.notADuplicateButton
-			}) : null,
-			_ ? /* @__PURE__ */ l(r, {
-				type: "button",
-				variant: "destructive",
-				disabled: y,
-				onClick: _,
-				children: T.removeBillButton
-			}) : null,
-			v ? /* @__PURE__ */ l(r, {
-				type: "button",
-				variant: "ghost",
-				size: "icon",
-				className: "ttw:text-foreground",
-				"aria-label": T.openFullScreenButton,
-				onClick: v,
-				children: /* @__PURE__ */ l(f, {
-					className: "ttw:size-4",
-					"aria-hidden": !0
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { g as BillDuplicateNotice, g as default };
+import "./index72.js";
+import "./index73.js";

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

@@ -1,2 +1,39 @@
-import "./index73.js";
-import "./index74.js";
+import { AMOUNT_FILTER_LABELS_EN as e, DATE_RANGE_PICKER_LABELS_EN as t, FILTER_MENU_BUTTON_LABELS_EN as n, FILTER_TAG_LABELS_EN as r } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index75.js
+var i = {
+	fields: {
+		vendor: "Vendor",
+		issueDate: "Issue date",
+		dueDate: "Due date",
+		status: "Status",
+		totalAmount: "Total amount",
+		addedOn: "Added on",
+		attachment: "Attachment"
+	},
+	fieldMenuLabel: "Filter bills by",
+	amountMin: "No less than",
+	amountMax: "No more than",
+	vendorSearchPlaceholder: "Search vendors",
+	vendorSearchLabel: "Search vendors",
+	vendorEmpty: "No vendors match",
+	vendorLoading: "Loading vendors",
+	vendorError: "Couldn't load vendors",
+	attachmentAny: "Any",
+	attachmentHas: "Has attachment",
+	attachmentNone: "No attachment",
+	attachmentLabel: "Filter by attachment",
+	clearAll: "Clear all",
+	filterMenuButton: n,
+	filterTag: r,
+	amountFilter: {
+		modeAny: e.modeAny,
+		modeExact: e.modeExact,
+		modeRange: e.modeRange,
+		flowAny: e.flowAny,
+		flowIn: e.flowIn,
+		flowOut: e.flowOut
+	},
+	dateRangePicker: { presetPlaceholder: t.presetPlaceholder }
+};
+//#endregion
+export { i as BILLS_FILTER_BAR_LABELS_EN };

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

@@ -1,4 +1,12 @@
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index76.js
-var e = { title: "Bill rejected and returned to you for rework." };
+var e = {
+	Vendor: "vendor",
+	IssueDate: "issueDate",
+	DueDate: "dueDate",
+	Status: "status",
+	TotalAmount: "totalAmount",
+	AddedOn: "addedOn",
+	Attachment: "attachment"
+};
 //#endregion
-export { e as BILL_REJECTED_BANNER_LABELS_EN };
+export { e as BillsFilterField };

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

@@ -1,36 +1,201 @@
-import { BILL_REJECTED_BANNER_LABELS_EN as e } from "./index76.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { AlertTriangleIcon as r } from "lucide-react";
+import { AmountFilter as e, DateRangePicker as t, FilterBar as n, FilterMenuButton as r, FilterTag as ee, Input as te, MultiSelectFilter as i, Popover as a, PopoverContent as o, PopoverTrigger as s, RadioGroup as c, RadioGroupItem as l, useFilterPanel as u } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { BILLS_FILTER_BAR_LABELS_EN as d } from "./index75.js";
+import { BillsFilterField as f } from "./index76.js";
+import { useMemo as ne } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { ListFilterIcon as h } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index77.js
-function i({ actorLabel: i, message: a, labels: o }) {
-	let s = {
-		...e,
-		...o
+var g = {
+	date: "ttw:w-auto",
+	status: "ttw:w-56",
+	amount: "ttw:w-64",
+	vendor: "ttw:w-64",
+	attachment: "ttw:w-56"
+}, _ = {
+	[f.Vendor]: "vendor",
+	[f.IssueDate]: "date",
+	[f.DueDate]: "date",
+	[f.Status]: "status",
+	[f.TotalAmount]: "amount",
+	[f.AddedOn]: "date",
+	[f.Attachment]: "attachment"
+}, v = [
+	f.IssueDate,
+	f.DueDate,
+	f.AddedOn
+];
+function y({ fields: f, activeFilterCount: y, chips: b, onRemoveChip: x, onClearAll: S, dateField: C, onDateFieldChange: w, datePresets: T, selectedDatePreset: E, dateFrom: D, dateTo: O, onDateRangeChange: k, onDatePresetChange: A, statusOptions: j, selectedStatuses: M, onStatusChange: N, amountMode: P, onAmountModeChange: F, amountMin: I, amountMax: L, onAmountMinChange: re, onAmountMaxChange: R, vendorOptions: z, selectedVendors: B, onVendorChange: V, vendorSearchValue: H, onVendorSearchChange: U, isVendorLoading: W, isVendorError: G, hasAttachment: K, onHasAttachmentChange: q, searchSlot: J, testIds: Y, labels: X, className: ie }) {
+	let Z = ne(() => ({
+		...d,
+		...X,
+		fields: {
+			...d.fields,
+			...X?.fields
+		},
+		filterMenuButton: {
+			...d.filterMenuButton,
+			...X?.filterMenuButton
+		},
+		filterTag: {
+			...d.filterTag,
+			...X?.filterTag
+		},
+		amountFilter: {
+			...d.amountFilter,
+			...X?.amountFilter
+		},
+		dateRangePicker: {
+			...d.dateRangePicker,
+			...X?.dateRangePicker
+		}
+	}), [X]), Q = u(), $ = Q.activePanelId, ae = Q.isMenuOpen || !!$, oe = ($ && g[$]) ?? "ttw:w-52", se = (e) => {
+		$ && e.preventDefault(), Q.toggleMenu();
+	}, ce = (e) => {
+		e || (Q.closeMenu(), Q.closePanel());
+	}, le = (e) => {
+		v.includes(e) && w(e), Q.openPanel(_[e]);
+	}, ue = K === void 0 ? "any" : K ? "has" : "none", de = (e) => {
+		q(e === "any" ? void 0 : e === "has");
 	};
-	return /* @__PURE__ */ n("div", {
-		role: "alert",
-		className: "ttw:flex ttw:gap-2 ttw:rounded-md ttw:border ttw:border-destructive/20 ttw:bg-destructive/5 ttw:p-3",
-		children: [/* @__PURE__ */ t(r, {
-			"aria-hidden": !0,
-			className: "ttw:mt-0.5 ttw:size-4 ttw:shrink-0 ttw:text-destructive"
-		}), /* @__PURE__ */ n("div", {
-			className: "ttw:flex ttw:flex-col ttw:gap-1",
-			children: [
-				/* @__PURE__ */ t("p", {
-					className: "ttw:text-sm ttw:font-medium ttw:text-destructive",
-					children: s.title
-				}),
-				a ? /* @__PURE__ */ t("p", {
-					className: "ttw:text-sm ttw:text-foreground",
-					children: a
-				}) : null,
-				/* @__PURE__ */ t("p", {
-					className: "ttw:text-sm ttw:text-muted-foreground",
-					children: i
+	return /* @__PURE__ */ p(n, {
+		className: ie,
+		searchSlot: J,
+		menuSlot: /* @__PURE__ */ m(a, {
+			open: ae,
+			onOpenChange: ce,
+			children: [/* @__PURE__ */ p(s, {
+				asChild: !0,
+				children: /* @__PURE__ */ p(r, {
+					size: "md",
+					activeCount: y,
+					onClick: se,
+					labels: Z.filterMenuButton,
+					"data-testid": Y?.menuButton
 				})
-			]
-		})]
+			}), /* @__PURE__ */ m(o, {
+				align: "start",
+				className: `ttw:p-0 ${oe}`,
+				children: [
+					Q.isMenuOpen ? /* @__PURE__ */ p("div", {
+						className: "ttw:p-1",
+						role: "menu",
+						"aria-label": Z.fieldMenuLabel,
+						children: f.map((e) => /* @__PURE__ */ m("button", {
+							type: "button",
+							role: "menuitem",
+							className: "ttw:flex ttw:w-full ttw:cursor-pointer ttw:items-center ttw:gap-2 ttw:rounded-md ttw:px-2 ttw:py-1.5 ttw:text-xs ttw:font-medium ttw:transition-colors ttw:hover:bg-accent",
+							onClick: () => le(e),
+							children: [/* @__PURE__ */ p(h, {
+								className: "ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground",
+								"aria-hidden": !0
+							}), Z.fields[e]]
+						}, e))
+					}) : null,
+					$ === "date" ? /* @__PURE__ */ p(t, {
+						from: D,
+						to: O,
+						onRangeChange: k,
+						selectedPreset: E,
+						onPresetChange: A,
+						presets: [...T],
+						labels: {
+							...Z.dateRangePicker,
+							fieldLabel: Z.fields[C]
+						}
+					}) : null,
+					$ === "status" ? /* @__PURE__ */ p(i, {
+						options: [...j],
+						selectedValues: [...M],
+						onSelectionChange: N
+					}) : null,
+					$ === "amount" ? /* @__PURE__ */ p(e, {
+						mode: P,
+						onModeChange: F,
+						min: I,
+						max: L,
+						onMinChange: re,
+						onMaxChange: R,
+						showFlowDirection: !1,
+						labels: {
+							...Z.amountFilter,
+							min: Z.amountMin,
+							max: Z.amountMax
+						}
+					}) : null,
+					$ === "vendor" ? /* @__PURE__ */ m("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-3",
+						children: [/* @__PURE__ */ p(te, {
+							type: "search",
+							className: "ttw:h-8 ttw:text-xs",
+							"aria-label": Z.vendorSearchLabel,
+							placeholder: Z.vendorSearchPlaceholder,
+							value: H,
+							onChange: (e) => U(e.target.value)
+						}), W ? /* @__PURE__ */ p("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: Z.vendorLoading
+						}) : G ? /* @__PURE__ */ p("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-destructive",
+							children: Z.vendorError
+						}) : z.length === 0 ? /* @__PURE__ */ p("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: Z.vendorEmpty
+						}) : /* @__PURE__ */ p(i, {
+							options: [...z],
+							selectedValues: [...B],
+							onSelectionChange: V
+						})]
+					}) : null,
+					$ === "attachment" ? /* @__PURE__ */ p("div", {
+						className: "ttw:p-3",
+						children: /* @__PURE__ */ p(c, {
+							value: ue,
+							onValueChange: de,
+							"aria-label": Z.attachmentLabel,
+							className: "ttw:flex ttw:flex-col ttw:gap-1",
+							children: [
+								{
+									value: "any",
+									label: Z.attachmentAny
+								},
+								{
+									value: "has",
+									label: Z.attachmentHas
+								},
+								{
+									value: "none",
+									label: Z.attachmentNone
+								}
+							].map(({ value: e, label: t }) => /* @__PURE__ */ m("label", {
+								className: "ttw:flex ttw:cursor-pointer ttw:items-center ttw:gap-2",
+								children: [/* @__PURE__ */ p(l, { value: e }), /* @__PURE__ */ p("span", {
+									className: "ttw:text-xs ttw:font-medium",
+									children: t
+								})]
+							}, e))
+						})
+					}) : null
+				]
+			})]
+		}),
+		activeChipsSlot: /* @__PURE__ */ m("span", {
+			className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-2",
+			"data-testid": Y?.chips,
+			children: [b.map((e) => /* @__PURE__ */ p(ee, {
+				label: e.label,
+				labels: Z.filterTag,
+				onDismiss: () => x(e.key)
+			}, e.key)), b.length > 0 ? /* @__PURE__ */ p("button", {
+				type: "button",
+				className: "ttw:cursor-pointer ttw:whitespace-nowrap ttw:text-xs ttw:text-muted-foreground ttw:transition-colors ttw:hover:text-foreground",
+				onClick: S,
+				children: Z.clearAll
+			}) : null]
+		})
 	});
 }
+function b(e) {
+	return /* @__PURE__ */ p(y, { ...e }, e.fields.join("|"));
+}
 //#endregion
-export { i as BillRejectedBanner, i as default };
+export { b as BillsFilterBar, b as default };

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

@@ -1,2 +1,3 @@
+import "./index75.js";
 import "./index76.js";
 import "./index77.js";

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

@@ -1,39 +1,4 @@
-import { AMOUNT_FILTER_LABELS_EN as e, DATE_RANGE_PICKER_LABELS_EN as t, FILTER_MENU_BUTTON_LABELS_EN as n, FILTER_TAG_LABELS_EN as r } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index79.js
-var i = {
-	fields: {
-		vendor: "Vendor",
-		issueDate: "Issue date",
-		dueDate: "Due date",
-		status: "Status",
-		totalAmount: "Total amount",
-		addedOn: "Added on",
-		attachment: "Attachment"
-	},
-	fieldMenuLabel: "Filter bills by",
-	amountMin: "No less than",
-	amountMax: "No more than",
-	vendorSearchPlaceholder: "Search vendors",
-	vendorSearchLabel: "Search vendors",
-	vendorEmpty: "No vendors match",
-	vendorLoading: "Loading vendors",
-	vendorError: "Couldn't load vendors",
-	attachmentAny: "Any",
-	attachmentHas: "Has attachment",
-	attachmentNone: "No attachment",
-	attachmentLabel: "Filter by attachment",
-	clearAll: "Clear all",
-	filterMenuButton: n,
-	filterTag: r,
-	amountFilter: {
-		modeAny: e.modeAny,
-		modeExact: e.modeExact,
-		modeRange: e.modeRange,
-		flowAny: e.flowAny,
-		flowIn: e.flowIn,
-		flowOut: e.flowOut
-	},
-	dateRangePicker: { presetPlaceholder: t.presetPlaceholder }
-};
+var e = { missing: "Missing" };
 //#endregion
-export { i as BILLS_FILTER_BAR_LABELS_EN };
+export { e as MISSING_VALUE_LABELS_EN };

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

@@ -1,12 +1,16 @@
+import { cn as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { MISSING_VALUE_LABELS_EN as t } from "./index79.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index80.js
-var e = {
-	Vendor: "vendor",
-	IssueDate: "issueDate",
-	DueDate: "dueDate",
-	Status: "status",
-	TotalAmount: "totalAmount",
-	AddedOn: "addedOn",
-	Attachment: "attachment"
-};
+function r({ labels: r, className: i }) {
+	let a = {
+		...t,
+		...r
+	};
+	return /* @__PURE__ */ n("span", {
+		className: e("ttw:text-amber-700", i),
+		children: a.missing
+	});
+}
 //#endregion
-export { e as BillsFilterField };
+export { r as MissingValue, r as default };