@signalflare-ai/ui 0.5.0

package/dist/filters-BdBogf7D.js

@@ -0,0 +1,682 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as Checkbox } from "./checkbox-CPX7lBaU.js";
+import { t as Input } from "./input-BxQAnXki.js";
+import { t as InputGroup } from "./input-Cn25I4o5.js";
+import { t as DropdownMenu } from "./dropdown-J5T4pHaR.js";
+import { t as Popover } from "./popover-BRQZ2b6z.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDown, Check, MagnifyingGlass, Plus, X } from "@phosphor-icons/react";
+//#region src/components/filters/helpers.ts
+/** Default operators for text fields */
+var DEFAULT_TEXT_OPERATORS = [
+	{
+		value: "is",
+		label: "is"
+	},
+	{
+		value: "is_not",
+		label: "is not"
+	},
+	{
+		value: "contains",
+		label: "contains"
+	},
+	{
+		value: "does_not_contain",
+		label: "does not contain"
+	},
+	{
+		value: "starts_with",
+		label: "starts with"
+	},
+	{
+		value: "ends_with",
+		label: "ends with"
+	},
+	{
+		value: "is_empty",
+		label: "is empty"
+	},
+	{
+		value: "is_not_empty",
+		label: "is not empty"
+	}
+];
+/** Default operators for select fields */
+var DEFAULT_SELECT_OPERATORS = [
+	{
+		value: "is",
+		label: "is"
+	},
+	{
+		value: "is_not",
+		label: "is not"
+	},
+	{
+		value: "is_empty",
+		label: "is empty"
+	},
+	{
+		value: "is_not_empty",
+		label: "is not empty"
+	}
+];
+/** Default operators for multiselect fields */
+var DEFAULT_MULTISELECT_OPERATORS = [
+	{
+		value: "is_any_of",
+		label: "is any of"
+	},
+	{
+		value: "is_none_of",
+		label: "is none of"
+	},
+	{
+		value: "is_all_of",
+		label: "is all of"
+	},
+	{
+		value: "is_empty",
+		label: "is empty"
+	},
+	{
+		value: "is_not_empty",
+		label: "is not empty"
+	}
+];
+/** Map of field types to their default operators */
+var DEFAULT_OPERATORS = {
+	text: DEFAULT_TEXT_OPERATORS,
+	select: DEFAULT_SELECT_OPERATORS,
+	multiselect: DEFAULT_MULTISELECT_OPERATORS
+};
+/** Get default operator for a field type */
+function getDefaultOperatorForFieldType(type, operators) {
+	if (operators && operators.length > 0) return operators[0].value;
+	return DEFAULT_OPERATORS[type]?.[0]?.value ?? "is";
+}
+/**
+* Create a new filter with a unique ID.
+*
+* @example
+* ```tsx
+* const filter = createFilter("status", "is", ["active"]);
+* setFilters(prev => [...prev, filter]);
+* ```
+*/
+function createFilter(field, operator, values) {
+	return {
+		id: crypto.randomUUID(),
+		field,
+		operator,
+		values
+	};
+}
+/**
+* Create multiple filters at once, each with a unique ID.
+*
+* @example
+* ```tsx
+* const filters = createFilterGroup([
+*   { field: "status", operator: "is", values: ["active"] },
+*   { field: "priority", operator: "is_any_of", values: ["high", "critical"] },
+* ]);
+* ```
+*/
+function createFilterGroup(filters) {
+	return filters.map((f) => ({
+		...f,
+		id: crypto.randomUUID()
+	}));
+}
+/** Default i18n configuration */
+var DEFAULT_I18N = {
+	addFilter: "Add Filter",
+	clearAll: "Clear All",
+	searchPlaceholder: "Search fields...",
+	noResults: "No fields found",
+	operators: {
+		is: "is",
+		is_not: "is not",
+		contains: "contains",
+		does_not_contain: "does not contain",
+		starts_with: "starts with",
+		ends_with: "ends with",
+		is_empty: "is empty",
+		is_not_empty: "is not empty",
+		is_any_of: "is any of",
+		is_none_of: "is none of",
+		is_all_of: "is all of"
+	},
+	valueLabel: "Value",
+	noValueLabel: "None",
+	removeFilter: "Remove filter",
+	changeOperator: "Change operator",
+	changeValue: "Change value",
+	maxSelectionsReached: "Maximum selections reached",
+	validationError: "Invalid value"
+};
+/** Merge partial i18n config with defaults */
+function mergeI18n(partial) {
+	return {
+		...DEFAULT_I18N,
+		...partial,
+		operators: {
+			...DEFAULT_I18N.operators,
+			...partial?.operators
+		}
+	};
+}
+/** Get operators for a field, falling back to defaults */
+function getFieldOperators(field) {
+	if (field.operators && field.operators.length > 0) return field.operators;
+	return DEFAULT_OPERATORS[field.type] ?? DEFAULT_TEXT_OPERATORS;
+}
+/** Get field configuration by key */
+function getFieldByKey(fields, key) {
+	return fields.find((f) => f.key === key);
+}
+/** Group fields by their group property */
+function groupFields(fields) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const field of fields) {
+		const group = field.group ?? "Fields";
+		if (!groups.has(group)) groups.set(group, []);
+		groups.get(group).push(field);
+	}
+	return groups;
+}
+/** Check if a filter value is valid for a field */
+function validateFilterValue(field, values) {
+	if (field.maxSelections && values.length > field.maxSelections) return {
+		valid: false,
+		message: `Maximum ${field.maxSelections} selections allowed`
+	};
+	if (field.validation) {
+		const result = field.validation(values);
+		if (typeof result === "boolean") return {
+			valid: result,
+			message: result ? void 0 : "Invalid value"
+		};
+		return result;
+	}
+	return { valid: true };
+}
+/** Format a filter value for display in the filter pill */
+function formatFilterValue(values, field) {
+	if (field.customValueRenderer) return "...";
+	if (values.length === 0) return "None";
+	if (values.length === 1) {
+		const value = values[0];
+		if (field.options) {
+			const option = field.options.find((o) => o.value === value);
+			if (option) return option.label;
+		}
+		return String(value);
+	}
+	if (field.options) {
+		const labels = values.map((v) => {
+			return field.options.find((o) => o.value === v)?.label ?? String(v);
+		});
+		return `${labels.slice(0, 2).join(", ")}${labels.length > 2 ? ` +${labels.length - 2}` : ""}`;
+	}
+	return `${values.length} selected`;
+}
+/** Get the label for a filter value from options */
+function getValueLabel(value, options) {
+	if (!options) return String(value);
+	return options.find((o) => o.value === value)?.label ?? String(value);
+}
+//#endregion
+//#region src/components/filters/filters.tsx
+/** Filters size variant definitions */
+var SF_FILTERS_VARIANTS = { size: {
+	sm: {
+		classes: "text-xs",
+		description: "Small filter items"
+	},
+	default: {
+		classes: "text-sm",
+		description: "Default filter items"
+	},
+	lg: {
+		classes: "text-base",
+		description: "Large filter items"
+	}
+} };
+/** Default variants for Filters */
+var SF_FILTERS_DEFAULT_VARIANTS = { size: "default" };
+function FilterValueEditor({ field, values, onChange, onClose, i18n }) {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [localValues, setLocalValues] = useState(values);
+	const [validationError, setValidationError] = useState(null);
+	const options = useMemo(() => {
+		if (!field.options) return [];
+		if (!searchQuery) return field.options;
+		return field.options.filter((o) => o.label.toLowerCase().includes(searchQuery.toLowerCase()));
+	}, [field.options, searchQuery]);
+	const handleValueChange = useCallback((newValues) => {
+		setLocalValues(newValues);
+		const validation = validateFilterValue(field, newValues);
+		if (!validation.valid) setValidationError(validation.message ?? i18n.validationError);
+		else setValidationError(null);
+	}, [field, i18n.validationError]);
+	const handleApply = useCallback(() => {
+		const validation = validateFilterValue(field, localValues);
+		if (!validation.valid) {
+			setValidationError(validation.message ?? i18n.validationError);
+			return;
+		}
+		onChange(localValues);
+		onClose();
+	}, [
+		field,
+		localValues,
+		onChange,
+		onClose,
+		i18n.validationError
+	]);
+	if (field.type === "text") return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-2",
+		children: [/* @__PURE__ */ jsx(Input, {
+			value: String(localValues[0] ?? ""),
+			onChange: (e) => handleValueChange([e.target.value]),
+			placeholder: field.placeholder,
+			className: "w-full"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: onClose,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: handleApply,
+				children: "Apply"
+			})]
+		})]
+	});
+	if (field.type === "select") return /* @__PURE__ */ jsxs("div", {
+		className: "flex max-h-72 flex-col gap-2",
+		children: [field.searchable && /* @__PURE__ */ jsx("div", {
+			className: "border-b border-sf-line pb-2",
+			children: /* @__PURE__ */ jsxs(InputGroup, {
+				className: "w-full",
+				children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+					value: searchQuery,
+					onChange: (e) => setSearchQuery(e.target.value),
+					placeholder: i18n.searchPlaceholder,
+					className: "w-full"
+				}), /* @__PURE__ */ jsx(InputGroup.Button, { children: /* @__PURE__ */ jsx(MagnifyingGlass, { className: "size-4" }) })]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5 overflow-auto",
+			children: [options.map((option) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					handleValueChange([option.value]);
+					handleApply();
+				},
+				className: cn("flex items-center justify-between rounded-md px-2 py-1.5 text-sm", "hover:bg-sf-tint", localValues[0] === option.value && "bg-sf-tint"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [option.icon, option.label]
+				}), localValues[0] === option.value && /* @__PURE__ */ jsx(Check, { className: "size-4 text-sf-brand" })]
+			}, String(option.value))), options.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "py-4 text-center text-sm text-sf-subtle",
+				children: i18n.noResults
+			})]
+		})]
+	});
+	if (field.type === "multiselect") {
+		const isMaxReached = field.maxSelections !== void 0 && localValues.length >= field.maxSelections;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex max-h-72 w-56 flex-col gap-2",
+			children: [
+				field.searchable && /* @__PURE__ */ jsx("div", {
+					className: "border-b border-sf-line pb-2",
+					children: /* @__PURE__ */ jsxs(InputGroup, {
+						className: "w-full",
+						children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+							value: searchQuery,
+							onChange: (e) => setSearchQuery(e.target.value),
+							placeholder: i18n.searchPlaceholder,
+							className: "w-full"
+						}), /* @__PURE__ */ jsx(InputGroup.Button, { children: /* @__PURE__ */ jsx(MagnifyingGlass, { className: "size-4" }) })]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5 overflow-auto",
+					children: [options.map((option) => {
+						const isSelected = localValues.includes(option.value);
+						const isDisabled = isMaxReached && !isSelected;
+						return /* @__PURE__ */ jsxs("label", {
+							className: cn("flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm", !isDisabled && "hover:bg-sf-tint", isDisabled && "cursor-not-allowed opacity-50"),
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								checked: isSelected,
+								disabled: isDisabled,
+								onCheckedChange: (checked) => {
+									if (checked) handleValueChange([...localValues, option.value]);
+									else handleValueChange(localValues.filter((v) => v !== option.value));
+								}
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [option.icon, option.label]
+							})]
+						}, String(option.value));
+					}), options.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: "py-4 text-center text-sm text-sf-subtle",
+						children: i18n.noResults
+					})]
+				}),
+				isMaxReached && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-sf-subtle",
+					children: i18n.maxSelectionsReached
+				}),
+				validationError && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-sf-danger",
+					children: validationError
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 border-t border-sf-line pt-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: onClose,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: handleApply,
+						children: "Apply"
+					})]
+				})
+			]
+		});
+	}
+	if (field.type === "custom" && field.customRenderer) {
+		const props = {
+			values: localValues,
+			onChange: handleValueChange,
+			options: field.options,
+			placeholder: field.placeholder,
+			field,
+			operator: "is"
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 p-2",
+			children: [field.customRenderer(props), /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: onClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: handleApply,
+					children: "Apply"
+				})]
+			})]
+		});
+	}
+	return null;
+}
+function FilterItem({ filter, field, size, i18n, onRemove, onOperatorChange, onValuesChange }) {
+	const [valuePopoverOpen, setValuePopoverOpen] = useState(false);
+	const operators = useMemo(() => getFieldOperators(field), [field]);
+	const sizeClasses = {
+		sm: "text-xs py-0.5 px-1.5",
+		default: "text-sm py-1 px-2",
+		lg: "text-base py-1.5 px-2.5"
+	};
+	const displayValue = useMemo(() => {
+		if (field.customValueRenderer) return field.customValueRenderer(filter.values, field.options);
+		return formatFilterValue(filter.values, field);
+	}, [field, filter.values]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-0 rounded-md border border-sf-line bg-sf-tint", sizeClasses[size]),
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 whitespace-nowrap font-medium text-sf-default",
+				children: [field.icon, field.label]
+			}),
+			/* @__PURE__ */ jsx("span", { className: "mx-1.5 h-3 w-px bg-sf-fill" }),
+			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Trigger, {
+				className: "inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-sf-strong hover:text-sf-default",
+				children: [operators.find((o) => o.value === filter.operator)?.label ?? filter.operator, /* @__PURE__ */ jsx(CaretDown, { className: "size-3" })]
+			}), /* @__PURE__ */ jsx(DropdownMenu.Content, { children: operators.map((op) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+				selected: filter.operator === op.value,
+				onClick: () => onOperatorChange(op.value),
+				children: op.label
+			}, op.value)) })] }),
+			/* @__PURE__ */ jsx("span", { className: "mx-1.5 h-3 w-px bg-sf-fill" }),
+			/* @__PURE__ */ jsxs(Popover, {
+				open: valuePopoverOpen,
+				onOpenChange: setValuePopoverOpen,
+				children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+					asChild: true,
+					className: "inline-flex cursor-pointer items-center gap-1 whitespace-nowrap text-sf-strong hover:text-sf-default",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": i18n.changeValue,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "max-w-32 truncate",
+							children: filter.values.length === 0 ? i18n.noValueLabel : displayValue
+						}), /* @__PURE__ */ jsx(CaretDown, { className: "size-3" })]
+					})
+				}), /* @__PURE__ */ jsx(Popover.Content, {
+					className: "w-auto min-w-48",
+					children: /* @__PURE__ */ jsx(FilterValueEditor, {
+						field,
+						values: filter.values,
+						onChange: onValuesChange,
+						onClose: () => setValuePopoverOpen(false),
+						i18n
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRemove,
+				"aria-label": i18n.removeFilter,
+				className: "ml-1.5 inline-flex items-center justify-center rounded p-0.5 text-sf-subtle hover:bg-sf-overlay hover:text-sf-default",
+				children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+			})
+		]
+	});
+}
+function FilterAddMenu({ fields, filters, size, trigger, showSearchInput = true, allowMultiple = true, i18n, onAddFilter }) {
+	const [open, setOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const groupedFields = useMemo(() => groupFields(fields), [fields]);
+	const availableFields = useMemo(() => {
+		if (allowMultiple) return fields;
+		const usedKeys = new Set(filters.map((f) => f.field));
+		return fields.filter((f) => !usedKeys.has(f.key));
+	}, [
+		fields,
+		filters,
+		allowMultiple
+	]);
+	const filteredGroups = useMemo(() => {
+		if (!searchQuery) return groupedFields;
+		const filtered = /* @__PURE__ */ new Map();
+		for (const [group, groupFields] of groupedFields) {
+			const matching = groupFields.filter((f) => f.label.toLowerCase().includes(searchQuery.toLowerCase()) || f.key.toLowerCase().includes(searchQuery.toLowerCase()));
+			if (matching.length > 0) filtered.set(group, matching);
+		}
+		return filtered;
+	}, [groupedFields, searchQuery]);
+	const handleFieldClick = useCallback((field) => {
+		const operator = field.defaultOperator ?? getDefaultOperatorForFieldType(field.type, field.operators);
+		onAddFilter(createFilter(field.key, operator, []));
+		setOpen(false);
+		setSearchQuery("");
+	}, [onAddFilter]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: trigger ?? /* @__PURE__ */ jsxs(Button, {
+				variant: "secondary",
+				size: "sm",
+				className: cn("inline-flex items-center gap-1 whitespace-nowrap", {
+					sm: "text-xs h-7 px-2",
+					default: "text-sm h-8 px-2.5",
+					lg: "text-base h-9 px-3"
+				}[size]),
+				children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), i18n.addFilter]
+			})
+		}), /* @__PURE__ */ jsxs(Popover.Content, {
+			className: "w-64 p-2",
+			children: [showSearchInput && /* @__PURE__ */ jsx("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ jsxs(InputGroup, {
+					className: "w-full",
+					children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						placeholder: i18n.searchPlaceholder,
+						className: "w-full"
+					}), /* @__PURE__ */ jsx(InputGroup.Button, { children: /* @__PURE__ */ jsx(MagnifyingGlass, { className: "size-4" }) })]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-72 overflow-auto",
+				children: filteredGroups.size === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "py-4 text-center text-sm text-sf-subtle",
+					children: i18n.noResults
+				}) : Array.from(filteredGroups.entries()).map(([group, groupFields], groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
+					groupIndex > 0 && /* @__PURE__ */ jsx("div", { className: "my-2 h-px bg-sf-line" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "mb-1 px-2 text-xs font-medium text-sf-subtle",
+						children: group
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-0.5",
+						children: groupFields.map((field) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => handleFieldClick(field),
+							disabled: !availableFields.some((f) => f.key === field.key),
+							className: cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm", "hover:bg-sf-tint", "disabled:cursor-not-allowed disabled:opacity-50"),
+							children: [field.icon, field.label]
+						}, field.key))
+					})
+				] }, group))
+			})]
+		})]
+	});
+}
+/**
+* Filters component for building and managing active filter conditions.
+*
+* Supports multiple filter types (text, select, multiselect, custom), operators,
+* and an "Add Filter" popover interface. Designed to work standalone or with
+* DataGrid for advanced data filtering.
+*
+* @example
+* ```tsx
+* const [filters, setFilters] = useState<Filter[]>([]);
+* const fields: FilterFieldConfig[] = [
+*   { key: "status", label: "Status", type: "select", options: [
+*     { value: "active", label: "Active" },
+*     { value: "inactive", label: "Inactive" },
+*   ]},
+*   { key: "name", label: "Name", type: "text" },
+* ];
+*
+* <Filters
+*   filters={filters}
+*   fields={fields}
+*   onChange={setFilters}
+* />
+* ```
+*/
+function Filters({ filters, fields, onChange, size = SF_FILTERS_DEFAULT_VARIANTS.size, trigger, showSearchInput = true, allowMultiple = true, enableShortcut = true, shortcutKey = "k", shortcutLabel, i18n: i18nProp, className, menuPopupClassName }) {
+	const i18n = useMemo(() => mergeI18n(i18nProp), [i18nProp]);
+	useEffect(() => {
+		if (!enableShortcut) return;
+		const handleKeyDown = (e) => {
+			if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) e.preventDefault();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [enableShortcut, shortcutKey]);
+	const handleAddFilter = useCallback((filter) => {
+		onChange([...filters, filter]);
+	}, [filters, onChange]);
+	const handleRemoveFilter = useCallback((id) => {
+		onChange(filters.filter((f) => f.id !== id));
+	}, [filters, onChange]);
+	const handleOperatorChange = useCallback((id, operator) => {
+		onChange(filters.map((f) => f.id === id ? {
+			...f,
+			operator
+		} : f));
+	}, [filters, onChange]);
+	const handleValuesChange = useCallback((id, values) => {
+		onChange(filters.map((f) => f.id === id ? {
+			...f,
+			values
+		} : f));
+	}, [filters, onChange]);
+	const handleClearAll = useCallback(() => {
+		onChange([]);
+	}, [onChange]);
+	const fieldMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const field of fields) map.set(field.key, field);
+		return map;
+	}, [fields]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-center gap-2", className),
+		children: [
+			filters.map((filter) => {
+				const field = fieldMap.get(filter.field);
+				if (!field) return null;
+				return /* @__PURE__ */ jsx(FilterItem, {
+					filter,
+					field,
+					size,
+					i18n,
+					onRemove: () => handleRemoveFilter(filter.id),
+					onOperatorChange: (op) => handleOperatorChange(filter.id, op),
+					onValuesChange: (vals) => handleValuesChange(filter.id, vals)
+				}, filter.id);
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: menuPopupClassName,
+				children: /* @__PURE__ */ jsx(FilterAddMenu, {
+					fields,
+					filters,
+					size,
+					trigger,
+					showSearchInput,
+					allowMultiple,
+					i18n,
+					onAddFilter: handleAddFilter
+				})
+			}),
+			filters.length > 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: handleClearAll,
+				className: "text-sf-subtle hover:text-sf-default",
+				children: i18n.clearAll
+			}),
+			enableShortcut && shortcutLabel && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto text-xs text-sf-subtle",
+				children: shortcutLabel
+			})
+		]
+	});
+}
+Filters.displayName = "Filters";
+//#endregion
+export { validateFilterValue as _, DEFAULT_MULTISELECT_OPERATORS as a, DEFAULT_TEXT_OPERATORS as c, formatFilterValue as d, getFieldByKey as f, mergeI18n as g, groupFields as h, DEFAULT_I18N as i, createFilter as l, getValueLabel as m, SF_FILTERS_DEFAULT_VARIANTS as n, DEFAULT_OPERATORS as o, getFieldOperators as p, SF_FILTERS_VARIANTS as r, DEFAULT_SELECT_OPERATORS as s, Filters as t, createFilterGroup as u };
+
+//# sourceMappingURL=filters-BdBogf7D.js.map