@tesouro/embedded-components-react 0.9.39 → 0.9.41

package/dist/experimental/ApprovalRequests.d.ts

@@ -333,6 +333,21 @@ type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
 type BaseUrl = ExtractLiterals<ClientOptions['baseUrl']>;
 
+interface FilterMenuButtonLabels {
+    /** Button text, followed by "(N)" when `activeCount` is set. */
+    filters: string;
+}
+
+interface FilterTagLabels {
+    /**
+     * Accessible name for the editable tag body. `{label}` is substituted with
+     * the tag's own text; keep the placeholder when overriding.
+     */
+    edit: string;
+    /** Accessible name for the × dismiss button. `{label}` is substituted. */
+    remove: string;
+}
+
 type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: ReactNode;
 };
@@ -598,6 +613,23 @@ interface WidgetProviderProps extends WidgetProviderBaseProps {
     providerLabels?: Partial<WidgetProviderLabels>;
 }
 
+interface ApprovalRequestsFilterBarLabels {
+    fields: {
+        status: string;
+        addedBy: string;
+        requestedOn: string;
+    };
+    fieldMenuLabel: string;
+    onlyMine: string;
+    userSearchLabel: string;
+    userSearchPlaceholder: string;
+    userEmpty: string;
+    userLoading: string;
+    userError: string;
+    clearAll: string;
+    filterMenuButton: FilterMenuButtonLabels;
+    filterTag: FilterTagLabels;
+}
 interface ApprovalRequestsScreenLabels {
     columnInvoiceNumber: string;
     columnVendor: string;
@@ -611,8 +643,18 @@ interface ApprovalRequestsScreenLabels {
     errorTitle: string;
     errorDescription: string;
     errorRetry: string;
+    filterBar: ApprovalRequestsFilterBarLabels;
+    accessRestrictedTitle: string;
+    accessRestrictedDescription: string;
 }
 
+interface ApprovalRequestsFilterLabels {
+    statusChip: (value: string) => string;
+    addedByChip: (name: string) => string;
+    requestedOnChip: (range: string) => string;
+    moreSelected: (first: string, count: number) => string;
+    dateRange: (from: string, to: string) => string;
+}
 interface ApprovalRequestsListLabels {
     emptyTitle: string;
     emptyDescription: string;
@@ -623,10 +665,11 @@ interface ApprovalRequestsListLabels {
     /** Shown for a vendor or creator this session may not read, or whose lookup failed. */
     unavailableValue: string;
     status: Record<ApprovalRequestStatus, string>;
+    filters: ApprovalRequestsFilterLabels;
 }
 
 interface ApprovalRequestsWidgetOwnProps {
-    screenLabels?: Partial<ApprovalRequestsScreenLabels>;
+    screenLabels?: PartialDeep<ApprovalRequestsScreenLabels>;
     listLabels?: PartialDeep<ApprovalRequestsListLabels>;
 }
 /** Public props for {@link ApprovalRequestsWidget}. */

package/dist/experimental/index.d.ts

@@ -333,6 +333,21 @@ type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
 type BaseUrl = ExtractLiterals<ClientOptions['baseUrl']>;
 
+interface FilterMenuButtonLabels {
+    /** Button text, followed by "(N)" when `activeCount` is set. */
+    filters: string;
+}
+
+interface FilterTagLabels {
+    /**
+     * Accessible name for the editable tag body. `{label}` is substituted with
+     * the tag's own text; keep the placeholder when overriding.
+     */
+    edit: string;
+    /** Accessible name for the × dismiss button. `{label}` is substituted. */
+    remove: string;
+}
+
 type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: ReactNode;
 };
@@ -598,6 +613,23 @@ interface WidgetProviderProps extends WidgetProviderBaseProps {
     providerLabels?: Partial<WidgetProviderLabels>;
 }
 
+interface ApprovalRequestsFilterBarLabels {
+    fields: {
+        status: string;
+        addedBy: string;
+        requestedOn: string;
+    };
+    fieldMenuLabel: string;
+    onlyMine: string;
+    userSearchLabel: string;
+    userSearchPlaceholder: string;
+    userEmpty: string;
+    userLoading: string;
+    userError: string;
+    clearAll: string;
+    filterMenuButton: FilterMenuButtonLabels;
+    filterTag: FilterTagLabels;
+}
 interface ApprovalRequestsScreenLabels {
     columnInvoiceNumber: string;
     columnVendor: string;
@@ -611,8 +643,18 @@ interface ApprovalRequestsScreenLabels {
     errorTitle: string;
     errorDescription: string;
     errorRetry: string;
+    filterBar: ApprovalRequestsFilterBarLabels;
+    accessRestrictedTitle: string;
+    accessRestrictedDescription: string;
 }
 
+interface ApprovalRequestsFilterLabels {
+    statusChip: (value: string) => string;
+    addedByChip: (name: string) => string;
+    requestedOnChip: (range: string) => string;
+    moreSelected: (first: string, count: number) => string;
+    dateRange: (from: string, to: string) => string;
+}
 interface ApprovalRequestsListLabels {
     emptyTitle: string;
     emptyDescription: string;
@@ -623,10 +665,11 @@ interface ApprovalRequestsListLabels {
     /** Shown for a vendor or creator this session may not read, or whose lookup failed. */
     unavailableValue: string;
     status: Record<ApprovalRequestStatus, string>;
+    filters: ApprovalRequestsFilterLabels;
 }
 
 interface ApprovalRequestsWidgetOwnProps {
-    screenLabels?: Partial<ApprovalRequestsScreenLabels>;
+    screenLabels?: PartialDeep<ApprovalRequestsScreenLabels>;
     listLabels?: PartialDeep<ApprovalRequestsListLabels>;
 }
 /** Public props for {@link ApprovalRequestsWidget}. */

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index.js

@@ -4,6 +4,6 @@ import "./index2.js";
 import { useApprovalRequestsQuery as e } from "./index3.js";
 import "./index4.js";
 import "./index5.js";
-import "./index6.js";
-import { useEntityUsersByIdsQuery as t } from "./index7.js";
-export { e as useApprovalRequestsQuery, t as useEntityUsersByIdsQuery };
+import { useEntityUsersSearchQuery as t } from "./index6.js";
+import { useEntityUsersByIdsQuery as n } from "./index7.js";
+export { e as useApprovalRequestsQuery, n as useEntityUsersByIdsQuery, t as useEntityUsersSearchQuery };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index6.js

@@ -2,5 +2,26 @@
 "use client";
 "use client";
 "use client";
+import { getEntityUsersOptions as e } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as t } from "../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import { useEmbedApi as n } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as r } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
 import "../../../shared/data-access/dist/index.js";
-import "@tanstack/react-query";
+import { useQuery as i } from "@tanstack/react-query";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/data-access/dist/index6.js
+function a({ search: a, enabled: o } = {}) {
+	let { client: s, organizationId: c, widgetToken: l, authEpoch: u, organizationStatus: d } = n(), f = e({
+		client: s,
+		headers: r(c),
+		query: { name__istartswith: a || void 0 }
+	});
+	return i({
+		...t(f, {
+			authEpoch: u,
+			organizationStatus: d
+		}, { carryWithinOrg: !0 }),
+		enabled: !!(c && l) && (o === !0 || o === void 0)
+	});
+}
+//#endregion
+export { a as useEntityUsersSearchQuery };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/ApprovalRequestsWidget.js

@@ -7,54 +7,64 @@ import { useEmbedApi as t } from "../../../../../shared/data-access/dist/lib/Emb
 import "../../../../../shared/data-access/dist/index.js";
 import { useAnalyticsTrack as n } from "../../../../../shared/feature/dist/lib/analytics/hooks.js";
 import { WidgetProvider as r } from "../../../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
-import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o, useWidgetInitStaleForToken as s } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { useRefetchWidget as i, useWidgetConfig as a, useWidgetError as o, useWidgetInitStaleForToken as s, useWidgetLoading as c } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
 import "../../../../../shared/feature/dist/index.js";
-import { ApprovalRequestsWidgetAnalyticsEvent as c, WIDGET_NAME as l } from "../analytics/events.js";
-import { APPROVAL_REQUESTS_LIST_LABELS_EN as u } from "./labels.js";
-import { useApprovalRequestsTable as d } from "./useApprovalRequestsTable.js";
-import { ApprovalRequestsScreen as f } from "../../../../ui/dist/index3.js";
+import { ApprovalRequestsWidgetAnalyticsEvent as l, WIDGET_NAME as u } from "../analytics/events.js";
+import { APPROVAL_REQUESTS_LIST_LABELS_EN as d } from "./labels.js";
+import { getApprovalRequestPermissions as f } from "./permissions.js";
+import { ApprovalRequestsScreen as p } from "../../../../ui/dist/index4.js";
 import "../../../../ui/dist/index.js";
-import { useEffect as p, useMemo as m } from "react";
-import { jsx as h } from "react/jsx-runtime";
+import { useApprovalRequestsTable as m } from "./useApprovalRequestsTable.js";
+import { useEffect as h, useMemo as g } from "react";
+import { jsx as _ } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/ApprovalRequestsWidget.js
-function g({ screenLabels: r, listLabels: l }) {
-	let g = n();
-	p(() => {
-		g(c.Mounted);
-	}, [g]);
-	let _ = m(() => ({
+function v({ screenLabels: r, listLabels: u }) {
+	let v = n();
+	h(() => {
+		v(l.Mounted);
+	}, [v]);
+	let y = g(() => ({
+		...d,
 		...u,
-		...l,
 		status: {
-			...u.status,
-			...l?.status
+			...d.status,
+			...u?.status
+		},
+		filters: {
+			...d.filters,
+			...u?.filters
 		}
-	}), [l]), v = d({ labels: _ }), { initResponse: y } = a(), b = o(), x = s(), S = i(), { organizationStatus: C } = t(), w = !!b && (!y || x);
-	return /* @__PURE__ */ h(f, {
-		rows: v.rows,
-		isLoading: v.isLoading || e(C) && v.rows.length === 0,
-		isError: w || v.isError,
-		pageSize: v.pageSize,
-		onPageSizeChange: v.onPageSizeChange,
-		pageSizeOptions: v.pageSizeOptions,
-		hasNextPage: v.hasNextPage,
-		hasPrevPage: v.hasPrevPage,
-		onNextPage: v.onNextPage,
-		onPrevPage: v.onPrevPage,
-		emptyState: v.emptyState,
-		onRetry: w ? S : v.onRetry,
+	}), [u]), { initResponse: b, widgetToken: x } = a(), S = c(), C = o(), w = s(), T = i(), { organizationStatus: E } = t(), D = g(() => f(w ? void 0 : b?.scopes), [w, b?.scopes]), O = !(!x || b || C) || S && !b || w, k = !!C && (!b || w), A = m({
+		labels: y,
+		enabled: D.canRead
+	});
+	return /* @__PURE__ */ _(p, {
+		rows: A.rows,
+		isLoading: A.isLoading || (O || e(E)) && A.rows.length === 0,
+		isError: k || A.isError,
+		isAccessRestricted: !O && !k && !D.canRead,
+		pageSize: A.pageSize,
+		onPageSizeChange: A.onPageSizeChange,
+		pageSizeOptions: A.pageSizeOptions,
+		hasNextPage: A.hasNextPage,
+		hasPrevPage: A.hasPrevPage,
+		onNextPage: A.onNextPage,
+		onPrevPage: A.onPrevPage,
+		emptyState: A.emptyState,
+		filters: A.filters,
+		onRetry: k ? T : A.onRetry,
 		labels: r
 	});
 }
-function _({ screenLabels: e, listLabels: t, ...n }) {
-	return /* @__PURE__ */ h(r, {
+function y({ screenLabels: e, listLabels: t, ...n }) {
+	return /* @__PURE__ */ _(r, {
 		...n,
-		widgetName: l,
-		children: /* @__PURE__ */ h(g, {
+		widgetName: u,
+		children: /* @__PURE__ */ _(v, {
 			screenLabels: e,
 			listLabels: t
 		})
 	});
 }
 //#endregion
-export { _ as ApprovalRequestsWidget, _ as default };
+export { y as ApprovalRequestsWidget, y as default };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/constants.js

@@ -9,6 +9,11 @@ var e = [
 	approved: "success",
 	rejected: "destructive",
 	canceled: "neutral"
-};
+}, n = [
+	"waiting",
+	"approved",
+	"rejected",
+	"canceled"
+];
 //#endregion
-export { e as PAGE_SIZE_OPTIONS, t as STATUS_TONE };
+export { n as APPROVAL_REQUEST_STATUSES, e as PAGE_SIZE_OPTIONS, t as STATUS_TONE };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/labels.js

@@ -11,6 +11,13 @@ var e = {
 		approved: "Approved",
 		rejected: "Rejected",
 		canceled: "Canceled"
+	},
+	filters: {
+		statusChip: (e) => `Status: ${e}`,
+		addedByChip: (e) => `Added by: ${e}`,
+		requestedOnChip: (e) => `Requested on: ${e}`,
+		moreSelected: (e, t) => `${e} + ${t} more`,
+		dateRange: (e, t) => `${e} - ${t}`
 	}
 };
 //#endregion

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/permissions.js

@@ -0,0 +1,9 @@
+import { Scope as e } from "../../../../../shared/data-access/dist/lib/scopes.js";
+import "../../../../../shared/data-access/dist/index.js";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/permissions.js
+function t(t) {
+	let n = new Set(t ?? []);
+	return { canRead: n.has(e.ApprovalRequestReadOrg) && n.has(e.PayableReadOrg) };
+}
+//#endregion
+export { t as getApprovalRequestPermissions };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsFilters.js

@@ -0,0 +1,149 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { useFilterPanel as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { useEmbedApi as t } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../../../shared/data-access/dist/index.js";
+import { useWidgetConfig as n } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import "../../../../../shared/feature/dist/index.js";
+import { APPROVAL_REQUEST_STATUSES as r } from "./constants.js";
+import { useEntityUsersSearchQuery as i } from "../../../../data-access/dist/index6.js";
+import "../../../../data-access/dist/index.js";
+import { ApprovalRequestsFilterField as a } from "../../../../ui/dist/index3.js";
+import "../../../../ui/dist/index.js";
+import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
+import { addDays as u, format as d, formatISO as f, startOfDay as p } from "date-fns";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsFilters.js
+var m = {
+	Status: "status",
+	AddedBy: "addedBy",
+	RequestedOn: "requestedOn"
+}, h = 300, g = "MMM d, yyyy", _ = {
+	statuses: [],
+	isOnlyMine: !1
+};
+function v(e) {
+	return `${e.first_name ?? ""} ${e.last_name ?? ""}`.trim() || e.login;
+}
+function y({ labels: y, onFiltersChange: b }) {
+	let [x, S] = l(_), [C, w] = l(""), [T, E] = l(""), D = e();
+	s(() => {
+		let e = setTimeout(() => E(C.trim()), h);
+		return () => clearTimeout(e);
+	}, [C]);
+	let O = n().initResponse?.userId ?? void 0, [k, A] = l(O);
+	O && O !== k && A(O);
+	let { organizationId: j } = t(), [M, N] = l(j);
+	j && j !== M && (N(j), M && S((e) => ({
+		...e,
+		addedBy: void 0
+	})));
+	let P = i({
+		search: T,
+		enabled: D.activePanelId === a.AddedBy
+	}), F = o((e) => {
+		S((t) => ({
+			...t,
+			...e
+		})), b();
+	}, [b]), I = c(() => (P.data?.data ?? []).map((e) => ({
+		value: e.id,
+		label: v(e)
+	})), [P.data?.data]), L = c(() => r.map((e) => ({
+		value: e,
+		label: y.status[e]
+	})), [y.status]), R = c(() => {
+		let e = {};
+		x.statuses.length > 0 && (e.status__in = [...x.statuses]);
+		let t = x.isOnlyMine ? k : x.addedBy?.value;
+		if (t && (e.created_by = t), x.requestedFrom) {
+			let t = p(x.requestedFrom), n = p(x.requestedTo ?? x.requestedFrom);
+			e.created_at__gte = f(t), e.created_at__lt = f(u(n, 1));
+		}
+		return e;
+	}, [x, k]), z = c(() => {
+		let e = [], { filters: t } = y;
+		if (x.statuses.length > 0) {
+			let [n, ...r] = x.statuses.map((e) => y.status[e]);
+			e.push({
+				key: m.Status,
+				label: t.statusChip(r.length === 0 ? n : t.moreSelected(n, r.length))
+			});
+		}
+		if (x.addedBy && e.push({
+			key: m.AddedBy,
+			label: t.addedByChip(x.addedBy.label)
+		}), x.requestedFrom) {
+			let n = d(x.requestedFrom, g), r = x.requestedTo ? d(x.requestedTo, g) : n;
+			e.push({
+				key: m.RequestedOn,
+				label: t.requestedOnChip(n === r ? n : t.dateRange(n, r))
+			});
+		}
+		return e;
+	}, [y, x]), B = o((e) => {
+		switch (e) {
+			case m.Status:
+				F({ statuses: [] });
+				break;
+			case m.AddedBy:
+				F({ addedBy: void 0 });
+				break;
+			case m.RequestedOn: F({
+				requestedFrom: void 0,
+				requestedTo: void 0
+			});
+		}
+	}, [F]), V = o(() => {
+		S(_), b();
+	}, [b]), H = o((e) => {
+		let t = I.find((t) => t.value === e);
+		t && F({
+			addedBy: t,
+			isOnlyMine: !1
+		});
+	}, [F, I]), U = o((e) => F(e ? {
+		isOnlyMine: !0,
+		addedBy: void 0
+	} : { isOnlyMine: !1 }), [F]), W = o(() => {
+		D.closeMenu(), D.closePanel();
+	}, [D]);
+	return {
+		filters: {
+			isPopoverOpen: D.isMenuOpen || !!D.activePanelId,
+			isMenuOpen: D.isMenuOpen,
+			activePanel: D.activePanelId,
+			onMenuToggle: D.toggleMenu,
+			onPopoverClose: W,
+			onFieldSelect: D.openPanel,
+			activeFilterCount: z.length,
+			chips: z,
+			onRemoveChip: B,
+			onClearAll: V,
+			statusOptions: L,
+			selectedStatuses: x.statuses,
+			onStatusChange: (e) => F({ statuses: e }),
+			userOptions: I,
+			selectedUser: x.addedBy?.value ?? "",
+			onUserChange: H,
+			userSearchValue: C,
+			onUserSearchChange: w,
+			isUserLoading: P.isLoading,
+			isUserError: P.isError,
+			requestedFrom: x.requestedFrom,
+			requestedTo: x.requestedTo,
+			onRequestedRangeChange: ({ from: e, to: t }) => F({
+				requestedFrom: e,
+				requestedTo: t
+			}),
+			isOnlyMine: x.isOnlyMine,
+			onOnlyMineChange: U,
+			isOnlyMineDisabled: !k
+		},
+		query: R,
+		isFiltering: z.length > 0 || x.isOnlyMine
+	};
+}
+//#endregion
+export { m as ApprovalRequestsFilterChipKey, y as useApprovalRequestsFilters };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js

@@ -9,9 +9,10 @@ import { useApprovalRequestsQuery as n } from "../../../../data-access/dist/inde
 import "../../../../data-access/dist/index.js";
 import { useApprovalRequestNames as r } from "./useApprovalRequestNames.js";
 import { buildApprovalRequestRows as i } from "./buildApprovalRequestRows.js";
-import { useCallback as a, useMemo as o, useState as s } from "react";
+import { useApprovalRequestsFilters as a } from "./useApprovalRequestsFilters.js";
+import { useCallback as o, useMemo as s, useState as c } from "react";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js
-function c(e, t) {
+function l(e, t) {
 	return e ? {
 		title: t.filterEmptyTitle,
 		description: t.filterEmptyDescription
@@ -20,39 +21,45 @@ function c(e, t) {
 		description: t.emptyDescription
 	};
 }
-function l({ labels: l }) {
-	let [u, d] = s(t[0]), [f, p] = s(), { organizationId: m } = e(), [h, g] = s(m);
-	m && m !== h && (g(m), p(void 0));
-	let _ = n({
-		limit: u,
-		pagination_token: f
-	}), v = o(() => _.data?.data ?? [], [_.data]), y = r({ items: v }), b = o(() => i(v, y, l), [
-		v,
-		y,
-		l
-	]), x = _.isPlaceholderData ? void 0 : _.data, S = x?.next_pagination_token ?? void 0, C = x?.prev_pagination_token ?? void 0, w = a((e) => {
-		d(e), p(void 0);
-	}, []), T = a(() => {
-		S && p(S);
-	}, [S]), E = a(() => {
-		C && p(C);
-	}, [C]), { refetch: D } = _, O = a(() => {
-		D();
-	}, [D]);
+function u({ labels: u, enabled: d = !0 }) {
+	let [f, p] = c(t[0]), [m, h] = c(), { organizationId: g } = e(), [_, v] = c(g);
+	g && g !== _ && (v(g), h(void 0));
+	let y = o(() => h(void 0), []), { filters: b, query: x, isFiltering: S } = a({
+		labels: u,
+		onFiltersChange: y
+	}), C = n({
+		...x,
+		limit: f,
+		pagination_token: m,
+		enabled: d
+	}), w = s(() => C.data?.data ?? [], [C.data]), T = r({ items: w }), E = s(() => i(w, T, u), [
+		w,
+		T,
+		u
+	]), D = C.isPlaceholderData ? void 0 : C.data, O = D?.next_pagination_token ?? void 0, k = D?.prev_pagination_token ?? void 0, A = o((e) => {
+		p(e), h(void 0);
+	}, []), j = o(() => {
+		O && h(O);
+	}, [O]), M = o(() => {
+		k && h(k);
+	}, [k]), { refetch: N } = C, P = o(() => {
+		N();
+	}, [N]);
 	return {
-		rows: b,
-		isLoading: _.isLoading,
-		isError: _.isError,
-		pageSize: u,
+		rows: E,
+		isLoading: C.isLoading,
+		isError: C.isError,
+		pageSize: f,
 		pageSizeOptions: t,
-		onPageSizeChange: w,
-		hasNextPage: !!S,
-		hasPrevPage: !!C,
-		onNextPage: T,
-		onPrevPage: E,
-		emptyState: c(!1, l),
-		onRetry: O
+		onPageSizeChange: A,
+		hasNextPage: !!O,
+		hasPrevPage: !!k,
+		onNextPage: j,
+		onPrevPage: M,
+		filters: b,
+		emptyState: l(S, u),
+		onRetry: P
 	};
 }
 //#endregion
-export { c as selectEmptyState, l as useApprovalRequestsTable };
+export { l as selectEmptyState, u as useApprovalRequestsTable };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index.js

@@ -1,3 +1,4 @@
 import "./index2.js";
-import { ApprovalRequestsScreen as e } from "./index3.js";
-export { e as ApprovalRequestsScreen };
+import { ApprovalRequestsFilterField as e } from "./index3.js";
+import { ApprovalRequestsScreen as t } from "./index4.js";
+export { e as ApprovalRequestsFilterField, t as ApprovalRequestsScreen };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js

@@ -1,5 +1,22 @@
+import { FILTER_MENU_BUTTON_LABELS_EN as e, FILTER_TAG_LABELS_EN as t } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js
-var e = {
+var n = {
+	fields: {
+		status: "Status",
+		addedBy: "Added by",
+		requestedOn: "Requested on"
+	},
+	fieldMenuLabel: "Filter approval requests by",
+	onlyMine: "Only my approvals",
+	userSearchLabel: "Search users",
+	userSearchPlaceholder: "Search users",
+	userEmpty: "No users found",
+	userLoading: "Loading users",
+	userError: "Couldn't load users",
+	clearAll: "Clear all",
+	filterMenuButton: e,
+	filterTag: t
+}, r = {
 	columnInvoiceNumber: "Invoice #",
 	columnVendor: "Vendor",
 	columnIssueDate: "Issue date",
@@ -10,7 +27,10 @@ var e = {
 	loadingValue: "Loading",
 	errorTitle: "Couldn't load approval requests",
 	errorDescription: "Try again.",
-	errorRetry: "Try again"
+	errorRetry: "Try again",
+	filterBar: n,
+	accessRestrictedTitle: "Access restricted",
+	accessRestrictedDescription: "You don't have permission to view approval requests."
 };
 //#endregion
-export { e as APPROVAL_REQUESTS_SCREEN_LABELS_EN };
+export { n as APPROVAL_REQUESTS_FILTER_BAR_LABELS_EN, r as APPROVAL_REQUESTS_SCREEN_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js

@@ -1,96 +1,143 @@
-import { Badge as e, DataTable as t, Skeleton as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { EmptyState as r } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
-import { ErrorState as i } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
-import "../../../shared/ui/dist/index.js";
-import { APPROVAL_REQUESTS_SCREEN_LABELS_EN as a } from "./index2.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { DateRangePicker as e, FilterMenuButton as t, FilterTag as n, Input as r, Label as i, MultiSelectFilter as a, Popover as o, PopoverContent as s, PopoverTrigger as c, RadioGroup as l, RadioGroupItem as u, Switch as d, TableToolbar as f, cn as p } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { APPROVAL_REQUESTS_FILTER_BAR_LABELS_EN as m } from "./index2.js";
+import { useId as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ListFilter as y } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js
-var l = [], u = () => void 0;
-function d({ name: e, loadingLabel: t }) {
-	return e === void 0 ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(n, {
-		className: "ttw:h-4 ttw:w-32",
-		"aria-hidden": !0
-	}), /* @__PURE__ */ s("span", {
-		className: "ttw:sr-only",
-		children: t
-	})] }) : /* @__PURE__ */ s(o, { children: e });
-}
-function f({ rows: n, isLoading: o, isError: c, pageSize: f, onPageSizeChange: p, pageSizeOptions: m, hasNextPage: h, hasPrevPage: g, onNextPage: _, onPrevPage: v, emptyState: y, onRetry: b, labels: x }) {
-	let S = {
-		...a,
-		...x
-	}, C = [
-		{
-			accessorKey: "invoiceNumber",
-			header: S.columnInvoiceNumber
-		},
-		{
-			accessorKey: "vendor",
-			header: S.columnVendor,
-			cell: ({ row: e }) => /* @__PURE__ */ s(d, {
-				name: e.original.vendor,
-				loadingLabel: S.loadingValue
-			})
-		},
-		{
-			accessorKey: "issueDate",
-			header: S.columnIssueDate
-		},
-		{
-			accessorKey: "dueDate",
-			header: S.columnDueDate
-		},
-		{
-			accessorKey: "statusLabel",
-			header: S.columnStatus,
-			cell: ({ row: t }) => /* @__PURE__ */ s(e, {
-				tone: t.original.statusTone,
-				children: t.original.statusLabel
-			})
+var b = {
+	Status: "status",
+	AddedBy: "addedBy",
+	RequestedOn: "requestedOn"
+}, x = [
+	b.Status,
+	b.AddedBy,
+	b.RequestedOn
+], S = {
+	status: "ttw:w-56",
+	addedBy: "ttw:w-64",
+	requestedOn: "ttw:w-auto"
+}, C = "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";
+function w({ filters: w, labels: T }) {
+	let E = m, D = {
+		...E,
+		...T,
+		fields: {
+			...E.fields,
+			...T?.fields
 		},
-		{
-			accessorKey: "amount",
-			header: () => /* @__PURE__ */ s("div", {
-				className: "ttw:text-right",
-				children: S.columnAmount
-			}),
-			cell: ({ row: e }) => /* @__PURE__ */ s("div", {
-				className: "ttw:text-right ttw:tabular-nums",
-				children: e.original.amount
-			})
+		filterMenuButton: {
+			...E.filterMenuButton,
+			...T?.filterMenuButton
 		},
-		{
-			accessorKey: "addedBy",
-			header: S.columnAddedBy,
-			cell: ({ row: e }) => /* @__PURE__ */ s(d, {
-				name: e.original.addedBy,
-				loadingLabel: S.loadingValue
-			})
+		filterTag: {
+			...E.filterTag,
+			...T?.filterTag
 		}
-	];
-	return c ? /* @__PURE__ */ s(i, {
-		title: S.errorTitle,
-		description: S.errorDescription,
-		retryLabel: b ? S.errorRetry : void 0,
-		onRetry: b
-	}) : /* @__PURE__ */ s(t, {
-		columns: C,
-		data: n,
-		isLoading: o,
-		sorting: l,
-		onSortingChange: u,
-		pageSize: f,
-		onPageSizeChange: p,
-		pageSizeOptions: m,
-		hasNextPage: h,
-		hasPrevPage: g,
-		onNextPage: _,
-		onPrevPage: v,
-		children: /* @__PURE__ */ s(r, {
-			title: y.title,
-			description: y.description
-		})
+	}, O = h(), { activePanel: k } = w, A = k && S[k] || "ttw:w-52";
+	return /* @__PURE__ */ _(f, {
+		className: "ttw:px-4",
+		filters: /* @__PURE__ */ v("div", {
+			className: "ttw:flex ttw:h-8 ttw:items-center ttw:gap-2",
+			children: [/* @__PURE__ */ _(d, {
+				id: O,
+				checked: w.isOnlyMine,
+				onCheckedChange: w.onOnlyMineChange,
+				disabled: w.isOnlyMineDisabled
+			}), /* @__PURE__ */ _(i, {
+				htmlFor: O,
+				className: "ttw:text-sm",
+				children: D.onlyMine
+			})]
+		}),
+		filterButton: /* @__PURE__ */ v(o, {
+			open: w.isPopoverOpen,
+			onOpenChange: (e) => {
+				e || w.onPopoverClose();
+			},
+			children: [/* @__PURE__ */ _(c, {
+				asChild: !0,
+				children: /* @__PURE__ */ _(t, {
+					activeCount: w.activeFilterCount,
+					onClick: (e) => {
+						k && e.preventDefault(), w.onMenuToggle();
+					},
+					labels: D.filterMenuButton
+				})
+			}), /* @__PURE__ */ v(s, {
+				align: "start",
+				className: p("ttw:p-0", A),
+				children: [
+					w.isMenuOpen && /* @__PURE__ */ _("div", {
+						className: "ttw:p-1",
+						role: "menu",
+						"aria-label": D.fieldMenuLabel,
+						children: x.map((e) => /* @__PURE__ */ v("button", {
+							type: "button",
+							role: "menuitem",
+							className: C,
+							onClick: () => w.onFieldSelect(e),
+							children: [/* @__PURE__ */ _(y, {
+								className: "ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground",
+								"aria-hidden": !0
+							}), D.fields[e]]
+						}, e))
+					}),
+					k === b.Status && /* @__PURE__ */ _(a, {
+						options: [...w.statusOptions],
+						selectedValues: [...w.selectedStatuses],
+						onSelectionChange: w.onStatusChange
+					}),
+					k === b.AddedBy && /* @__PURE__ */ v("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-3",
+						children: [/* @__PURE__ */ _(r, {
+							type: "search",
+							className: "ttw:h-8 ttw:text-xs",
+							"aria-label": D.userSearchLabel,
+							placeholder: D.userSearchPlaceholder,
+							value: w.userSearchValue,
+							onChange: (e) => w.onUserSearchChange(e.target.value)
+						}), w.isUserLoading ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: D.userLoading
+						}) : w.isUserError ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-destructive",
+							children: D.userError
+						}) : w.userOptions.length === 0 ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: D.userEmpty
+						}) : /* @__PURE__ */ _(l, {
+							value: w.selectedUser,
+							onValueChange: w.onUserChange,
+							"aria-label": D.fields.addedBy,
+							className: "ttw:flex ttw:max-h-64 ttw:flex-col ttw:gap-1 ttw:overflow-y-auto",
+							children: w.userOptions.map((e) => /* @__PURE__ */ v("label", {
+								className: "ttw:flex ttw:cursor-pointer ttw:items-center ttw:gap-2 ttw:rounded-md ttw:px-2 ttw:py-1.5 ttw:hover:bg-accent",
+								children: [/* @__PURE__ */ _(u, { value: e.value }), /* @__PURE__ */ _("span", {
+									className: "ttw:text-xs ttw:font-medium",
+									children: e.label
+								})]
+							}, e.value))
+						})]
+					}),
+					k === b.RequestedOn && /* @__PURE__ */ _(e, {
+						from: w.requestedFrom,
+						to: w.requestedTo,
+						onRangeChange: w.onRequestedRangeChange
+					})
+				]
+			})]
+		}),
+		tags: /* @__PURE__ */ v(g, { children: [w.chips.map((e) => /* @__PURE__ */ _(n, {
+			label: e.label,
+			labels: D.filterTag,
+			onDismiss: () => w.onRemoveChip(e.key)
+		}, e.key)), w.chips.length > 0 && /* @__PURE__ */ _("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: w.onClearAll,
+			children: D.clearAll
+		})] })
 	});
 }
 //#endregion
-export { f as ApprovalRequestsScreen, f as default };
+export { w as ApprovalRequestsFilterBar, w as default, b as ApprovalRequestsFilterField };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index4.js

@@ -0,0 +1,104 @@
+import { Badge as e, DataTable as t, Skeleton as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { EmptyState as r } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as i } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { APPROVAL_REQUESTS_SCREEN_LABELS_EN as a } from "./index2.js";
+import { ApprovalRequestsFilterBar as o } from "./index3.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index4.js
+var u = [], d = () => void 0;
+function f({ name: e, loadingLabel: t }) {
+	return e === void 0 ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+		className: "ttw:h-4 ttw:w-32",
+		"aria-hidden": !0
+	}), /* @__PURE__ */ c("span", {
+		className: "ttw:sr-only",
+		children: t
+	})] }) : /* @__PURE__ */ c(s, { children: e });
+}
+function p({ rows: n, isLoading: s, isError: l, isAccessRestricted: p, pageSize: m, onPageSizeChange: h, pageSizeOptions: g, hasNextPage: _, hasPrevPage: v, onNextPage: y, onPrevPage: b, emptyState: x, filters: S, onRetry: C, labels: w }) {
+	let T = a, { filterBar: E, ...D } = w ?? {}, O = {
+		...T,
+		...D
+	}, k = [
+		{
+			accessorKey: "invoiceNumber",
+			header: O.columnInvoiceNumber
+		},
+		{
+			accessorKey: "vendor",
+			header: O.columnVendor,
+			cell: ({ row: e }) => /* @__PURE__ */ c(f, {
+				name: e.original.vendor,
+				loadingLabel: O.loadingValue
+			})
+		},
+		{
+			accessorKey: "issueDate",
+			header: O.columnIssueDate
+		},
+		{
+			accessorKey: "dueDate",
+			header: O.columnDueDate
+		},
+		{
+			accessorKey: "statusLabel",
+			header: O.columnStatus,
+			cell: ({ row: t }) => /* @__PURE__ */ c(e, {
+				tone: t.original.statusTone,
+				children: t.original.statusLabel
+			})
+		},
+		{
+			accessorKey: "amount",
+			header: () => /* @__PURE__ */ c("div", {
+				className: "ttw:text-right",
+				children: O.columnAmount
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ c("div", {
+				className: "ttw:text-right ttw:tabular-nums",
+				children: e.original.amount
+			})
+		},
+		{
+			accessorKey: "addedBy",
+			header: O.columnAddedBy,
+			cell: ({ row: e }) => /* @__PURE__ */ c(f, {
+				name: e.original.addedBy,
+				loadingLabel: O.loadingValue
+			})
+		}
+	];
+	return p ? /* @__PURE__ */ c(i, {
+		title: O.accessRestrictedTitle,
+		description: O.accessRestrictedDescription
+	}) : l ? /* @__PURE__ */ c(i, {
+		title: O.errorTitle,
+		description: O.errorDescription,
+		retryLabel: C ? O.errorRetry : void 0,
+		onRetry: C
+	}) : /* @__PURE__ */ c(t, {
+		columns: k,
+		data: n,
+		isLoading: s,
+		sorting: u,
+		onSortingChange: d,
+		pageSize: m,
+		onPageSizeChange: h,
+		pageSizeOptions: g,
+		hasNextPage: _,
+		hasPrevPage: v,
+		onNextPage: y,
+		onPrevPage: b,
+		filterComponent: /* @__PURE__ */ c(o, {
+			filters: S,
+			labels: E
+		}),
+		children: /* @__PURE__ */ c(r, {
+			title: x.title,
+			description: x.description
+		})
+	});
+}
+//#endregion
+export { p as ApprovalRequestsScreen, p as default };

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.9.39", n = "9a6cb2d3b516b6821374e3a4483594af885ce0ce", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.9.41", n = "64c2e0da0918115a4ccbe3e956c8e197a3a4fc85", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.9.39",
+  "version": "0.9.41",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [