@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/filter.js

@@ -0,0 +1,775 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Field, FieldError } from "./field.js";
+import { Plus, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/filter.tsx
+const emptyFilterState = {
+	appliedCount: 0,
+	errors: {},
+	ids: [],
+	rows: {}
+};
+const conditionsByType = {
+	boolean: [{
+		id: "equals",
+		name: "Equals"
+	}],
+	date: [
+		{
+			id: "equals",
+			name: "Equals"
+		},
+		{
+			id: "lessThan",
+			name: "Less Than"
+		},
+		{
+			id: "greaterThan",
+			name: "Greater Than"
+		}
+	],
+	multiSelect: [{
+		id: "equals",
+		name: "Equals"
+	}],
+	number: [
+		{
+			id: "equals",
+			name: "Equals"
+		},
+		{
+			id: "lessThan",
+			name: "Less Than"
+		},
+		{
+			id: "greaterThan",
+			name: "Greater Than"
+		}
+	],
+	select: [{
+		id: "equals",
+		name: "Equals"
+	}],
+	text: [{
+		id: "contains",
+		name: "Contains"
+	}, {
+		id: "equals",
+		name: "Equals"
+	}]
+};
+const RANGE_CONDITION = "range";
+function getValueError(value) {
+	if (typeof value === "undefined") return "Value is required";
+	if (Array.isArray(value) && value.length === 0) return "Value is required";
+	if (typeof value === "string" && value.trim() === "") return "Value is required";
+	if (typeof value === "object" && !Array.isArray(value) && value !== null) {
+		const rangeValue = getRangeValue(value);
+		if (!rangeValue) return "Value is required";
+		if (typeof rangeValue.min === "number" && typeof rangeValue.max === "number" && rangeValue.min > rangeValue.max) return "Min cannot be greater than max";
+	}
+}
+function getRowItemError(item, row) {
+	if (item === "field") return row.field ? void 0 : "Field is required";
+	if (item === "condition") return row.condition ? void 0 : "Condition is required";
+	return getValueError(row.value);
+}
+function getRowErrors(row) {
+	const errors = {};
+	for (const item of [
+		"field",
+		"condition",
+		"value"
+	]) {
+		const error = getRowItemError(item, row);
+		if (error) errors[item] = error;
+	}
+	return errors;
+}
+function withRowItemError(errors, id, item, row, clearItems = []) {
+	const rowErrors = { ...errors[id] };
+	for (const clearItem of clearItems) delete rowErrors[clearItem];
+	const itemError = getRowItemError(item, row);
+	if (itemError) rowErrors[item] = itemError;
+	else delete rowErrors[item];
+	const nextErrors = { ...errors };
+	if (Object.keys(rowErrors).length) nextErrors[id] = rowErrors;
+	else delete nextErrors[id];
+	return nextErrors;
+}
+function filterReducer(state, action) {
+	switch (action.type) {
+		case "replace-state": return action.state;
+		case "add-row":
+			if (state.ids.includes(action.id)) return state;
+			return {
+				...state,
+				ids: [...state.ids, action.id],
+				rows: {
+					...state.rows,
+					[action.id]: action.row
+				}
+			};
+		case "remove-row": {
+			const rows = { ...state.rows };
+			const errors = { ...state.errors };
+			delete rows[action.id];
+			delete errors[action.id];
+			return {
+				...state,
+				errors,
+				ids: state.ids.filter((id) => id !== action.id),
+				rows
+			};
+		}
+		case "set-row-field": {
+			if (!state.rows[action.id]) return state;
+			const row = {
+				field: action.field,
+				condition: action.condition,
+				value: void 0
+			};
+			return {
+				...state,
+				errors: withRowItemError(state.errors, action.id, "field", row, ["condition", "value"]),
+				rows: {
+					...state.rows,
+					[action.id]: row
+				}
+			};
+		}
+		case "set-row-condition": {
+			const currentRow = state.rows[action.id];
+			if (!currentRow) return state;
+			const row = {
+				...currentRow,
+				condition: action.condition
+			};
+			return {
+				...state,
+				errors: withRowItemError(state.errors, action.id, "condition", row),
+				rows: {
+					...state.rows,
+					[action.id]: row
+				}
+			};
+		}
+		case "set-row-value": {
+			const currentRow = state.rows[action.id];
+			if (!currentRow) return state;
+			const row = {
+				...currentRow,
+				value: action.value
+			};
+			return {
+				...state,
+				errors: withRowItemError(state.errors, action.id, "value", row),
+				rows: {
+					...state.rows,
+					[action.id]: row
+				}
+			};
+		}
+		case "apply": {
+			const hasErrors = Object.keys(action.errors).length > 0;
+			return {
+				...state,
+				appliedCount: hasErrors ? state.appliedCount : state.ids.length,
+				errors: action.errors
+			};
+		}
+		case "reset": return emptyFilterState;
+	}
+}
+const FilterContext = React.createContext(null);
+function useFilterContext() {
+	const context = React.useContext(FilterContext);
+	if (!context) throw new Error("Filter components must be rendered inside <Filter />.");
+	return context;
+}
+function Filter({ children, defaultJoin = "AND", fields, onApply, defaultValue = "" }) {
+	const [state, dispatch] = React.useReducer(filterReducer, void 0, () => buildStateFromSerializedFilters(defaultValue, fields));
+	const contentRef = React.useRef(null);
+	const loadedOptionsCache = React.useRef(/* @__PURE__ */ new Map());
+	const fieldsRef = React.useRef(fields);
+	fieldsRef.current = fields;
+	const fieldSignature = fields.map((field) => `${field.field}:${field.type}`).join("");
+	const lastDefaultValueRef = React.useRef(defaultValue);
+	const lastFieldSignatureRef = React.useRef(fieldSignature);
+	React.useEffect(() => {
+		if (lastDefaultValueRef.current === defaultValue && lastFieldSignatureRef.current === fieldSignature) return;
+		lastDefaultValueRef.current = defaultValue;
+		lastFieldSignatureRef.current = fieldSignature;
+		loadedOptionsCache.current.clear();
+		dispatch({
+			type: "replace-state",
+			state: buildStateFromSerializedFilters(defaultValue, fieldsRef.current)
+		});
+	}, [defaultValue, fieldSignature]);
+	const value = React.useMemo(() => ({
+		contentRef,
+		defaultJoin,
+		dispatch,
+		fields,
+		loadedOptionsCache,
+		onApply,
+		state
+	}), [
+		defaultJoin,
+		fields,
+		onApply,
+		state
+	]);
+	return /* @__PURE__ */ jsx(FilterContext.Provider, {
+		value,
+		children
+	});
+}
+function FilterTrigger({ children, className, countClassName, hideCountWhenZero = true, render }) {
+	const { state } = useFilterContext();
+	const appliedCount = state.appliedCount;
+	if (render) return /* @__PURE__ */ jsx(Fragment, { children: render({ count: appliedCount }) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [children, (appliedCount > 0 || !hideCountWhenZero) && /* @__PURE__ */ jsx("span", {
+			className: cn("absolute left-0 top-0 inline-flex size-5 translate-y-[-40%] items-center justify-center rounded-full bg-action-primary text-xs font-bold leading-none text-fg-on-brand", countClassName),
+			children: appliedCount
+		})]
+	});
+}
+let rowIdCounter = 0;
+function createRow(fieldConfig) {
+	return {
+		field: fieldConfig?.field ?? "",
+		condition: fieldConfig?.type === "range" ? RANGE_CONDITION : ""
+	};
+}
+function FilterContent({ addFilterLabel = "Add Filter", className, label = "Where" }) {
+	const { contentRef, dispatch, fields, state } = useFilterContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref: contentRef,
+		className: cn("max-h-80 space-y-4 overflow-y-auto pb-6", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-y-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-bold uppercase",
+					children: label
+				}),
+				!!state.ids.length && /* @__PURE__ */ jsx("div", {
+					className: "flex w-full flex-col gap-y-4",
+					children: state.ids.map((rowId) => /* @__PURE__ */ jsx(FilterRow, { id: rowId }, rowId))
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "ghost",
+					className: "w-fit gap-1.5 px-0 text-fg-brand hover:bg-transparent hover:text-action-secondary active:bg-transparent",
+					onClick: () => {
+						rowIdCounter += 1;
+						dispatch({
+							type: "add-row",
+							id: `filter-row-${rowIdCounter}`,
+							row: createRow(fields[0])
+						});
+					},
+					children: [/* @__PURE__ */ jsx(Plus, {}), addFilterLabel]
+				})
+			]
+		})
+	});
+}
+function FilterRow({ id }) {
+	const { dispatch, fields, state } = useFilterContext();
+	const row = state.rows[id];
+	const fieldConfig = fields.find((config) => config.field === row?.field);
+	if (!row || !fieldConfig) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-4 md:gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "grid flex-1 grid-cols-1 gap-4 md:grid-cols-3",
+			children: [
+				/* @__PURE__ */ jsx(FilterRowField, {
+					id,
+					row
+				}),
+				fieldConfig.type !== "range" && /* @__PURE__ */ jsx(FilterRowCondition, {
+					id,
+					row,
+					fieldType: fieldConfig.type
+				}),
+				/* @__PURE__ */ jsx(FilterRowValue, {
+					id,
+					row,
+					fieldConfig
+				})
+			]
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			onClick: () => dispatch({
+				type: "remove-row",
+				id
+			}),
+			children: /* @__PURE__ */ jsx(X, {})
+		})]
+	});
+}
+function FilterRowField({ id, row }) {
+	const { dispatch, fields, state } = useFilterContext();
+	const error = state.errors[id]?.field;
+	const options = fields.map((config) => ({
+		label: config.label,
+		value: config.field
+	}));
+	return /* @__PURE__ */ jsxs(Field, {
+		className: "w-full flex-1",
+		children: [/* @__PURE__ */ jsxs(Select, {
+			value: row.field,
+			onValueChange: (nextValue) => {
+				const nextField = typeof nextValue === "string" ? nextValue : "";
+				const nextConfig = fields.find((config) => config.field === nextField);
+				dispatch({
+					type: "set-row-field",
+					id,
+					field: nextField,
+					condition: nextConfig?.type === "range" ? RANGE_CONDITION : ""
+				});
+			},
+			items: options,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "w-full",
+				"aria-invalid": !!error,
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: option.label
+			}, option.value)) })]
+		}), error && /* @__PURE__ */ jsx(FieldError, { children: error })]
+	});
+}
+function FilterRowCondition({ id, row, fieldType }) {
+	const { dispatch, state } = useFilterContext();
+	const error = state.errors[id]?.condition;
+	const conditions = fieldType === "range" ? [] : conditionsByType[fieldType] ?? [];
+	return /* @__PURE__ */ jsxs(Field, {
+		className: "w-full flex-1",
+		children: [/* @__PURE__ */ jsxs(Select, {
+			value: row.condition,
+			onValueChange: (nextValue) => dispatch({
+				type: "set-row-condition",
+				id,
+				condition: typeof nextValue === "string" ? nextValue : ""
+			}),
+			items: conditions.map((condition) => ({
+				value: condition.id,
+				label: condition.name
+			})),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "w-full",
+				"aria-invalid": !!error,
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select condition" })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: conditions.map((condition) => /* @__PURE__ */ jsx(SelectItem, {
+				value: condition.id,
+				children: condition.name
+			}, condition.id)) })]
+		}), error && /* @__PURE__ */ jsx(FieldError, { children: error })]
+	});
+}
+function FilterRowValue({ id, row, fieldConfig }) {
+	const { dispatch, state } = useFilterContext();
+	const error = state.errors[id]?.value;
+	const valueProps = {
+		field: fieldConfig,
+		value: row.value,
+		onChange: (value) => dispatch({
+			type: "set-row-value",
+			id,
+			value
+		}),
+		invalid: !!error,
+		error
+	};
+	return /* @__PURE__ */ jsxs(Field, {
+		className: cn("w-full flex-1", { "md:col-span-2": fieldConfig.type === "range" }),
+		children: [fieldConfig.renderValue ? fieldConfig.renderValue(valueProps) : /* @__PURE__ */ jsx(FilterBuiltInValue, { ...valueProps }), error && /* @__PURE__ */ jsx(FieldError, { children: error })]
+	});
+}
+function FilterBuiltInValue(props) {
+	const { field } = props;
+	switch (field.type) {
+		case "text": return /* @__PURE__ */ jsx(FilterValueText, {
+			...props,
+			placeholder: `Enter ${field.label} value`
+		});
+		case "number": return /* @__PURE__ */ jsx(FilterValueNumber, {
+			...props,
+			placeholder: `Enter ${field.label} value`
+		});
+		case "date": return /* @__PURE__ */ jsx(FilterValueDate, { ...props });
+		case "boolean": return /* @__PURE__ */ jsx(FilterValueBoolean, {
+			...props,
+			placeholder: `Select ${field.label}`
+		});
+		case "range": return /* @__PURE__ */ jsx(FilterValueRange, { ...props });
+		case "select":
+		case "multiSelect": {
+			const multiple = field.type === "multiSelect";
+			const placeholder = `Select ${field.label}`;
+			if (field.loadOptions) return /* @__PURE__ */ jsx(FilterLoadedValueSelect, {
+				...props,
+				multiple,
+				placeholder
+			});
+			return /* @__PURE__ */ jsx(FilterValueSelect, {
+				...props,
+				multiple,
+				options: field.options ?? [],
+				placeholder
+			});
+		}
+	}
+}
+function FilterValueText({ value, onChange, invalid, placeholder }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "text",
+		placeholder,
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => onChange(event.target.value),
+		"aria-invalid": !!invalid
+	});
+}
+function FilterValueNumber({ value, onChange, invalid, placeholder }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "number",
+		placeholder,
+		value: typeof value === "number" ? String(value) : "",
+		onChange: (event) => onChange(event.target.value === "" ? void 0 : Number(event.target.value)),
+		"aria-invalid": !!invalid
+	});
+}
+function FilterValueDate({ value, onChange, invalid }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type: "date",
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => onChange(event.target.value),
+		"aria-invalid": !!invalid
+	});
+}
+function FilterValueBoolean({ value, onChange, invalid, placeholder, trueLabel = "Yes", falseLabel = "No" }) {
+	const items = [{
+		label: trueLabel,
+		value: "true"
+	}, {
+		label: falseLabel,
+		value: "false"
+	}];
+	return /* @__PURE__ */ jsxs(Select, {
+		value: typeof value === "boolean" ? String(value) : "",
+		onValueChange: (nextValue) => onChange(nextValue === "true"),
+		items,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "w-full",
+			"aria-invalid": !!invalid,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			value: item.value,
+			children: item.label
+		}, item.value)) })]
+	});
+}
+function FilterValueRange({ value, onChange, invalid }) {
+	const rangeValue = getRangeValue(value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				type: "number",
+				placeholder: "Min",
+				value: typeof rangeValue?.min === "number" ? rangeValue.min : "",
+				onChange: (event) => onChange(mergeRangeValue(rangeValue, "min", event.target.value)),
+				className: "flex-1",
+				"aria-invalid": !!invalid
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-fg-secondary",
+				children: "to"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "number",
+				placeholder: "Max",
+				value: typeof rangeValue?.max === "number" ? rangeValue.max : "",
+				onChange: (event) => onChange(mergeRangeValue(rangeValue, "max", event.target.value)),
+				className: "flex-1",
+				"aria-invalid": !!invalid
+			})
+		]
+	});
+}
+function FilterValueSelect({ value, onChange, invalid, placeholder, options, multiple = false, loading = false, emptyMessage = "No options available", open, onOpenChange }) {
+	const toOptionValue = (itemValue) => {
+		return options.find((entry) => String(entry.value) === itemValue)?.value ?? itemValue;
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		multiple,
+		open,
+		onOpenChange,
+		value: multiple ? Array.isArray(value) ? value.map(String) : [] : typeof value === "string" || typeof value === "number" ? String(value) : "",
+		onValueChange: (nextValue) => {
+			if (Array.isArray(nextValue)) {
+				onChange(nextValue.map(toOptionValue));
+				return;
+			}
+			onChange(typeof nextValue === "string" ? toOptionValue(nextValue) : void 0);
+		},
+		items: options.map((option) => ({
+			label: option.label,
+			value: String(option.value)
+		})),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "w-full",
+			"aria-invalid": !!invalid,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: loading ? /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-2 text-sm text-fg-secondary",
+			children: "Loading..."
+		}) : options.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-2 text-sm text-fg-secondary",
+			children: emptyMessage
+		}) : options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: String(option.value),
+			children: option.label
+		}, option.value)) })]
+	});
+}
+/**
+* Select whose options come from `field.loadOptions`. Nothing is fetched
+* until the dropdown opens; results are cached per field on the nearest
+* <Filter /> so other rows using the same field reuse them.
+*/
+function FilterLoadedValueSelect({ field, multiple, placeholder, ...props }) {
+	const { loadedOptionsCache } = useFilterContext();
+	const [open, setOpen] = React.useState(false);
+	const [loading, setLoading] = React.useState(false);
+	const [loadedOptions, setLoadedOptions] = React.useState(null);
+	const mountedRef = React.useRef(true);
+	const fieldRef = React.useRef(field.field);
+	React.useEffect(() => {
+		return () => {
+			mountedRef.current = false;
+		};
+	}, []);
+	React.useEffect(() => {
+		fieldRef.current = field.field;
+		setOpen(false);
+		setLoading(false);
+		setLoadedOptions(null);
+	}, [field.field]);
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen || loadedOptions || !field.loadOptions) return;
+		const cache = loadedOptionsCache.current;
+		const pending = cache.get(field.field) ?? field.loadOptions();
+		cache.set(field.field, pending);
+		setLoading(true);
+		pending.then((options) => {
+			if (mountedRef.current && fieldRef.current === field.field) setLoadedOptions(options);
+		}).catch(() => {
+			if (cache.get(field.field) === pending) cache.delete(field.field);
+		}).finally(() => {
+			if (mountedRef.current && fieldRef.current === field.field) setLoading(false);
+		});
+	};
+	return /* @__PURE__ */ jsx(FilterValueSelect, {
+		...props,
+		multiple,
+		placeholder,
+		options: loadedOptions ?? field.options ?? [],
+		loading: loading && !loadedOptions,
+		open,
+		onOpenChange: handleOpenChange
+	});
+}
+function FilterApplyButton({ children = "Apply Filter", className, onApplySuccess }) {
+	const { contentRef, defaultJoin, dispatch, fields, onApply, state } = useFilterContext();
+	return /* @__PURE__ */ jsx(Button, {
+		className,
+		onClick: () => {
+			const errors = {};
+			for (const id of state.ids) {
+				const row = state.rows[id];
+				if (!row) continue;
+				const rowErrors = getRowErrors(row);
+				if (Object.keys(rowErrors).length) errors[id] = rowErrors;
+			}
+			dispatch({
+				type: "apply",
+				errors
+			});
+			if (Object.keys(errors).length) {
+				focusFirstInvalidFilterItem(contentRef.current);
+				return;
+			}
+			const filters = serializeFilters({
+				defaultJoin,
+				fields,
+				ids: state.ids,
+				rows: state.rows
+			});
+			onApply(filters.length ? JSON.stringify(filters) : "", filters);
+			onApplySuccess?.();
+		},
+		children
+	});
+}
+function FilterResetButton({ children = "Reset Filter", className, onReset }) {
+	const { dispatch, onApply } = useFilterContext();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "tertiary-outline",
+		className,
+		onClick: () => {
+			dispatch({ type: "reset" });
+			onApply("", []);
+			onReset?.();
+		},
+		children
+	});
+}
+function focusFirstInvalidFilterItem(root) {
+	setTimeout(() => {
+		const invalidItem = (root ?? document).querySelector("[aria-invalid=true]");
+		if (invalidItem instanceof HTMLButtonElement) {
+			invalidItem.click();
+			return;
+		}
+		if (invalidItem instanceof HTMLInputElement) invalidItem.focus();
+	}, 0);
+}
+function serializeFilters({ defaultJoin, fields, ids, rows }) {
+	return ids.flatMap((id) => {
+		const row = rows[id];
+		if (!row) return [];
+		const fieldConfig = fields.find((config) => config.field === row.field);
+		if (!fieldConfig) return [];
+		return serializeRow(defaultJoin, fieldConfig, row);
+	});
+}
+function serializeRow(defaultJoin, fieldConfig, row) {
+	if (fieldConfig.type === "range") {
+		const rangeValue = getRangeValue(row.value);
+		if (!rangeValue) return [];
+		return [...typeof rangeValue.min === "number" ? [{
+			connector: defaultJoin,
+			field: row.field,
+			action: "greaterThan",
+			value: rangeValue.min
+		}] : [], ...typeof rangeValue.max === "number" ? [{
+			connector: defaultJoin,
+			field: row.field,
+			action: "lessThan",
+			value: rangeValue.max
+		}] : []];
+	}
+	if (!isFilterCondition(row.condition) || typeof row.value === "undefined") return [];
+	return [{
+		connector: defaultJoin,
+		field: row.field,
+		action: row.condition,
+		value: row.value
+	}];
+}
+/**
+* Parse a serialized filter string (as produced by `onApply`) back into
+* structured filters. Invalid or malformed entries are dropped.
+*/
+function parseSerializedFilters(value) {
+	if (!value.trim()) return [];
+	try {
+		const parsed = JSON.parse(value);
+		if (!Array.isArray(parsed)) return [];
+		return parsed.filter(isSerializedFilter);
+	} catch {
+		return [];
+	}
+}
+function buildStateFromSerializedFilters(value, fields) {
+	const parsedFilters = parseSerializedFilters(value);
+	if (!parsedFilters.length) return emptyFilterState;
+	const ids = [];
+	const rows = {};
+	for (let index = 0; index < parsedFilters.length; index += 1) {
+		const currentFilter = parsedFilters[index];
+		const fieldConfig = fields.find((config) => config.field === currentFilter.field);
+		if (!fieldConfig) continue;
+		const rowId = `${currentFilter.field}-${index}`;
+		if (fieldConfig.type === "range") {
+			const rangeValue = {};
+			if (currentFilter.action === "greaterThan" && typeof currentFilter.value === "number") rangeValue.min = currentFilter.value;
+			if (currentFilter.action === "lessThan" && typeof currentFilter.value === "number") rangeValue.max = currentFilter.value;
+			const nextFilter = parsedFilters[index + 1];
+			if (nextFilter && nextFilter.field === currentFilter.field && nextFilter.connector === currentFilter.connector) {
+				if (nextFilter.action === "greaterThan" && typeof nextFilter.value === "number") {
+					rangeValue.min = nextFilter.value;
+					index += 1;
+				} else if (nextFilter.action === "lessThan" && typeof nextFilter.value === "number") {
+					rangeValue.max = nextFilter.value;
+					index += 1;
+				}
+			}
+			ids.push(rowId);
+			rows[rowId] = {
+				field: currentFilter.field,
+				condition: RANGE_CONDITION,
+				value: rangeValue
+			};
+			continue;
+		}
+		ids.push(rowId);
+		rows[rowId] = {
+			field: currentFilter.field,
+			condition: currentFilter.action,
+			value: currentFilter.value
+		};
+	}
+	return {
+		appliedCount: ids.length,
+		errors: {},
+		ids,
+		rows
+	};
+}
+function isSerializedFilter(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const filter = value;
+	return (filter.connector === "AND" || filter.connector === "OR") && typeof filter.field === "string" && isFilterCondition(filter.action) && isSerializedFilterValue(filter.value);
+}
+function isFilterCondition(action) {
+	return action === "equals" || action === "greaterThan" || action === "lessThan" || action === "contains";
+}
+function isSerializedFilterValue(value) {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || Array.isArray(value) && value.every((item) => typeof item === "string" || typeof item === "number");
+}
+function getRangeValue(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return;
+	const rangeValue = value;
+	const min = typeof rangeValue.min === "number" && Number.isFinite(rangeValue.min) ? rangeValue.min : void 0;
+	const max = typeof rangeValue.max === "number" && Number.isFinite(rangeValue.max) ? rangeValue.max : void 0;
+	if (typeof min === "undefined" && typeof max === "undefined") return;
+	return {
+		min,
+		max
+	};
+}
+function mergeRangeValue(currentValue, boundary, rawValue) {
+	return getRangeValue({
+		...currentValue,
+		[boundary]: rawValue === "" ? void 0 : Number(rawValue)
+	});
+}
+//#endregion
+export { Filter, FilterApplyButton, FilterContent, FilterResetButton, FilterTrigger, FilterValueBoolean, FilterValueDate, FilterValueNumber, FilterValueRange, FilterValueSelect, FilterValueText, parseSerializedFilters };