@m5kdev/web-ui 0.7.0 → 0.8.2

package/dist/src/modules/table/components/TableFiltering.js

@@ -1,236 +1,418 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DatePicker, DateRangePicker, Input, Select, SelectItem, } from "@heroui/react";
-import { getLocalTimeZone, today } from "@internationalized/date";
+import { Button as Button$1 } from "../../../components/ui/button.js";
+import { transformFiltersFromHeroUI, transformFiltersToHeroUI } from "../filterTransformers.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { PlusIcon, XIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button } from "../../../components/ui/button";
-import { transformFiltersFromHeroUI, transformFiltersToHeroUI, } from "../filterTransformers";
+import { DatePicker, DateRangePicker, Input, Select, SelectItem } from "@heroui/react";
+import { getLocalTimeZone, today } from "@internationalized/date";
+//#region src/modules/table/components/TableFiltering.tsx
 const componentForFilterMethod = {
-    text: (value, onChange) => (_jsx(Input, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? "", onChange: (e) => onChange(e.target.value) })),
-    number: (value, onChange) => (_jsx(Input, { size: "sm", "aria-label": "Select Value", type: "number", className: "flex-1 min-w-0 text-sm", value: value?.toString() ?? "", onChange: (e) => onChange(Number.parseFloat(e.target.value) || 0) })),
-    date: (value, onChange) => (_jsx(DatePicker, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? undefined, onChange: (date) => date && onChange(date), maxValue: today(getLocalTimeZone()) })),
-    range: (value, onChange) => (_jsx(DateRangePicker, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? undefined, onChange: (range) => range && onChange(range), maxValue: today(getLocalTimeZone()) })),
-    radio: (value, onChange) => (_jsxs(Select, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", selectedKeys: value ? ["true"] : ["false"], onSelectionChange: (keys) => onChange(keys.currentKey === "true"), children: [_jsx(SelectItem, { className: "text-sm", children: "True" }, "true"), _jsx(SelectItem, { className: "text-sm", children: "False" }, "false")] })),
-    select: (value, onChange, options = []) => (_jsx(Select, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", selectedKeys: value ?? new Set(), onSelectionChange: (keys) => keys && onChange(keys), children: options.map((option) => (_jsx(SelectItem, { className: "text-sm", children: option.label }, option.value))) })),
-    multiSelect: (value, onChange, options = []) => (_jsx(Select, { size: "sm", "aria-label": "Select Value", selectionMode: "multiple", className: "flex-1 min-w-0 text-sm", selectedKeys: value ? new Set(value) : new Set(), onSelectionChange: (keys) => onChange(keys), children: options.map((option) => (_jsx(SelectItem, { className: "text-sm", children: option.label }, option.value))) })),
+	text: (value, onChange) => /* @__PURE__ */ jsx(Input, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? "",
+		onChange: (e) => onChange(e.target.value)
+	}),
+	number: (value, onChange) => /* @__PURE__ */ jsx(Input, {
+		size: "sm",
+		"aria-label": "Select Value",
+		type: "number",
+		className: "flex-1 min-w-0 text-sm",
+		value: value?.toString() ?? "",
+		onChange: (e) => onChange(Number.parseFloat(e.target.value) || 0)
+	}),
+	date: (value, onChange) => /* @__PURE__ */ jsx(DatePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (date) => date && onChange(date),
+		maxValue: today(getLocalTimeZone())
+	}),
+	range: (value, onChange) => /* @__PURE__ */ jsx(DateRangePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (range) => range && onChange(range),
+		maxValue: today(getLocalTimeZone())
+	}),
+	radio: (value, onChange) => /* @__PURE__ */ jsxs(Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ? ["true"] : ["false"],
+		onSelectionChange: (keys) => onChange(keys.currentKey === "true"),
+		children: [/* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: "True"
+		}, "true"), /* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: "False"
+		}, "false")]
+	}),
+	select: (value, onChange, options = []) => /* @__PURE__ */ jsx(Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ?? /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => keys && onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: option.label
+		}, option.value))
+	}),
+	multiSelect: (value, onChange, options = []) => /* @__PURE__ */ jsx(Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		selectionMode: "multiple",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ? new Set(value) : /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: option.label
+		}, option.value))
+	})
 };
 const defaultFilterMethods = {
-    string: [
-        { value: "contains", label: "Contains", component: "text" },
-        { value: "equals", label: "Equals", component: "text" },
-        { value: "starts_with", label: "Starts With", component: "text" },
-        { value: "ends_with", label: "Ends With", component: "text" },
-    ],
-    number: [
-        { value: "equals", label: "Equals", component: "number" },
-        { value: "greater_than", label: "Greater Than", component: "number" },
-        { value: "less_than", label: "Less Than", component: "number" },
-    ],
-    date: [
-        { value: "on", label: "On", component: "date" },
-        { value: "between", label: "Between", component: "range" },
-        { value: "before", label: "Before", component: "date" },
-        { value: "after", label: "After", component: "date" },
-        { value: "intersect", label: "During", component: "range" },
-    ],
-    boolean: [{ value: "equals", label: "Equals", component: "radio" }],
-    enum: [
-        { value: "oneOf", label: "One Of", component: "multiSelect" },
-        { value: "equals", label: "Equals", component: "select" },
-    ],
+	string: [
+		{
+			value: "contains",
+			label: "Contains",
+			component: "text"
+		},
+		{
+			value: "equals",
+			label: "Equals",
+			component: "text"
+		},
+		{
+			value: "starts_with",
+			label: "Starts With",
+			component: "text"
+		},
+		{
+			value: "ends_with",
+			label: "Ends With",
+			component: "text"
+		}
+	],
+	number: [
+		{
+			value: "equals",
+			label: "Equals",
+			component: "number"
+		},
+		{
+			value: "greater_than",
+			label: "Greater Than",
+			component: "number"
+		},
+		{
+			value: "less_than",
+			label: "Less Than",
+			component: "number"
+		}
+	],
+	date: [
+		{
+			value: "on",
+			label: "On",
+			component: "date"
+		},
+		{
+			value: "between",
+			label: "Between",
+			component: "range"
+		},
+		{
+			value: "before",
+			label: "Before",
+			component: "date"
+		},
+		{
+			value: "after",
+			label: "After",
+			component: "date"
+		},
+		{
+			value: "intersect",
+			label: "During",
+			component: "range"
+		}
+	],
+	boolean: [{
+		value: "equals",
+		label: "Equals",
+		component: "radio"
+	}],
+	enum: [{
+		value: "oneOf",
+		label: "One Of",
+		component: "multiSelect"
+	}, {
+		value: "equals",
+		label: "Equals",
+		component: "select"
+	}]
 };
 const SINGLE_FILTER_KEY = "single-filter";
 const mergeFilterMethods = (overrides) => ({
-    string: overrides?.string && overrides.string.length > 0
-        ? overrides.string
-        : defaultFilterMethods.string,
-    number: overrides?.number && overrides.number.length > 0
-        ? overrides.number
-        : defaultFilterMethods.number,
-    date: overrides?.date && overrides.date.length > 0 ? overrides.date : defaultFilterMethods.date,
-    boolean: overrides?.boolean && overrides.boolean.length > 0
-        ? overrides.boolean
-        : defaultFilterMethods.boolean,
-    enum: overrides?.enum && overrides.enum.length > 0 ? overrides.enum : defaultFilterMethods.enum,
+	string: overrides?.string && overrides.string.length > 0 ? overrides.string : defaultFilterMethods.string,
+	number: overrides?.number && overrides.number.length > 0 ? overrides.number : defaultFilterMethods.number,
+	date: overrides?.date && overrides.date.length > 0 ? overrides.date : defaultFilterMethods.date,
+	boolean: overrides?.boolean && overrides.boolean.length > 0 ? overrides.boolean : defaultFilterMethods.boolean,
+	enum: overrides?.enum && overrides.enum.length > 0 ? overrides.enum : defaultFilterMethods.enum
 });
