@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/dashboard/GlobalFiltersBar/GlobalFiltersBar.js

@@ -1,258 +1,171 @@
-import e from "../../../hooks/useGlobalFilters.js";
-import t from "../../../hooks/useFilterUrlSync.js";
-import n from "../../../hooks/useFilterPresets.js";
+import { SECTION_FOCUS_RING as e } from "../../common/sectionStyles.js";
+import "../../common/index.js";
+import t from "../../../hooks/useGlobalFilters.js";
+import n from "../../../hooks/useFilterUrlSync.js";
+import r from "../../../hooks/useFilterPresets.js";
 import "../../../hooks/index.js";
-import { SEMANTIC_COLORS as r } from "../../../utils/semanticTokens.js";
-import i from "./FilterChip.js";
+import { SEMANTIC_COLORS as i } from "../../../utils/semanticTokens.js";
+import ee from "./FilterChip.js";
 import a from "./FilterEditor.js";
 import o from "./FilterPresetSelector.js";
 import { useCallback as s, useEffect as c, useState as l } from "react";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/GlobalFiltersBar/GlobalFiltersBar.tsx
-function f({ dashboardId: f, onFilterChange: p, collapsible: m = !0, className: h = "", enableUrlSync: g = !0, enablePresets: _ = !0 }) {
-	let { t: v } = ee(), { filters: y, activeValues: b, loading: x, fetchFilters: S, createFilter: C, updateFilter: w, deleteFilter: T, setFilterValue: E, resetFilters: D } = e(), { getShareableUrl: O, clearUrlParams: k } = t({
-		enabled: g,
+var p = `inline-flex min-h-control-sm items-center gap-icon-gap rounded-button border border-[var(--color-border-subtle)] bg-bg-surface px-3 py-1 text-sm font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-accentSubtle ${e}`, m = `inline-flex min-h-control-sm items-center gap-icon-gap rounded-button px-2 py-1 text-sm font-medium text-text-secondary motion-safe:transition-colors hover:bg-bg-accentSubtle ${e}`;
+function h({ dashboardId: e, onFilterChange: h, collapsible: g = !0, className: _ = "", enableUrlSync: v = !0, enablePresets: y = !0 }) {
+	let { t: b } = u(), { filters: x, activeValues: S, loading: C, fetchFilters: w, createFilter: T, updateFilter: E, deleteFilter: D, setFilterValue: O, resetFilters: k } = t(), { getShareableUrl: A, clearUrlParams: j } = n({
+		enabled: v,
 		paramPrefix: "filter_",
 		debounceMs: 300
-	}), { presets: A, activePresetId: j, loadPresets: M, applyPreset: N, saveCurrentAsPreset: P, deletePreset: F, clearActivePreset: I } = n(f), [L, R] = l(!1), [z, B] = l(!1), [V, H] = l(null), [U, W] = l(!1);
+	}), { presets: M, activePresetId: N, loadPresets: P, applyPreset: F, saveCurrentAsPreset: I, deletePreset: L, clearActivePreset: R } = r(e), [z, B] = l(!1), [V, H] = l(!1), [U, W] = l(null), [G, K] = l(!1);
 	c(() => {
-		f && (S(f), _ && M(f));
+		e && (w(e), y && P(e));
 	}, [
-		f,
-		S,
-		M,
-		_
+		e,
+		w,
+		P,
+		y
 	]), c(() => {
-		p && p(b);
-	}, [b, p]), c(() => {
-		if (j && Object.keys(b).length > 0) {
-			let e = A.find((e) => e.id === j);
-			e && JSON.stringify(e.values) !== JSON.stringify(b) && I();
+		h && h(S);
+	}, [S, h]), c(() => {
+		if (N && Object.keys(S).length > 0) {
+			let e = M.find((e) => e.id === N);
+			e && JSON.stringify(e.values) !== JSON.stringify(S) && R();
 		}
 	}, [
-		b,
-		j,
-		A,
-		I
+		S,
+		N,
+		M,
+		R
 	]);
-	let G = s((e, t) => {
-		E(e, t);
-	}, [E]), K = s(() => {
-		H(null), B(!0);
-	}, []), q = s((e) => {
-		H(e), B(!0);
-	}, []), J = s(async (e) => {
-		V ? await w({
-			id: V.id,
-			name: e.name,
-			config: e.config,
-			defaultValue: e.defaultValue,
-			isRequired: e.isRequired
-		}) : await C({
-			dashboardId: f,
-			name: e.name,
-			type: e.type,
-			config: e.config,
-			defaultValue: e.defaultValue,
-			isRequired: e.isRequired
-		}), B(!1), H(null);
+	let q = s((e, t) => {
+		O(e, t);
+	}, [O]), J = s(() => {
+		W(null), H(!0);
+	}, []), Y = s((e) => {
+		W(e), H(!0);
+	}, []), X = s(async (t) => {
+		U ? await E({
+			id: U.id,
+			name: t.name,
+			config: t.config,
+			defaultValue: t.defaultValue,
+			isRequired: t.isRequired
+		}) : await T({
+			dashboardId: e,
+			name: t.name,
+			type: t.type,
+			config: t.config,
+			defaultValue: t.defaultValue,
+			isRequired: t.isRequired
+		}), H(!1), W(null);
 	}, [
-		f,
-		V,
-		C,
-		w
-	]), Y = s(async (e) => {
-		await T(e);
-	}, [T]), X = s(() => {
-		D(), k(), I();
+		e,
+		U,
+		T,
+		E
+	]), Z = s(async (e) => {
+		await D(e);
+	}, [D]), Q = s(() => {
+		k(), j(), R();
 	}, [
-		D,
 		k,
-		I
-	]), Z = s(async () => {
-		let e = O();
+		j,
+		R
+	]), te = s(async () => {
+		let e = A();
 		try {
-			await navigator.clipboard.writeText(e), W(!0), setTimeout(() => W(!1), 2e3);
+			await navigator.clipboard.writeText(e), K(!0), setTimeout(() => K(!1), 2e3);
 		} catch {}
-	}, [O]), Q = s((e) => {
-		N(e);
-	}, [N]), te = s((e, t) => {
-		P(e, t);
-	}, [P]), ne = s((e) => {
+	}, [A]), ne = s((e) => {
 		F(e);
-	}, [F]), re = s(() => {
-		R((e) => !e);
-	}, []), $ = Object.keys(b).filter((e) => b[e] !== void 0 && b[e] !== null && b[e] !== "").length;
-	return x && y.length === 0 ? /* @__PURE__ */ d("div", {
-		className: h,
-		style: {
-			display: "flex",
-			alignItems: "center",
-			gap: "10px",
-			padding: "12px 16px",
-			backgroundColor: r.bgPrimary,
-			borderBottom: `1px solid ${r.borderDefault}`
-		},
-		children: [/* @__PURE__ */ u("div", { style: {
-			width: "16px",
-			height: "16px",
-			border: `2px solid ${r.actionPrimaryBg}`,
-			borderTopColor: "transparent",
-			borderRadius: "50%",
-			animation: "spin 1s linear infinite"
-		} }), /* @__PURE__ */ u("span", {
-			style: {
-				color: r.textSecondary,
-				fontSize: "14px"
-			},
-			children: v("bigconsole.filters.bar.loading", "Loading filters...")
+	}, [F]), re = s((e, t) => {
+		I(e, t);
+	}, [I]), ie = s((e) => {
+		L(e);
+	}, [L]), ae = s(() => {
+		B((e) => !e);
+	}, []), $ = Object.keys(S).filter((e) => S[e] !== void 0 && S[e] !== null && S[e] !== "").length;
+	return C && x.length === 0 ? /* @__PURE__ */ f("div", {
+		className: `flex flex-wrap items-center gap-control-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-card-padding py-control-gap ${_}`,
+		role: "status",
+		"aria-live": "polite",
+		"data-testid": "global-filters-loading",
+		children: [/* @__PURE__ */ d("span", { className: "h-icon-sm w-icon-sm animate-spin rounded-full border-2 border-action-primary-bg border-t-transparent" }), /* @__PURE__ */ d("span", {
+			className: "text-sm text-text-secondary",
+			children: b("bigconsole.filters.bar.loading", "Loading filters...")
 		})]
-	}) : y.length === 0 ? /* @__PURE__ */ d("div", {
-		className: h,
-		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "space-between",
-			padding: "12px 16px",
-			backgroundColor: r.bgPrimary,
-			borderBottom: `1px solid ${r.borderDefault}`
-		},
+	}) : x.length === 0 ? /* @__PURE__ */ f("div", {
+		className: `flex flex-wrap items-center justify-between gap-control-gap border-b border-[var(--color-border-subtle)] bg-bg-sunken px-card-padding py-control-gap ${_}`,
+		"data-testid": "global-filters-empty",
 		children: [
-			/* @__PURE__ */ d("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: "10px"
-				},
-				children: [/* @__PURE__ */ u("span", {
-					style: {
-						fontWeight: 600,
-						fontSize: "14px",
-						color: r.textPrimary
-					},
-					children: v("bigconsole.filters.bar.title", "Filters")
-				}), /* @__PURE__ */ u("span", {
-					style: {
-						color: r.textTertiary,
-						fontSize: "13px"
-					},
-					children: v("bigconsole.filters.bar.noFiltersConfigured", "No filters configured")
+			/* @__PURE__ */ f("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-icon-gap",
+				children: [/* @__PURE__ */ d("h2", {
+					className: "text-sm font-semibold text-text-primary",
+					children: b("bigconsole.filters.bar.title", "Filters")
+				}), /* @__PURE__ */ d("span", {
+					className: "text-sm text-text-muted",
+					children: b("bigconsole.filters.bar.noFiltersConfigured", "No filters configured")
 				})]
 			}),
-			/* @__PURE__ */ u("button", {
-				onClick: K,
-				style: {
-					padding: "6px 14px",
-					fontSize: "13px",
-					color: r.actionPrimaryFg,
-					backgroundColor: r.actionPrimaryBg,
-					border: "none",
-					borderRadius: "6px",
-					cursor: "pointer",
-					fontWeight: 500,
-					boxShadow: "0 2px 4px rgba(99, 102, 241, 0.3)"
-				},
-				children: v("bigconsole.filters.bar.addFilter", "+ Add Filter")
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: J,
+				className: p,
+				children: b("bigconsole.filters.bar.addFilter", "+ Add Filter")
 			}),
-			z && /* @__PURE__ */ u(a, {
-				filter: V,
-				onSave: J,
+			V && /* @__PURE__ */ d(a, {
+				filter: U,
+				onSave: X,
 				onClose: () => {
-					B(!1), H(null);
+					H(!1), W(null);
 				}
 			})
 		]
-	}) : /* @__PURE__ */ d("div", {
-		className: h,
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			backgroundColor: r.bgPrimary,
-			borderBottom: `1px solid ${r.borderDefault}`,
-			boxShadow: "0 2px 4px rgba(0,0,0,0.05)"
-		},
+	}) : /* @__PURE__ */ f("section", {
+		className: `flex min-w-0 flex-col border-b border-[var(--color-border-subtle)] bg-bg-sunken ${_}`,
+		"aria-labelledby": "global-filters-heading",
+		"data-testid": "global-filters-bar",
 		children: [
-			/* @__PURE__ */ d("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					padding: "10px 16px",
-					borderBottom: L ? "none" : `1px solid ${r.borderDefault}`,
-					backgroundColor: r.bgSecondary
-				},
-				children: [/* @__PURE__ */ d("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "10px"
-					},
+			/* @__PURE__ */ f("div", {
+				className: `flex flex-wrap items-center justify-between gap-control-gap px-card-padding py-control-gap ${z ? "" : "border-b border-[var(--color-border-subtle)]"}`,
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-icon-gap",
 					children: [
-						/* @__PURE__ */ u("span", {
-							style: {
-								fontWeight: 600,
-								fontSize: "14px",
-								color: r.textPrimary
-							},
-							children: v("bigconsole.filters.bar.title", "Filters")
+						/* @__PURE__ */ d("h2", {
+							id: "global-filters-heading",
+							className: "text-sm font-semibold text-text-primary",
+							children: b("bigconsole.filters.bar.title", "Filters")
 						}),
-						/* @__PURE__ */ u("span", {
-							style: {
-								fontSize: "12px",
-								color: r.actionPrimaryFg,
-								backgroundColor: r.actionPrimaryBg,
-								padding: "2px 8px",
-								borderRadius: "12px",
-								fontWeight: 500
-							},
-							children: y.length
+						/* @__PURE__ */ d("span", {
+							className: "rounded-pill bg-bg-surface px-2 py-0.5 text-xs font-medium text-text-secondary",
+							children: x.length
 						}),
-						$ > 0 && /* @__PURE__ */ u("span", {
-							style: {
-								fontSize: "11px",
-								color: r.statusSuccessText,
-								backgroundColor: r.statusSuccessBgSubtle,
-								padding: "2px 8px",
-								borderRadius: "12px",
-								fontWeight: 500
-							},
-							children: v("bigconsole.filters.bar.activeCount", "{{count}} active", { count: $ ?? "" })
+						$ > 0 && /* @__PURE__ */ d("span", {
+							className: "rounded-pill bg-[var(--color-status-success-bgSubtle)] px-2 py-0.5 text-xs font-medium text-status-success-text",
+							children: b("bigconsole.filters.bar.activeCount", "{{count}} active", { count: $ ?? "" })
 						})
 					]
-				}), /* @__PURE__ */ d("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "10px"
-					},
+				}), /* @__PURE__ */ f("div", {
+					className: "flex min-w-0 flex-wrap items-center justify-end gap-control-gap",
 					children: [
-						_ && /* @__PURE__ */ u(o, {
-							presets: A,
-							activePresetId: j,
-							onApplyPreset: Q,
-							onSavePreset: te,
-							onDeletePreset: ne
+						y && /* @__PURE__ */ d(o, {
+							presets: M,
+							activePresetId: N,
+							onApplyPreset: ne,
+							onSavePreset: re,
+							onDeletePreset: ie
 						}),
-						g && $ > 0 && /* @__PURE__ */ d("div", {
+						v && $ > 0 && /* @__PURE__ */ f("div", {
 							style: { position: "relative" },
-							children: [/* @__PURE__ */ d("button", {
-								onClick: Z,
-								title: v("bigconsole.filters.bar.shareUrlTitle", "Copy shareable URL with filters"),
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "6px",
-									padding: "8px 12px",
-									fontSize: "13px",
-									color: r.textSecondary,
-									backgroundColor: r.bgPrimary,
-									border: `1px solid ${r.borderDefault}`,
-									borderRadius: "6px",
-									cursor: "pointer",
-									fontWeight: 500
-								},
-								children: [/* @__PURE__ */ d("svg", {
+							children: [/* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: te,
+								title: b("bigconsole.filters.bar.shareUrlTitle", "Copy shareable URL with filters"),
+								className: p,
+								children: [/* @__PURE__ */ f("svg", {
 									width: "14",
 									height: "14",
 									viewBox: "0 0 24 24",
@@ -260,17 +173,17 @@ function f({ dashboardId: f, onFilterChange: p, collapsible: m = !0, className:
 									stroke: "currentColor",
 									strokeWidth: "2",
 									children: [
-										/* @__PURE__ */ u("path", { d: "M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" }),
-										/* @__PURE__ */ u("polyline", { points: "16,6 12,2 8,6" }),
-										/* @__PURE__ */ u("line", {
+										/* @__PURE__ */ d("path", { d: "M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" }),
+										/* @__PURE__ */ d("polyline", { points: "16,6 12,2 8,6" }),
+										/* @__PURE__ */ d("line", {
 											x1: "12",
 											y1: "2",
 											x2: "12",
 											y2: "15"
 										})
 									]
-								}), v("bigconsole.filters.bar.share", "Share")]
-							}), U && /* @__PURE__ */ u("div", {
+								}), b("bigconsole.filters.bar.share", "Share")]
+							}), G && /* @__PURE__ */ d("div", {
 								style: {
 									position: "absolute",
 									top: "100%",
@@ -278,89 +191,62 @@ function f({ dashboardId: f, onFilterChange: p, collapsible: m = !0, className:
 									transform: "translateX(-50%)",
 									marginTop: "4px",
 									padding: "6px 12px",
-									backgroundColor: r.textPrimary,
-									color: r.bgPrimary,
+									backgroundColor: i.textPrimary,
+									color: i.bgPrimary,
 									fontSize: "12px",
 									borderRadius: "4px",
 									whiteSpace: "nowrap",
 									zIndex: 100001
 								},
-								children: v("bigconsole.filters.bar.urlCopied", "URL copied!")
+								children: b("bigconsole.filters.bar.urlCopied", "URL copied!")
 							})]
 						}),
-						$ > 0 && /* @__PURE__ */ u("button", {
-							onClick: X,
-							style: {
-								padding: "8px 12px",
-								fontSize: "13px",
-								color: r.statusErrorText,
-								backgroundColor: "transparent",
-								border: "none",
-								cursor: "pointer",
-								fontWeight: 500
-							},
-							children: v("bigconsole.filters.bar.resetAll", "Reset all")
+						$ > 0 && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: Q,
+							className: `${m} text-status-error-text`,
+							children: b("bigconsole.filters.bar.resetAll", "Reset all")
 						}),
-						/* @__PURE__ */ u("button", {
-							onClick: K,
-							style: {
-								padding: "8px 14px",
-								fontSize: "13px",
-								color: r.actionPrimaryFg,
-								backgroundColor: r.actionPrimaryBg,
-								border: "none",
-								borderRadius: "6px",
-								cursor: "pointer",
-								fontWeight: 500,
-								boxShadow: "0 2px 4px rgba(99, 102, 241, 0.3)"
-							},
-							children: v("bigconsole.filters.bar.addFilter", "+ Add Filter")
+						/* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: J,
+							className: p,
+							children: b("bigconsole.filters.bar.addFilter", "+ Add Filter")
 						}),
-						m && /* @__PURE__ */ u("button", {
-							onClick: re,
-							style: {
-								padding: "8px 12px",
-								fontSize: "13px",
-								color: r.textSecondary,
-								backgroundColor: "transparent",
-								border: `1px solid ${r.borderDefault}`,
-								borderRadius: "6px",
-								cursor: "pointer"
-							},
-							children: L ? v("bigconsole.filters.bar.expand", "▼ Expand") : v("bigconsole.filters.bar.collapse", "▲ Collapse")
+						g && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: ae,
+							"aria-expanded": !z,
+							"aria-controls": z ? void 0 : "global-filters-chips",
+							className: m,
+							children: z ? b("bigconsole.filters.bar.expand", "▼ Expand") : b("bigconsole.filters.bar.collapse", "▲ Collapse")
 						})
 					]
 				})]
 			}),
-			!L && /* @__PURE__ */ u("div", {
-				style: {
-					display: "flex",
-					flexWrap: "wrap",
-					gap: "10px",
-					padding: "12px 16px",
-					overflow: "visible",
-					backgroundColor: r.bgPrimary,
-					position: "relative"
-				},
-				children: y.map((e) => /* @__PURE__ */ u(i, {
+			!z && /* @__PURE__ */ d("div", {
+				id: "global-filters-chips",
+				className: "relative flex flex-wrap gap-control-gap px-card-padding py-control-gap",
+				style: { overflow: "visible" },
+				children: x.map((e) => /* @__PURE__ */ d(ee, {
 					filter: e,
-					value: b[e.id],
-					onChange: (t) => G(e.id, t),
-					onEdit: () => q(e),
-					onDelete: () => Y(e.id)
+					value: S[e.id],
+					onChange: (t) => q(e.id, t),
+					onEdit: () => Y(e),
+					onDelete: () => Z(e.id)
 				}, e.id))
 			}),
-			z && /* @__PURE__ */ u(a, {
-				filter: V,
-				onSave: J,
+			V && /* @__PURE__ */ d(a, {
+				filter: U,
+				onSave: X,
 				onClose: () => {
-					B(!1), H(null);
+					H(!1), W(null);
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { f as default };
+export { h as default };
 
 //# sourceMappingURL=GlobalFiltersBar.js.map