@tesouro/embedded-components-react 0.5.193 → 0.5.195

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/ProductSelector.js

@@ -7,20 +7,16 @@ import "../../../ui/dist/index.js";
 import { useProductSelector as t } from "./useProductSelector.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/ProductSelector.js
-function r({ value: r, onValueChange: i, limit: a, debounceMs: o, type: s, disabled: c, onCreateClick: l, labels: u, typeLabels: d }) {
-	let f = t({
-		value: r,
-		onValueChange: i,
-		limit: a,
-		debounceMs: o,
-		type: s,
-		typeLabels: d
-	});
+function r({ disabled: r, invalid: i, inputId: a, focusOnMount: o, maxLength: s, labels: c, ...l }) {
+	let u = t(l);
 	return /* @__PURE__ */ n(e, {
-		...f,
-		disabled: c,
-		onCreateClick: l,
-		labels: u
+		...u,
+		disabled: r,
+		invalid: i,
+		inputId: a,
+		focusOnMount: o,
+		maxLength: s,
+		labels: c
 	});
 }
 //#endregion

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useMeasureUnits.js

@@ -3,7 +3,7 @@
 "use client";
 "use client";
 import { buildUnitNamesById as e, buildUnitOptions as t } from "./helpers.js";
-import { useMeasureUnitsQuery as n } from "../../../data-access/dist/index8.js";
+import { useMeasureUnitsQuery as n } from "../../../data-access/dist/index9.js";
 import "../../../data-access/dist/index.js";
 import { useMemo as r } from "react";
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useMeasureUnits.js

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useProductForm.js

@@ -4,8 +4,8 @@
 "use client";
 import { extractApiErrorMessage as e } from "../../../../util/dist/lib/apiErrors.js";
 import { EMPTY_PRODUCT_FORM_VALUES as t, getCurrencyOptions as n, hasProductFormErrors as r, productFormValuesToRequest as i, productFormValuesToUpdateRequest as a, productToFormValues as o, validateProductForm as s } from "./helpers.js";
-import { useCreateProductMutation as c } from "../../../data-access/dist/index5.js";
-import { useUpdateProductMutation as l } from "../../../data-access/dist/index6.js";
+import { useCreateProductMutation as c } from "../../../data-access/dist/index6.js";
+import { useUpdateProductMutation as l } from "../../../data-access/dist/index7.js";
 import "../../../data-access/dist/index.js";
 import { useCallback as u, useMemo as d, useState as f } from "react";
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useProductForm.js

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useProductSelector.js

@@ -3,54 +3,41 @@
 "use client";
 "use client";
 import { formatPrice as e } from "./helpers.js";
-import { PRODUCT_TYPE_BADGE_LABELS_EN as t } from "../../../ui/dist/index2.js";
-import "../../../ui/dist/index.js";
-import { useProductsQuery as n } from "../../../data-access/dist/index2.js";
+import { useAllProductsQuery as t } from "../../../data-access/dist/index3.js";
 import "../../../data-access/dist/index.js";
-import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import { useMeasureUnits as n } from "./useMeasureUnits.js";
+import { useCallback as r, useMemo as i } from "react";
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/feature/dist/lib/useProductSelector.js
-var s = 25, c = 300;
-function l(n, r) {
-	let i = {
-		...t,
-		...r
-	};
-	return (n ?? []).map((t) => ({
+function a(t, n = {}) {
+	return (t ?? []).map((t) => ({
 		value: t.id,
 		label: t.name,
-		description: t.type === "service" ? i.service : i.product,
-		meta: e(t.price)
+		meta: [e(t.price), t.measure_unit_id ? n[t.measure_unit_id] : ""].filter(Boolean).join(" ")
 	}));
 }
-function u({ value: e, onValueChange: t, limit: u = s, debounceMs: d = c, type: f, typeLabels: p } = {}) {
-	let [m, h] = o(e ?? ""), [g, _] = o(""), [v, y] = o("");
-	i(() => {
-		h(e ?? "");
-	}, [e]), i(() => {
-		let e = setTimeout(() => {
-			y(g.trim());
-		}, d);
-		return () => clearTimeout(e);
-	}, [d, g]);
-	let b = n({
-		limit: u,
-		name__icontains: v || void 0,
-		type: f
-	}), x = a(() => l(b.data?.data, p), [b.data, p]), S = r((e) => {
-		h(e), t?.(e);
-	}, [t]), C = r(() => {
-		b.refetch();
-	}, [b]);
+function o({ inputValue: e, onInputValueChange: o, onProductSelect: s, selectedProductId: c, currency: l }) {
+	let u = t({
+		currency: l || void 0,
+		enabled: !!l
+	}), { unitNamesById: d } = n(), f = i(() => [...u.data?.data ?? []].sort((e, t) => (e.name ?? "").localeCompare(t.name ?? "")), [u.data]), p = c ? f.find((e) => e.id === c) : void 0, m = i(() => {
+		let t = e.toLowerCase().trim();
+		return !t || p && p.name.toLowerCase() === t ? f : f.filter((e) => e.name.toLowerCase().includes(t));
+	}, [
+		e,
+		f,
+		p
+	]), h = i(() => a(m, d), [m, d]), g = r((e) => {
+		let t = f.find((t) => t.id === e);
+		t && s(t);
+	}, [s, f]);
 	return {
-		value: m,
-		options: x,
-		searchValue: g,
-		isLoading: b.isLoading,
-		isError: b.isError,
-		onSearchChange: _,
-		onValueChange: S,
-		onRetry: C
+		inputValue: e,
+		onInputValueChange: o,
+		options: h,
+		value: p?.id,
+		onOptionSelect: g,
+		isLoading: u.isLoading
 	};
 }
 //#endregion
-export { l as buildProductSelectorOptions, u as useProductSelector };
+export { a as buildProductSelectorOptions, o as useProductSelector };

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/ui/dist/index.js

@@ -1,6 +1,6 @@
-import { PRODUCT_TYPE_BADGE_LABELS_EN as e } from "./index2.js";
-import { ProductFormSheet as t } from "./index3.js";
-import { MeasureUnitsManager as n } from "./index4.js";
-import { MeasureUnitDeleteDialog as r } from "./index5.js";
-import { ProductSelector as i } from "./index6.js";
-export { r as MeasureUnitDeleteDialog, n as MeasureUnitsManager, e as PRODUCT_TYPE_BADGE_LABELS_EN, t as ProductFormSheet, i as ProductSelector };
+import "./index2.js";
+import { ProductFormSheet as e } from "./index3.js";
+import { MeasureUnitsManager as t } from "./index4.js";
+import { MeasureUnitDeleteDialog as n } from "./index5.js";
+import { ProductSelector as r } from "./index6.js";
+export { n as MeasureUnitDeleteDialog, t as MeasureUnitsManager, e as ProductFormSheet, r as ProductSelector };

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/ui/dist/index2.js

@@ -1,8 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/ui/dist/index2.js
 var e = {
-	product: "Product",
-	service: "Service"
-}, t = {
 	createTitle: "Add a product or service",
 	headerDescription: "Save the products and services you sell so you can quickly add them as line items on invoices.",
 	editTitle: "Edit {type}",
@@ -28,7 +25,7 @@ var e = {
 	cancelButton: "Cancel",
 	createButton: "Save {type}",
 	saveButton: "Save"
-}, n = {
+}, t = {
 	title: "Manage measure units",
 	hiddenDescription: "Create, edit, and delete measure units",
 	searchPlaceholder: "Search",
@@ -43,7 +40,7 @@ var e = {
 	saveAction: "Save unit",
 	cancelAction: "Cancel edit",
 	emptyText: "No measure units yet."
-}, r = {
+}, n = {
 	titleNoItems: "Delete “{name}” unit?",
 	titleWithItems: "Delete “{name}” unit and associated items?",
 	messageNoItems: "There are no items created with this measure unit.",
@@ -52,15 +49,10 @@ var e = {
 	messageWithItemsHint: "Please, check the list of products and services that will get deleted:",
 	confirmButton: "Delete",
 	cancelButton: "Cancel"
-}, i = {
-	fieldLabel: "Product or service",
-	searchPlaceholder: "Search products and services",
-	selectPlaceholder: "Select a product or service",
-	loadingText: "Loading products...",
-	emptyText: "No products found.",
-	errorText: "Could not load products.",
-	retryButton: "Retry",
-	createButton: "Create product"
+}, r = {
+	fieldLabel: "Item name",
+	placeholder: "e.g., Office supplies",
+	emptyText: "No saved items found - type to add an item"
 };
 //#endregion
-export { n as MEASURE_UNITS_MANAGER_LABELS_EN, r as MEASURE_UNIT_DELETE_DIALOG_LABELS_EN, t as PRODUCT_FORM_SHEET_LABELS_EN, i as PRODUCT_SELECTOR_LABELS_EN, e as PRODUCT_TYPE_BADGE_LABELS_EN };
+export { t as MEASURE_UNITS_MANAGER_LABELS_EN, n as MEASURE_UNIT_DELETE_DIALOG_LABELS_EN, e as PRODUCT_FORM_SHEET_LABELS_EN, r as PRODUCT_SELECTOR_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/shared/product-catalog/ui/dist/index6.js

@@ -1,76 +1,107 @@
-import { Button as e, Input as t, Label as n, Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { PRODUCT_SELECTOR_LABELS_EN as c } from "./index2.js";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { PlusIcon as d, RotateCwIcon as f, SearchIcon as p } from "lucide-react";
+import { Input as e, cn as t } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { PRODUCT_SELECTOR_LABELS_EN as n } from "./index2.js";
+import { useCallback as r, useId as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { CheckIcon as c, Loader2Icon as l } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/shared/product-catalog/ui/dist/index6.js
-function m({ value: m, options: h, searchValue: g, isLoading: _, isError: v, disabled: y, onSearchChange: b, onValueChange: x, onRetry: S, onCreateClick: C, labels: w }) {
-	let T = {
-		...c,
-		...w
-	}, E = h.length > 0;
-	return /* @__PURE__ */ u("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-2",
+function u({ inputValue: u, onInputValueChange: d, options: f, value: p, onOptionSelect: m, isLoading: h, disabled: g, invalid: _, inputId: v, focusOnMount: y, maxLength: b, labels: x }) {
+	let S = {
+		...n,
+		...x
+	}, C = i(), [w, T] = a(!1), [E, D] = a(), O = f.findIndex((e) => e.value === E), k = () => {
+		T(!1), D(void 0);
+	}, A = (e) => {
+		m(e), k();
+	}, j = (e) => `${C}-option-${e}`, M = (e) => {
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			if (e.preventDefault(), T(!0), !f.length) return;
+			let t = e.key === "ArrowDown" ? Math.min(O + 1, f.length - 1) : Math.max(O - 1, 0);
+			D(f[t].value), document.getElementById(j(t))?.scrollIntoView?.({ block: "nearest" });
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			let t = f[O];
+			w && t ? A(t.value) : k();
+			return;
+		}
+		if (e.key === "Tab" && w) {
+			let e = u.trim().toLowerCase();
+			if (!e) return;
+			let t = f.find((t) => t.label.toLowerCase() === e) ?? (f.length === 1 ? f[0] : void 0);
+			t ? A(t.value) : k();
+			return;
+		}
+		e.key === "Escape" && w && (e.stopPropagation(), k());
+	}, N = r((e) => {
+		e && y && e.focus();
+	}, [y]), P = w && O >= 0 ? j(O) : void 0;
+	return /* @__PURE__ */ s("div", {
+		className: "ttw:relative ttw:w-full",
 		children: [
-			/* @__PURE__ */ u("div", {
-				className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2",
-				children: [/* @__PURE__ */ l(n, { children: T.fieldLabel }), C ? /* @__PURE__ */ u(e, {
-					type: "button",
-					variant: "ghost",
-					size: "sm",
-					onClick: C,
-					disabled: y,
-					children: [/* @__PURE__ */ l(d, { className: "ttw:size-4" }), T.createButton]
-				}) : null]
+			h ? /* @__PURE__ */ o(l, { className: "ttw:pointer-events-none ttw:absolute ttw:left-3 ttw:top-1/2 ttw:size-4 ttw:-translate-y-1/2 ttw:animate-spin ttw:text-muted-foreground" }) : null,
+			/* @__PURE__ */ o(e, {
+				id: v,
+				role: "combobox",
+				"aria-label": S.fieldLabel,
+				"aria-autocomplete": "list",
+				"aria-expanded": w,
+				"aria-controls": C,
+				"aria-activedescendant": P,
+				"aria-invalid": _ || void 0,
+				autoComplete: "off",
+				ref: N,
+				maxLength: b,
+				disabled: g,
+				placeholder: S.placeholder,
+				className: t(h && "ttw:pl-9"),
+				value: u,
+				onFocus: () => T(!0),
+				onClick: () => T(!0),
+				onBlur: k,
+				onChange: (e) => {
+					d(e.target.value), T(!0), D(void 0);
+				},
+				onKeyDown: M
 			}),
-			/* @__PURE__ */ u("div", {
-				className: "ttw:relative",
-				children: [/* @__PURE__ */ l(p, { className: "ttw:pointer-events-none ttw:absolute ttw:left-3 ttw:top-1/2 ttw:size-4 ttw:-translate-y-1/2 ttw:text-muted-foreground" }), /* @__PURE__ */ l(t, {
-					className: "ttw:pl-9",
-					value: g,
-					placeholder: T.searchPlaceholder,
-					disabled: y,
-					onChange: (e) => b(e.target.value)
-				})]
-			}),
-			/* @__PURE__ */ u(r, {
-				value: m || void 0,
-				onValueChange: x,
-				disabled: y || _ || v || !E,
-				children: [/* @__PURE__ */ l(o, {
-					className: "ttw:w-full",
-					children: /* @__PURE__ */ l(s, { placeholder: T.selectPlaceholder })
-				}), /* @__PURE__ */ l(i, { children: h.map((e) => /* @__PURE__ */ l(a, {
-					value: e.value,
-					children: /* @__PURE__ */ u("span", {
-						className: "ttw:flex ttw:flex-col ttw:gap-0.5",
-						children: [/* @__PURE__ */ l("span", { children: e.label }), e.description || e.meta ? /* @__PURE__ */ l("span", {
-							className: "ttw:text-xs ttw:text-muted-foreground",
-							children: [e.description, e.meta].filter(Boolean).join(" · ")
-						}) : null]
-					})
-				}, e.value)) })]
-			}),
-			_ ? /* @__PURE__ */ l("p", {
-				className: "ttw:text-sm ttw:text-muted-foreground",
-				children: T.loadingText
-			}) : v ? /* @__PURE__ */ u("div", {
-				className: "ttw:flex ttw:items-center ttw:gap-2",
-				children: [/* @__PURE__ */ l("p", {
-					className: "ttw:text-sm ttw:text-destructive",
-					children: T.errorText
-				}), S ? /* @__PURE__ */ u(e, {
-					type: "button",
-					variant: "outline",
-					size: "sm",
-					onClick: S,
-					children: [/* @__PURE__ */ l(f, { className: "ttw:size-4" }), T.retryButton]
-				}) : null]
-			}) : E ? null : /* @__PURE__ */ l("p", {
-				className: "ttw:text-sm ttw:text-muted-foreground",
-				children: T.emptyText
-			})
+			w && !g ? /* @__PURE__ */ o("div", {
+				role: "presentation",
+				className: "ttw:absolute ttw:left-0 ttw:top-full ttw:z-50 ttw:mt-1 ttw:w-full ttw:min-w-138 ttw:overflow-hidden ttw:rounded-md ttw:border ttw:border-border ttw:bg-popover ttw:text-popover-foreground ttw:shadow-md",
+				onMouseDown: (e) => e.preventDefault(),
+				children: /* @__PURE__ */ s("ul", {
+					id: C,
+					role: "listbox",
+					"aria-label": S.fieldLabel,
+					className: "ttw:max-h-87 ttw:scroll-py-1 ttw:overflow-y-auto ttw:p-1",
+					children: [f.map((e, n) => /* @__PURE__ */ s("li", {
+						id: j(n),
+						role: "option",
+						"aria-selected": e.value === p,
+						className: t("ttw:relative ttw:flex ttw:w-full ttw:cursor-default ttw:items-center ttw:gap-2 ttw:rounded-sm ttw:py-1.5 ttw:pr-8 ttw:pl-2 ttw:text-sm ttw:select-none", n === O && "ttw:bg-accent ttw:text-accent-foreground"),
+						onMouseEnter: () => D(e.value),
+						onMouseDown: () => A(e.value),
+						children: [
+							/* @__PURE__ */ o("span", {
+								className: "ttw:min-w-0 ttw:flex-1 ttw:truncate",
+								children: e.label
+							}),
+							e.meta ? /* @__PURE__ */ o("span", {
+								className: "ttw:shrink-0 ttw:text-right ttw:text-xs ttw:text-muted-foreground",
+								children: e.meta
+							}) : null,
+							e.value === p ? /* @__PURE__ */ o("span", {
+								className: "ttw:pointer-events-none ttw:absolute ttw:right-2 ttw:flex ttw:size-4 ttw:items-center ttw:justify-center",
+								children: /* @__PURE__ */ o(c, { className: "ttw:size-4" })
+							}) : null
+						]
+					}, e.value)), f.length ? null : /* @__PURE__ */ o("li", {
+						className: "ttw:py-2 ttw:text-center ttw:text-sm ttw:text-muted-foreground",
+						children: S.emptyText
+					})]
+				})
+			}) : null
 		]
 	});
 }
 //#endregion
-export { m as ProductSelector, m as default };
+export { u as ProductSelector, u as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.5.193",
+  "version": "0.5.195",
   "license": "Apache-2.0",
   "type": "module",
   "packageDepSync": {