-export const TableFiltering = ({ columns, onFiltersChange, filters: initialFilters = [], onClose, singleFilter = false, filterMethods, }) => {
-    const [filters, setFilters] = useState({});
-    const effectiveFilterMethods = useMemo(() => mergeFilterMethods(filterMethods), [filterMethods]);
-    const createEmptyFilter = useCallback(() => ({
-        columnId: "",
-        type: null,
-        value: null,
-        method: null,
-        options: null,
-        endColumnId: null,
-        periodStartColumnId: null,
-        periodEndColumnId: null,
-    }), []);
-    const addFilter = useCallback(() => {
-        setFilters((prev) => {
-            if (!singleFilter) {
-                const filterId = crypto.randomUUID();
-                return {
-                    ...prev,
-                    [filterId]: createEmptyFilter(),
-                };
-            }
-            // single filter mode
-            return Object.keys(prev).length > 0 ? prev : { [SINGLE_FILTER_KEY]: createEmptyFilter() };
-        });
-    }, [createEmptyFilter, singleFilter]);
-    const removeFilter = useCallback((filterId) => {
-        setFilters((prev) => {
-            if (!singleFilter) {
-                const { [filterId]: _, ...rest } = prev;
-                return rest;
-            }
-            // single filter mode resets the lone filter
-            return { [SINGLE_FILTER_KEY]: createEmptyFilter() };
-        });
-    }, [createEmptyFilter, singleFilter]);
-    const columnsMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
-    useEffect(() => {
-        // Transform initialFilters from FiltersToApply format to HeroUIFilter format
-        const transformedFilters = transformFiltersToHeroUI(initialFilters, columnsMap, effectiveFilterMethods);
-        if (!singleFilter) {
-            setFilters(Object.fromEntries(transformedFilters.map((filter) => [filter.columnId, filter])));
-            return;
-        }
-        const firstFilter = transformedFilters[0];
-        setFilters({
-            [SINGLE_FILTER_KEY]: firstFilter ?? createEmptyFilter(),
-        });
-    }, [createEmptyFilter, initialFilters, singleFilter, columnsMap, effectiveFilterMethods]);
-    const selectColumn = useCallback((filterId, columnId) => {
-        setFilters((prev) => {
-            const oldFilter = prev[filterId];
-            if (!oldFilter)
-                return prev;
-            const column = columnsMap.get(columnId);
-            if (!column)
-                return prev;
-            // If Period column, auto-set intersect method
-            const isPeriodColumn = columnId.endsWith("__period");
-            const intersectMethod = isPeriodColumn
-                ? (effectiveFilterMethods.date.find((m) => m.value === "intersect") ?? null)
-                : null;
-            return {
-                ...prev,
-                [filterId]: {
-                    ...oldFilter,
-                    columnId,
-                    type: column.type ?? null,
-                    options: column.options ?? null,
-                    endColumnId: column.endColumnId ?? null,
-                    periodStartColumnId: column.periodStartColumnId ?? null,
-                    periodEndColumnId: column.periodEndColumnId ?? null,
-                    method: intersectMethod,
-                    value: null,
-                },
-            };
-        });
-    }, [columnsMap, effectiveFilterMethods]);
-    const selectMethod = useCallback((filterId, method) => {
-        setFilters((prev) => {
-            const oldFilter = prev[filterId];
-            if (!oldFilter)
-                return prev;
-            return {
-                ...prev,
-                [filterId]: { ...oldFilter, method, value: null },
-            };
-        });
-    }, []);
-    const selectValue = useCallback((filterId, value) => {
-        setFilters((prev) => {
-            const oldFilter = prev[filterId];
-            if (!oldFilter)
-                return prev;
-            return {
-                ...prev,
-                [filterId]: { ...oldFilter, value },
-            };
-        });
-    }, []);
-    const filterEntries = useMemo(() => Object.entries(filters), [filters]);
-    const availableColumnsMap = useMemo(() => {
-        const map = new Map();
-        filterEntries.forEach(([filterId]) => {
-            const columnsUsedByOtherFilters = new Set(filterEntries
-                .filter(([id]) => id !== filterId)
-                .map(([_, f]) => f.columnId)
-                .filter((id) => id !== ""));
-            map.set(filterId, columns.filter((column) => !columnsUsedByOtherFilters.has(column.id)));
-        });
-        return map;
-    }, [filterEntries, columns]);
-    const applyFilters = useCallback(() => {
-        const heroUIFilters = Object.values(filters);
-        const filtersToApply = transformFiltersFromHeroUI(heroUIFilters);
-        onFiltersChange(filtersToApply);
-        onClose?.();
-    }, [filters, onFiltersChange, onClose]);
-    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 min-w-[600px]", children: [filterEntries.map(([filterId, filter]) => {
-                const availableColumns = availableColumnsMap.get(filterId) ?? columns;
-                return (_jsx(TableFilteringItem, { id: filterId, filter: filter, columns: availableColumns, selectColumn: selectColumn, selectMethod: selectMethod, removeFilter: removeFilter, selectValue: selectValue, filterMethods: effectiveFilterMethods }, filterId));
-            }), !singleFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: addFilter, children: [_jsx(PlusIcon, { className: "h-4 w-4" }), "Add Filter"] })), _jsx(Button, { onClick: applyFilters, children: singleFilter ? "Apply Filter" : "Apply Filters" })] }));
+const TableFiltering = ({ columns, onFiltersChange, filters: initialFilters = [], onClose, singleFilter = false, filterMethods }) => {
+	const [filters, setFilters] = useState({});
+	const effectiveFilterMethods = useMemo(() => mergeFilterMethods(filterMethods), [filterMethods]);
+	const createEmptyFilter = useCallback(() => ({
+		columnId: "",
+		type: null,
+		value: null,
+		method: null,
+		options: null,
+		endColumnId: null,
+		periodStartColumnId: null,
+		periodEndColumnId: null
+	}), []);
+	const addFilter = useCallback(() => {
+		setFilters((prev) => {
+			if (!singleFilter) {
+				const filterId = crypto.randomUUID();
+				return {
+					...prev,
+					[filterId]: createEmptyFilter()
+				};
+			}
+			return Object.keys(prev).length > 0 ? prev : { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+		});
+	}, [createEmptyFilter, singleFilter]);
+	const removeFilter = useCallback((filterId) => {
+		setFilters((prev) => {
+			if (!singleFilter) {
+				const { [filterId]: _, ...rest } = prev;
+				return rest;
+			}
+			return { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+		});
+	}, [createEmptyFilter, singleFilter]);
+	const columnsMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+	useEffect(() => {
+		const transformedFilters = transformFiltersToHeroUI(initialFilters, columnsMap, effectiveFilterMethods);
+		if (!singleFilter) {
+			setFilters(Object.fromEntries(transformedFilters.map((filter) => [filter.columnId, filter])));
+			return;
+		}
+		const firstFilter = transformedFilters[0];
+		setFilters({ [SINGLE_FILTER_KEY]: firstFilter ?? createEmptyFilter() });
+	}, [
+		createEmptyFilter,
+		initialFilters,
+		singleFilter,
+		columnsMap,
+		effectiveFilterMethods
+	]);
+	const selectColumn = useCallback((filterId, columnId) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			const column = columnsMap.get(columnId);
+			if (!column) return prev;
+			const intersectMethod = columnId.endsWith("__period") ? effectiveFilterMethods.date.find((m) => m.value === "intersect") ?? null : null;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					columnId,
+					type: column.type ?? null,
+					options: column.options ?? null,
+					endColumnId: column.endColumnId ?? null,
+					periodStartColumnId: column.periodStartColumnId ?? null,
+					periodEndColumnId: column.periodEndColumnId ?? null,
+					method: intersectMethod,
+					value: null
+				}
+			};
+		});
+	}, [columnsMap, effectiveFilterMethods]);
+	const selectMethod = useCallback((filterId, method) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					method,
+					value: null
+				}
+			};
+		});
+	}, []);
+	const selectValue = useCallback((filterId, value) => {
+		setFilters((prev) => {
+			const oldFilter = prev[filterId];
+			if (!oldFilter) return prev;
+			return {
+				...prev,
+				[filterId]: {
+					...oldFilter,
+					value
+				}
+			};
+		});
+	}, []);
+	const filterEntries = useMemo(() => Object.entries(filters), [filters]);
+	const availableColumnsMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		filterEntries.forEach(([filterId]) => {
+			const columnsUsedByOtherFilters = new Set(filterEntries.filter(([id]) => id !== filterId).map(([_, f]) => f.columnId).filter((id) => id !== ""));
+			map.set(filterId, columns.filter((column) => !columnsUsedByOtherFilters.has(column.id)));
+		});
+		return map;
+	}, [filterEntries, columns]);
+	const applyFilters = useCallback(() => {
+		onFiltersChange(transformFiltersFromHeroUI(Object.values(filters)));
+		onClose?.();
+	}, [
+		filters,
+		onFiltersChange,
+		onClose
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[600px]",
+		children: [
+			filterEntries.map(([filterId, filter]) => {
+				return /* @__PURE__ */ jsx(TableFilteringItem, {
+					id: filterId,
+					filter,
+					columns: availableColumnsMap.get(filterId) ?? columns,
+					selectColumn,
+					selectMethod,
+					removeFilter,
+					selectValue,
+					filterMethods: effectiveFilterMethods
+				}, filterId);
+			}),
+			!singleFilter && /* @__PURE__ */ jsxs(Button$1, {
+				variant: "outline",
+				size: "sm",
+				onClick: addFilter,
+				children: [/* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }), "Add Filter"]
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				onClick: applyFilters,
+				children: singleFilter ? "Apply Filter" : "Apply Filters"
+			})
+		]
+	});
 };
-const TableFilteringItem = ({ id, filter, columns, selectColumn, selectMethod, selectValue, removeFilter, filterMethods, }) => {
-    const handleColumnChange = useCallback((keys) => {
-        const columnId = String(keys.currentKey);
-        selectColumn(id, columnId);
-    }, [id, selectColumn]);
-    const methodsForType = useMemo(() => {
-        if (!filter.type)
-            return [];
-        // Period columns only support intersect method
-        const isPeriodColumn = filter.columnId.endsWith("__period");
-        if (isPeriodColumn) {
-            const intersectMethod = filterMethods.date.find((m) => m.value === "intersect");
-            return intersectMethod ? [intersectMethod] : [];
-        }
-        const baseMethods = filterMethods[filter.type] ?? [];
-        const emptyMethods = [
-            { value: "isEmpty", label: "Is Empty", component: null },
-            { value: "isNotEmpty", label: "Is Not Empty", component: null },
-        ];
-        if (filter.type !== "boolean" && filter.type !== "date") {
-            return [...baseMethods, ...emptyMethods];
-        }
-        return baseMethods;
-    }, [filter.type, filter.columnId, filter.method?.value, filterMethods]);
-    const handleMethodChange = useCallback((keys) => {
-        if (!filter.type)
-            return;
-        // Use methodsForType instead of filterMethods to include dynamically added methods
-        const method = methodsForType.find((currentMethod) => currentMethod.value === String(keys.currentKey));
-        if (method) {
-            selectMethod(id, method);
-        }
-    }, [id, filter.type, selectMethod, methodsForType]);
-    const handleValueChange = useCallback((value) => {
-        selectValue(id, value);
-    }, [id, selectValue]);
-    const methodSelect = useMemo(() => {
-        if (!filter.type)
-            return null;
-        return (_jsx(Select, { size: "sm", "aria-label": "Select Method", className: "w-40 flex-shrink-0 text-sm", selectedKeys: filter.method?.value ? [filter.method.value] : [], onSelectionChange: handleMethodChange, popoverProps: {
-                className: "w-auto min-w-max",
-            }, children: methodsForType.map((method) => (_jsx(SelectItem, { className: "text-sm", children: method.label }, method.value))) }));
-    }, [filter.type, filter.method?.value, methodsForType, handleMethodChange]);
-    const filterValueComponent = useMemo(() => {
-        if (!filter.method?.component) {
-            return _jsx("div", { className: "flex-1 min-w-0" });
-        }
-        const component = filter.method.component;
-        const ComponentFn = componentForFilterMethod[component];
-        if (!ComponentFn)
-            return _jsx("div", { className: "flex-1 min-w-0" });
-        return ComponentFn(filter.value, handleValueChange, filter.options ?? []);
-    }, [filter.method?.component, filter.value, filter.options, handleValueChange]);
-    const columnSelectItems = useMemo(() => columns.map((column) => (_jsx(SelectItem, { className: "text-sm", children: String(column.label) }, column.id))), [columns]);
-    return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsxs("div", { className: "flex flex-1 items-center gap-2 min-w-0", children: [_jsx(Select, { size: "sm", "aria-label": "Select Column", className: "w-40 flex-shrink-0 text-sm", selectedKeys: filter.columnId ? [filter.columnId] : [], onSelectionChange: handleColumnChange, popoverProps: {
-                            className: "w-auto min-w-max",
-                        }, children: columnSelectItems }), methodSelect, filterValueComponent] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => removeFilter(id), children: _jsx(XIcon, { className: "h-4 w-4" }) })] }));
+const TableFilteringItem = ({ id, filter, columns, selectColumn, selectMethod, selectValue, removeFilter, filterMethods }) => {
+	const handleColumnChange = useCallback((keys) => {
+		selectColumn(id, String(keys.currentKey));
+	}, [id, selectColumn]);
+	const methodsForType = useMemo(() => {
+		if (!filter.type) return [];
+		if (filter.columnId.endsWith("__period")) {
+			const intersectMethod = filterMethods.date.find((m) => m.value === "intersect");
+			return intersectMethod ? [intersectMethod] : [];
+		}
+		const baseMethods = filterMethods[filter.type] ?? [];
+		const emptyMethods = [{
+			value: "isEmpty",
+			label: "Is Empty",
+			component: null
+		}, {
+			value: "isNotEmpty",
+			label: "Is Not Empty",
+			component: null
+		}];
+		if (filter.type !== "boolean" && filter.type !== "date") return [...baseMethods, ...emptyMethods];
+		return baseMethods;
+	}, [
+		filter.type,
+		filter.columnId,
+		filter.method?.value,
+		filterMethods
+	]);
+	const handleMethodChange = useCallback((keys) => {
+		if (!filter.type) return;
+		const method = methodsForType.find((currentMethod) => currentMethod.value === String(keys.currentKey));
+		if (method) selectMethod(id, method);
+	}, [
+		id,
+		filter.type,
+		selectMethod,
+		methodsForType
+	]);
+	const handleValueChange = useCallback((value) => {
+		selectValue(id, value);
+	}, [id, selectValue]);
+	const methodSelect = useMemo(() => {
+		if (!filter.type) return null;
+		return /* @__PURE__ */ jsx(Select, {
+			size: "sm",
+			"aria-label": "Select Method",
+			className: "w-40 flex-shrink-0 text-sm",
+			selectedKeys: filter.method?.value ? [filter.method.value] : [],
+			onSelectionChange: handleMethodChange,
+			popoverProps: { className: "w-auto min-w-max" },
+			children: methodsForType.map((method) => /* @__PURE__ */ jsx(SelectItem, {
+				className: "text-sm",
+				children: method.label
+			}, method.value))
+		});
+	}, [
+		filter.type,
+		filter.method?.value,
+		methodsForType,
+		handleMethodChange
+	]);
+	const filterValueComponent = useMemo(() => {
+		if (!filter.method?.component) return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0" });
+		const ComponentFn = componentForFilterMethod[filter.method.component];
+		if (!ComponentFn) return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0" });
+		return ComponentFn(filter.value, handleValueChange, filter.options ?? []);
+	}, [
+		filter.method?.component,
+		filter.value,
+		filter.options,
+		handleValueChange
+	]);
+	const columnSelectItems = useMemo(() => columns.map((column) => /* @__PURE__ */ jsx(SelectItem, {
+		className: "text-sm",
+		children: String(column.label)
+	}, column.id)), [columns]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 items-center gap-2 min-w-0",
+			children: [
+				/* @__PURE__ */ jsx(Select, {
+					size: "sm",
+					"aria-label": "Select Column",
+					className: "w-40 flex-shrink-0 text-sm",
+					selectedKeys: filter.columnId ? [filter.columnId] : [],
+					onSelectionChange: handleColumnChange,
+					popoverProps: { className: "w-auto min-w-max" },
+					children: columnSelectItems
+				}),
+				methodSelect,
+				filterValueComponent
+			]
+		}), /* @__PURE__ */ jsx(Button$1, {
+			variant: "outline",
+			size: "sm",
+			onClick: () => removeFilter(id),
+			children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
+		})]
+	});
 };
+//#endregion
+export { TableFiltering };
+
+//# sourceMappingURL=TableFiltering.js.map