@medusajs/ui 4.0.22-snapshot-20250829134337 → 4.0.22-snapshot-20250901132949

package/dist/esm/blocks/data-table/components/data-table-filter.js

@@ -1,11 +1,13 @@
-"use client";
-import { CheckMini, EllipseMiniSolid, XMark } from "@medusajs/icons";
+import { CheckMini, EllipseMiniSolid, XMark, XMarkMini, MagnifyingGlass } from "@medusajs/icons";
 import * as React from "react";
 import { useDataTableContext } from "../../data-table/context/use-data-table-context";
 import { isDateComparisonOperator } from "../../data-table/utils/is-date-comparison-operator";
 import { DatePicker } from "../../../components/date-picker";
 import { Label } from "../../../components/label";
 import { Popover } from "../../../components/popover";
+import { Input } from "../../../components/input";
+import { Select } from "../../../components/select";
+import { Checkbox } from "../../../components/checkbox";
 import { clx } from "../../../utils/clx";
 const DEFAULT_FORMAT_DATE_VALUE = (d) => d.toLocaleDateString(undefined, {
     year: "numeric",
@@ -15,28 +17,81 @@ const DEFAULT_FORMAT_DATE_VALUE = (d) => d.toLocaleDateString(undefined, {
 const DEFAULT_RANGE_OPTION_LABEL = "Custom";
 const DEFAULT_RANGE_OPTION_START_LABEL = "Starting";
 const DEFAULT_RANGE_OPTION_END_LABEL = "Ending";
-const DataTableFilter = ({ id, filter }) => {
+const DataTableFilter = ({ id, filter, isNew = false, onUpdate, onRemove }) => {
     const { instance } = useDataTableContext();
-    const [open, setOpen] = React.useState(filter === undefined);
-    const [isCustom, setIsCustom] = React.useState(false);
-    const onOpenChange = React.useCallback((open) => {
-        if (!open &&
-            (!filter || (Array.isArray(filter) && filter.length === 0))) {
-            instance.removeFilter(id);
+    // Initialize open state based on isNew prop
+    const [open, setOpen] = React.useState(isNew);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const meta = instance.getFilterMeta(id);
+    if (!meta) {
+        return null;
+    }
+    const { type, label, ...rest } = meta;
+    const options = meta.options;
+    // Helper to check if filter has a meaningful value
+    const hasValue = React.useMemo(() => {
+        if (filter === null || filter === undefined)
+            return false;
+        if (typeof filter === "string" && filter === "")
+            return false;
+        if (Array.isArray(filter) && filter.length === 0)
+            return false;
+        if (typeof filter === "number")
+            return true;
+        if (isDateComparisonOperator(filter)) {
+            return !!(filter.$gte || filter.$lte || filter.$gt || filter.$lt);
+        }
+        if (typeof filter === "object" && filter !== null) {
+            // For number comparison operators
+            const keys = Object.keys(filter);
+            return keys.length > 0 && filter[keys[0]] !== null && filter[keys[0]] !== undefined;
         }
-        setOpen(open);
-    }, [instance, id, filter]);
+        return true;
+    }, [filter]);
+    const onOpenChange = React.useCallback((newOpen) => {
+        setOpen(newOpen);
+        // Mark as interacted when user closes
+        if (!newOpen && open) {
+            setHasInteracted(true);
+        }
+        // If closing without a value, remove filter
+        // For new filters that haven't been interacted with, remove immediately
+        if (!newOpen && !hasValue) {
+            // Only remove if it's a new filter being closed without interaction,
+            // or if it's an existing filter with no value
+            if ((isNew && !hasInteracted) || !isNew) {
+                if (onRemove) {
+                    onRemove();
+                }
+                else {
+                    instance.removeFilter(id);
+                }
+            }
+        }
+    }, [instance, id, open, hasInteracted, isNew, hasValue, onRemove]);
     const removeFilter = React.useCallback(() => {
-        instance.removeFilter(id);
-    }, [instance, id]);
-    const meta = instance.getFilterMeta(id);
-    const { type, options, label, ...rest } = meta !== null && meta !== void 0 ? meta : {};
+        if (onRemove) {
+            onRemove();
+        }
+        else {
+            instance.removeFilter(id);
+        }
+    }, [instance, id, onRemove]);
     const { displayValue, isCustomRange } = React.useMemo(() => {
         var _a, _b, _c, _d, _e;
         let displayValue = null;
         let isCustomRange = false;
         if (typeof filter === "string") {
-            displayValue = (_b = (_a = options === null || options === void 0 ? void 0 : options.find((o) => o.value === filter)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : null;
+            // For string filters without options, just show the value
+            if (!options || options.length === 0) {
+                displayValue = filter;
+            }
+            else {
+                displayValue = (_b = (_a = options === null || options === void 0 ? void 0 : options.find((o) => o.value === filter)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : null;
+            }
+        }
+        if (typeof filter === "number") {
+            displayValue = String(filter);
         }
         if (Array.isArray(filter)) {
             displayValue =
@@ -45,74 +100,122 @@ const DataTableFilter = ({ id, filter }) => {
                     .join(", ")) !== null && _c !== void 0 ? _c : null;
         }
         if (isDateComparisonOperator(filter)) {
+            // First check if it matches a predefined option
             displayValue =
                 (_e = (_d = options === null || options === void 0 ? void 0 : options.find((o) => {
                     if (!isDateComparisonOperator(o.value)) {
                         return false;
                     }
-                    return (!isCustom &&
-                        (filter.$gte === o.value.$gte || (!filter.$gte && !o.value.$gte)) &&
+                    return ((filter.$gte === o.value.$gte || (!filter.$gte && !o.value.$gte)) &&
                         (filter.$lte === o.value.$lte || (!filter.$lte && !o.value.$lte)) &&
                         (filter.$gt === o.value.$gt || (!filter.$gt && !o.value.$gt)) &&
                         (filter.$lt === o.value.$lt || (!filter.$lt && !o.value.$lt)));
                 })) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
+            // If no match found, it's a custom range
             if (!displayValue && isDateFilterProps(meta)) {
+                isCustomRange = true;
                 const formatDateValue = meta.formatDateValue
                     ? meta.formatDateValue
                     : DEFAULT_FORMAT_DATE_VALUE;
                 if (filter.$gte && !filter.$lte) {
-                    isCustomRange = true;
                     displayValue = `${meta.rangeOptionStartLabel || DEFAULT_RANGE_OPTION_START_LABEL} ${formatDateValue(new Date(filter.$gte))}`;
                 }
                 if (filter.$lte && !filter.$gte) {
-                    isCustomRange = true;
                     displayValue = `${meta.rangeOptionEndLabel || DEFAULT_RANGE_OPTION_END_LABEL} ${formatDateValue(new Date(filter.$lte))}`;
                 }
                 if (filter.$gte && filter.$lte) {
-                    isCustomRange = true;
                     displayValue = `${formatDateValue(new Date(filter.$gte))} - ${formatDateValue(new Date(filter.$lte))}`;
                 }
             }
         }
-        return { displayValue, isCustomRange };
-    }, [filter, options]);
-    React.useEffect(() => {
-        if (isCustomRange && !isCustom) {
-            setIsCustom(true);
+        // Handle number comparison operators
+        if (typeof filter === "object" && filter !== null && !Array.isArray(filter) && !isDateComparisonOperator(filter)) {
+            const operators = {
+                $eq: "=",
+                $gt: ">",
+                $gte: "≥",
+                $lt: "<",
+                $lte: "≤",
+            };
+            const op = Object.keys(filter)[0];
+            const opLabel = operators[op] || op;
+            const value = filter[op];
+            if (typeof value === "number") {
+                displayValue = `${opLabel} ${value}`;
+            }
         }
-    }, [isCustomRange, isCustom]);
-    if (!meta) {
-        return null;
-    }
+        return { displayValue, isCustomRange };
+    }, [filter, options, meta]);
     return (React.createElement(Popover, { open: open, onOpenChange: onOpenChange, modal: true },
-        React.createElement(Popover.Anchor, { asChild: true },
-            React.createElement("div", { className: clx("bg-ui-bg-component flex flex-shrink-0 items-center overflow-hidden rounded-md", "[&>*]:txt-compact-small-plus [&>*]:flex [&>*]:items-center [&>*]:justify-center", {
-                    "shadow-borders-base divide-x": displayValue,
-                    "border border-dashed": !displayValue,
-                }) },
-                displayValue && (React.createElement("div", { className: "text-ui-fg-muted whitespace-nowrap px-2 py-1" }, label || id)),
-                React.createElement(Popover.Trigger, { className: clx("text-ui-fg-subtle hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg whitespace-nowrap px-2 py-1 outline-none", {
-                        "text-ui-fg-muted": !displayValue,
-                    }) }, displayValue || label || id),
-                displayValue && (React.createElement("button", { type: "button", className: "text-ui-fg-muted hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg size-7 outline-none", onClick: removeFilter },
+        React.createElement("div", { className: clx("bg-ui-bg-field flex flex-shrink-0 items-stretch overflow-hidden rounded-md", "txt-compact-small-plus shadow-borders-base") },
+            !hasValue && isNew && React.createElement(Popover.Anchor, null),
+            React.createElement("div", { className: clx("flex items-center px-2 py-1 text-ui-fg-muted", {
+                    "border-r": hasValue
+                }) }, label || id),
+            hasValue && (React.createElement(React.Fragment, null,
+                (type === "select" || type === "multiselect" || type === "radio") && (React.createElement("div", { className: "flex items-center border-r px-2 py-1 text-ui-fg-muted" }, "is")),
+                React.createElement(Popover.Trigger, { asChild: true },
+                    React.createElement("button", { className: clx("flex flex-1 items-center px-2 py-1 outline-none", "hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg", {
+                            "text-ui-fg-subtle": displayValue,
+                            "text-ui-fg-muted": !displayValue,
+                            "min-w-[80px] justify-center": !displayValue,
+                            "border-r": true
+                        }) }, displayValue || "\u00A0")),
+                React.createElement("button", { type: "button", className: "flex size-7 items-center justify-center text-ui-fg-muted outline-none hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg", onClick: removeFilter },
                     React.createElement(XMark, null))))),
-        React.createElement(Popover.Content, { align: "start", className: "bg-ui-bg-component p-0 outline-none" }, (() => {
+        React.createElement(Popover.Content, { align: "start", sideOffset: 8, collisionPadding: 16, hideWhenDetached: true, className: "bg-ui-bg-component p-0 outline-none", onOpenAutoFocus: (e) => {
+                if (isNew) {
+                    // For new filters, ensure the first input gets focus
+                    const target = e.currentTarget;
+                    if (target) {
+                        const firstInput = target.querySelector('input:not([type="hidden"]), [role="list"][tabindex="0"]');
+                        firstInput === null || firstInput === void 0 ? void 0 : firstInput.focus();
+                    }
+                }
+            }, onCloseAutoFocus: (e) => {
+                // Prevent focus from going to the trigger when closing
+                e.preventDefault();
+            }, onInteractOutside: (e) => {
+                // Check if the click is on a filter menu item
+                const target = e.target;
+                if (target.closest('[role="menuitem"]')) {
+                    e.preventDefault();
+                }
+            } }, (() => {
             switch (type) {
                 case "select":
-                    return (React.createElement(DataTableFilterSelectContent, { id: id, filter: filter, options: options }));
+                    return (React.createElement(DataTableFilterSelectContent, { id: id, filter: filter, options: options, isNew: isNew, onUpdate: onUpdate }));
                 case "radio":
-                    return (React.createElement(DataTableFilterRadioContent, { id: id, filter: filter, options: options }));
+                    return (React.createElement(DataTableFilterRadioContent, { id: id, filter: filter, options: options, onUpdate: onUpdate }));
                 case "date":
-                    return (React.createElement(DataTableFilterDateContent, { id: id, filter: filter, options: options, isCustom: isCustom, setIsCustom: setIsCustom, ...rest }));
+                    const dateRest = rest;
+                    return (React.createElement(DataTableFilterDateContent, { id: id, filter: filter, options: options, isCustomRange: isCustomRange, format: dateRest.format, rangeOptionLabel: dateRest.rangeOptionLabel, disableRangeOption: dateRest.disableRangeOption, rangeOptionStartLabel: dateRest.rangeOptionStartLabel, rangeOptionEndLabel: dateRest.rangeOptionEndLabel, onUpdate: onUpdate }));
+                case "multiselect":
+                    const multiselectRest = rest;
+                    return (React.createElement(DataTableFilterMultiselectContent, { id: id, filter: filter, options: options, searchable: multiselectRest.searchable, onUpdate: onUpdate }));
+                case "string":
+                    const stringRest = rest;
+                    return (React.createElement(DataTableFilterStringContent, { id: id, filter: filter, placeholder: stringRest.placeholder, onUpdate: onUpdate }));
+                case "number":
+                    const numberRest = rest;
+                    return (React.createElement(DataTableFilterNumberContent, { id: id, filter: filter, placeholder: numberRest.placeholder, includeOperators: numberRest.includeOperators, onUpdate: onUpdate }));
+                case "custom":
+                    const customRest = rest;
+                    return (React.createElement(DataTableFilterCustomContent, { id: id, filter: filter, onRemove: removeFilter, render: customRest.render, onUpdate: onUpdate }));
                 default:
                     return null;
             }
         })())));
 };
 DataTableFilter.displayName = "DataTable.Filter";
-const DataTableFilterDateContent = ({ id, filter, options, format = "date", rangeOptionLabel = DEFAULT_RANGE_OPTION_LABEL, rangeOptionStartLabel = DEFAULT_RANGE_OPTION_START_LABEL, rangeOptionEndLabel = DEFAULT_RANGE_OPTION_END_LABEL, disableRangeOption = false, isCustom, setIsCustom, }) => {
+const DataTableFilterDateContent = ({ id, filter, options, format = "date", rangeOptionLabel = DEFAULT_RANGE_OPTION_LABEL, rangeOptionStartLabel = DEFAULT_RANGE_OPTION_START_LABEL, rangeOptionEndLabel = DEFAULT_RANGE_OPTION_END_LABEL, disableRangeOption = false, isCustomRange, onUpdate, }) => {
     const currentValue = filter;
     const { instance } = useDataTableContext();
+    const [isCustom, setIsCustom] = React.useState(isCustomRange);
+    // Sync isCustom state when isCustomRange changes
+    React.useEffect(() => {
+        setIsCustom(isCustomRange);
+    }, [isCustomRange]);
     const selectedValue = React.useMemo(() => {
         if (!currentValue || isCustom) {
             return undefined;
@@ -122,17 +225,27 @@ const DataTableFilterDateContent = ({ id, filter, options, format = "date", rang
     const onValueChange = React.useCallback((valueStr) => {
         setIsCustom(false);
         const value = JSON.parse(valueStr);
-        instance.updateFilter({ id, value });
-    }, [instance, id]);
+        if (onUpdate) {
+            onUpdate(value);
+        }
+        else {
+            instance.updateFilter({ id, value });
+        }
+    }, [instance, id, onUpdate]);
     const onSelectCustom = React.useCallback(() => {
         setIsCustom(true);
-        instance.updateFilter({ id, value: undefined });
-    }, [instance, id]);
+        // Don't clear the value when selecting custom - keep the current value
+    }, []);
     const onCustomValueChange = React.useCallback((input, value) => {
         const newCurrentValue = { ...currentValue };
         newCurrentValue[input] = value ? value.toISOString() : undefined;
-        instance.updateFilter({ id, value: newCurrentValue });
-    }, [instance, id]);
+        if (onUpdate) {
+            onUpdate(newCurrentValue);
+        }
+        else {
+            instance.updateFilter({ id, value: newCurrentValue });
+        }
+    }, [instance, id, currentValue, onUpdate]);
     const { focusedIndex, setFocusedIndex } = useKeyboardNavigation(options, (index) => {
         if (index === options.length && !disableRangeOption) {
             onSelectCustom();
@@ -181,39 +294,67 @@ const DataTableFilterDateContent = ({ id, filter, options, format = "date", rang
                     React.createElement(Label, { id: "custom-end-date-label", size: "xsmall", weight: "plus" }, rangeOptionEndLabel),
                     React.createElement(DatePicker, { "aria-labelledby": "custom-end-date-label", granularity: granularity, minValue: minDate, value: (currentValue === null || currentValue === void 0 ? void 0 : currentValue.$lte) ? new Date(currentValue.$lte) : null, onChange: (value) => onCustomValueChange("$lte", value) })))))));
 };
-const DataTableFilterSelectContent = ({ id, filter = [], options, }) => {
+const DataTableFilterSelectContent = ({ id, filter = [], options, isNew = false, onUpdate, }) => {
     const { instance } = useDataTableContext();
+    const [search, setSearch] = React.useState("");
+    const filteredOptions = React.useMemo(() => {
+        if (!search)
+            return options;
+        const searchLower = search.toLowerCase();
+        return options.filter(opt => opt.label.toLowerCase().includes(searchLower));
+    }, [options, search]);
     const onValueChange = React.useCallback((value) => {
         if (filter === null || filter === void 0 ? void 0 : filter.includes(value)) {
             const newValues = filter === null || filter === void 0 ? void 0 : filter.filter((v) => v !== value);
-            instance.updateFilter({
-                id,
-                value: newValues,
-            });
+            const newValue = newValues.length > 0 ? newValues : undefined;
+            if (onUpdate) {
+                onUpdate(newValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: newValue,
+                });
+            }
         }
         else {
-            instance.updateFilter({
-                id,
-                value: [...(filter !== null && filter !== void 0 ? filter : []), value],
-            });
-        }
-    }, [instance, id, filter]);
-    const { focusedIndex, setFocusedIndex } = useKeyboardNavigation(options, (index) => onValueChange(options[index].value));
-    const onListFocus = React.useCallback(() => {
-        if (focusedIndex === -1) {
-            setFocusedIndex(0);
+            const newValue = [...(filter !== null && filter !== void 0 ? filter : []), value];
+            if (onUpdate) {
+                onUpdate(newValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: newValue,
+                });
+            }
         }
-    }, [focusedIndex]);
-    return (React.createElement("div", { className: "flex flex-col p-1 outline-none", role: "list", tabIndex: 0, onFocus: onListFocus, autoFocus: true }, options.map((option, idx) => {
-        const isSelected = !!(filter === null || filter === void 0 ? void 0 : filter.includes(option.value));
-        return (React.createElement(OptionButton, { key: idx, index: idx, option: option, isSelected: isSelected, isFocused: focusedIndex === idx, onClick: () => onValueChange(option.value), onMouseEvent: setFocusedIndex, icon: CheckMini }));
-    })));
+    }, [instance, id, filter, onUpdate]);
+    return (React.createElement("div", { className: "w-[250px]" },
+        React.createElement("div", { className: "flex items-center gap-x-2 border-b px-3 py-1.5" },
+            React.createElement(MagnifyingGlass, { className: "h-4 w-4 text-ui-fg-muted" }),
+            React.createElement("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search...", className: "h-8 flex-1 bg-transparent text-sm outline-none placeholder:text-ui-fg-muted", autoFocus: true }),
+            search && (React.createElement("button", { onClick: () => setSearch(""), className: "text-ui-fg-muted hover:text-ui-fg-subtle" },
+                React.createElement(XMarkMini, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "max-h-[300px] overflow-auto p-1" },
+            filteredOptions.length === 0 && (React.createElement("div", { className: "py-6 text-center text-sm text-ui-fg-muted" }, "No results found")),
+            filteredOptions.map(option => {
+                const isSelected = filter === null || filter === void 0 ? void 0 : filter.includes(option.value);
+                return (React.createElement("button", { key: String(option.value), onClick: () => onValueChange(option.value), className: clx("flex w-full cursor-pointer items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-left", "hover:bg-ui-bg-base-hover") },
+                    React.createElement("div", { className: "flex size-[15px] items-center justify-center" }, isSelected && React.createElement(CheckMini, null)),
+                    React.createElement("span", null, option.label)));
+            }))));
 };
-const DataTableFilterRadioContent = ({ id, filter, options, }) => {
+const DataTableFilterRadioContent = ({ id, filter, options, onUpdate, }) => {
     const { instance } = useDataTableContext();
     const onValueChange = React.useCallback((value) => {
-        instance.updateFilter({ id, value });
-    }, [instance, id]);
+        if (onUpdate) {
+            onUpdate(value);
+        }
+        else {
+            instance.updateFilter({ id, value });
+        }
+    }, [instance, id, onUpdate]);
     const { focusedIndex, setFocusedIndex } = useKeyboardNavigation(options, (index) => onValueChange(options[index].value));
     const onListFocus = React.useCallback(() => {
         if (focusedIndex === -1) {
@@ -231,6 +372,30 @@ function isDateFilterProps(props) {
     }
     return props.type === "date";
 }
+function isMultiselectFilterProps(props) {
+    if (!props) {
+        return false;
+    }
+    return props.type === "multiselect";
+}
+function isStringFilterProps(props) {
+    if (!props) {
+        return false;
+    }
+    return props.type === "string";
+}
+function isNumberFilterProps(props) {
+    if (!props) {
+        return false;
+    }
+    return props.type === "number";
+}
+function isCustomFilterProps(props) {
+    if (!props) {
+        return false;
+    }
+    return props.type === "custom";
+}
 const OptionButton = React.memo(({ index, option, isSelected, isFocused, onClick, onMouseEvent, icon: Icon, }) => (React.createElement("button", { type: "button", role: "listitem", className: clx("bg-ui-bg-component txt-compact-small transition-fg flex items-center gap-2 rounded px-2 py-1 outline-none", { "bg-ui-bg-component-hover": isFocused }), onClick: onClick, onMouseEnter: () => onMouseEvent(index), onMouseLeave: () => onMouseEvent(-1), tabIndex: -1 },
     React.createElement("div", { className: "flex size-[15px] items-center justify-center" }, isSelected && React.createElement(Icon, null)),
     React.createElement("span", null, option.label))));
@@ -267,5 +432,255 @@ function useKeyboardNavigation(options, onSelect, extraItems = 0) {
     }, [onKeyDown]);
     return { focusedIndex, setFocusedIndex };
 }
+const DataTableFilterMultiselectContent = ({ id, filter = [], options, searchable = true, onUpdate, }) => {
+    const { instance } = useDataTableContext();
+    const [search, setSearch] = React.useState("");
+    const filteredOptions = React.useMemo(() => {
+        if (!searchable || !search)
+            return options;
+        const searchLower = search.toLowerCase();
+        return options.filter(opt => opt.label.toLowerCase().includes(searchLower));
+    }, [options, search, searchable]);
+    const onValueChange = React.useCallback((value) => {
+        if (filter === null || filter === void 0 ? void 0 : filter.includes(value)) {
+            const newValues = filter === null || filter === void 0 ? void 0 : filter.filter((v) => v !== value);
+            const newValue = newValues.length > 0 ? newValues : undefined;
+            if (onUpdate) {
+                onUpdate(newValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: newValue,
+                });
+            }
+        }
+        else {
+            const newValue = [...(filter !== null && filter !== void 0 ? filter : []), value];
+            if (onUpdate) {
+                onUpdate(newValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: newValue,
+                });
+            }
+        }
+    }, [instance, id, filter, onUpdate]);
+    if (!searchable) {
+        return (React.createElement("div", { className: "w-[250px]" },
+            React.createElement("div", { className: "max-h-[300px] overflow-auto p-1" }, options.map(option => {
+                const isSelected = filter === null || filter === void 0 ? void 0 : filter.includes(option.value);
+                return (React.createElement("button", { key: String(option.value), onClick: () => onValueChange(option.value), className: clx("flex w-full items-center gap-x-2 rounded-md px-2 py-1.5 text-sm", "hover:bg-ui-bg-base-hover cursor-pointer text-left") },
+                    React.createElement(Checkbox, { checked: isSelected, className: "pointer-events-none" }),
+                    React.createElement("span", null, option.label)));
+            }))));
+    }
+    return (React.createElement("div", { className: "w-[250px]" },
+        React.createElement("div", { className: "flex items-center gap-x-2 border-b px-3 py-1.5" },
+            React.createElement(MagnifyingGlass, { className: "h-4 w-4 text-ui-fg-muted" }),
+            React.createElement("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search...", className: "h-8 flex-1 bg-transparent text-sm outline-none placeholder:text-ui-fg-muted", autoFocus: true }),
+            search && (React.createElement("button", { onClick: () => setSearch(""), className: "text-ui-fg-muted hover:text-ui-fg-subtle" },
+                React.createElement(XMarkMini, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "max-h-[300px] overflow-auto p-1" },
+            filteredOptions.length === 0 && (React.createElement("div", { className: "py-6 text-center text-sm text-ui-fg-muted" }, "No results found")),
+            filteredOptions.map(option => {
+                const isSelected = filter === null || filter === void 0 ? void 0 : filter.includes(option.value);
+                return (React.createElement("button", { key: String(option.value), onClick: () => onValueChange(option.value), className: clx("flex w-full cursor-pointer items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-left", "hover:bg-ui-bg-base-hover") },
+                    React.createElement(Checkbox, { checked: isSelected, className: "pointer-events-none" }),
+                    React.createElement("span", null, option.label)));
+            }))));
+};
+const DataTableFilterStringContent = ({ id, filter, placeholder = "Enter value...", onUpdate, }) => {
+    const { instance } = useDataTableContext();
+    const [value, setValue] = React.useState(filter || "");
+    const timeoutRef = React.useRef(null);
+    const handleChange = React.useCallback((newValue) => {
+        setValue(newValue);
+        // Clear existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // Debounce the update
+        timeoutRef.current = setTimeout(() => {
+            const updateValue = newValue.trim() || undefined;
+            if (onUpdate) {
+                onUpdate(updateValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: updateValue,
+                });
+            }
+        }, 500);
+    }, [instance, id, onUpdate]);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            // Clear timeout and apply immediately
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            const updateValue = value.trim() || undefined;
+            if (onUpdate) {
+                onUpdate(updateValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: updateValue,
+                });
+            }
+        }
+    }, [instance, id, value, onUpdate]);
+    return (React.createElement("div", { className: "p-3 w-[250px]" },
+        React.createElement(Input, { placeholder: placeholder, value: value, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, autoFocus: true })));
+};
+const DataTableFilterNumberContent = ({ id, filter, placeholder = "Enter number...", includeOperators = true, onUpdate, }) => {
+    const { instance } = useDataTableContext();
+    const [operator, setOperator] = React.useState("eq");
+    const [value, setValue] = React.useState("");
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        if (filter) {
+            if (typeof filter === "number") {
+                setOperator("eq");
+                setValue(String(filter));
+            }
+            else if (typeof filter === "object") {
+                const op = Object.keys(filter)[0];
+                setOperator(op.replace("$", ""));
+                setValue(String(filter[op]));
+            }
+        }
+    }, [filter]);
+    const handleValueChange = React.useCallback((newValue) => {
+        setValue(newValue);
+        // Clear existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // Debounce the update
+        timeoutRef.current = setTimeout(() => {
+            const num = parseFloat(newValue);
+            if (!isNaN(num)) {
+                const filterValue = includeOperators && operator !== "eq"
+                    ? { [`$${operator}`]: num }
+                    : num;
+                if (onUpdate) {
+                    onUpdate(filterValue);
+                }
+                else {
+                    instance.updateFilter({
+                        id,
+                        value: filterValue,
+                    });
+                }
+            }
+            else if (newValue === "") {
+                if (onUpdate) {
+                    onUpdate(undefined);
+                }
+                else {
+                    instance.updateFilter({
+                        id,
+                        value: undefined,
+                    });
+                }
+            }
+        }, 500);
+    }, [instance, id, operator, includeOperators, onUpdate]);
+    const handleOperatorChange = React.useCallback((newOperator) => {
+        setOperator(newOperator);
+        // If we have a value, update immediately with new operator
+        const num = parseFloat(value);
+        if (!isNaN(num)) {
+            const filterValue = includeOperators && newOperator !== "eq"
+                ? { [`$${newOperator}`]: num }
+                : num;
+            if (onUpdate) {
+                onUpdate(filterValue);
+            }
+            else {
+                instance.updateFilter({
+                    id,
+                    value: filterValue,
+                });
+            }
+        }
+    }, [instance, id, value, includeOperators, onUpdate]);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            // Clear timeout and apply immediately
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            const num = parseFloat(value);
+            if (!isNaN(num)) {
+                const filterValue = includeOperators && operator !== "eq"
+                    ? { [`$${operator}`]: num }
+                    : num;
+                if (onUpdate) {
+                    onUpdate(filterValue);
+                }
+                else {
+                    instance.updateFilter({
+                        id,
+                        value: filterValue,
+                    });
+                }
+            }
+        }
+    }, [instance, id, value, operator, includeOperators, onUpdate]);
+    const operators = [
+        { value: "eq", label: "Equals" },
+        { value: "gt", label: "Greater than" },
+        { value: "gte", label: "Greater than or equal" },
+        { value: "lt", label: "Less than" },
+        { value: "lte", label: "Less than or equal" },
+    ];
+    return (React.createElement("div", { className: "p-3 space-y-3 w-[250px]" },
+        includeOperators && (React.createElement(Select, { value: operator, onValueChange: handleOperatorChange },
+            React.createElement(Select.Trigger, null,
+                React.createElement(Select.Value, null)),
+            React.createElement(Select.Content, null, operators.map(op => (React.createElement(Select.Item, { key: op.value, value: op.value }, op.label)))))),
+        React.createElement(Input, { type: "number", placeholder: placeholder, value: value, onChange: (e) => handleValueChange(e.target.value), onKeyDown: handleKeyDown, autoFocus: !includeOperators })));
+};
+const DataTableFilterCustomContent = ({ id, filter, onRemove, render, onUpdate, }) => {
+    const { instance } = useDataTableContext();
+    const handleChange = React.useCallback((value) => {
+        if (onUpdate) {
+            onUpdate(value);
+        }
+        else {
+            instance.updateFilter({
+                id,
+                value,
+            });
+        }
+    }, [instance, id, onUpdate]);
+    return (React.createElement(React.Fragment, null, render({
+        value: filter,
+        onChange: handleChange,
+        onRemove,
+    })));
+};
 export { DataTableFilter };
 //# sourceMappingURL=data-table-filter.js.map