react-restyle-components 0.4.36 → 0.4.38

package/lib/src/core-components/src/components/Table/filters.js

@@ -1,74 +1,64 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { styled, css } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-import { useDebouncedValue } from '../../utils/hooks/useDebouncedValue';
-// Styled components for filters
-const FilterContainer = styled.div `
+"use strict";"use client";import{jsx as c,jsxs as G,Fragment as Q}from"react/jsx-runtime";import{useState as _,useCallback as B,useEffect as d,useRef as f}from"react";import{styled as M,css as U}from"styled-components";import{tokens as i}from"../../utils/designTokens";import{useDebouncedValue as H}from"../../utils/hooks/useDebouncedValue";const X=M.div`
   display: flex;
   align-items: center;
   gap: 3px;
-`;
-const FilterInputBase = styled.input `
+`,Y=M.input`
   width: 100%;
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
   font-weight: normal;
   color: #000000;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${i.outline||"#e2e8f0"};
   border-radius: 2px;
   background: white;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
+    border-color: ${i.primary||"#94a3b8"};
   }
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${i.primary||"#3b82f6"};
     box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
+      ${i.primary?`${i.primary}20`:"#3b82f620"};
   }
 
   &::placeholder {
-    color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#94a3af'};
+    color: ${i.onSurface?`${i.onSurface}50`:"#94a3af"};
     font-size: 9px;
   }
-`;
-const FilterSelectBase = styled.select `
+`,ne=M.select`
   width: 100%;
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
   font-weight: normal;
   color: #000000;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${i.outline||"#e2e8f0"};
   border-radius: 2px;
   background: white;
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
+    border-color: ${i.primary||"#94a3b8"};
   }
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${i.primary||"#3b82f6"};
     box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
+      ${i.primary?`${i.primary}20`:"#3b82f620"};
   }
-`;
-const ComparatorSelect = styled.select `
+`,Z=M.select`
   width: 38px;
   height: 22px;
   padding: 0 2px;
   font-size: 9px;
   font-weight: normal;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${i.outline||"#e2e8f0"};
   border-radius: 2px;
   background: white;
   cursor: pointer;
@@ -77,571 +67,56 @@ const ComparatorSelect = styled.select `
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
+    border-color: ${i.primary||"#94a3b8"};
   }
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${i.primary||"#3b82f6"};
   }
-`;
-const DateInput = styled.input `
+`,O=M.input`
   flex: 1;
   height: 22px;
   padding: 0 4px;
   font-size: 10px;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${i.outline||"#e2e8f0"};
   border-radius: 2px;
   background: white;
   min-width: 80px;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
+    border-color: ${i.primary||"#94a3b8"};
   }
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${i.primary||"#3b82f6"};
     box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
+      ${i.primary?`${i.primary}20`:"#3b82f620"};
   }
-`;
-const ToggleButton = styled.button `
+`,ae=M.button`
   height: 22px;
   padding: 0 5px;
   font-size: 9px;
   font-weight: normal;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${i.outline||"#e2e8f0"};
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
 
-  ${({ $active }) => $active
-    ? css `
-          background: ${tokens.primary || '#3b82f6'};
+  ${({$active:e})=>e?U`
+          background: ${i.primary||"#3b82f6"};
           color: white;
-          border-color: ${tokens.primary || '#3b82f6'};
-        `
-    : css `
+          border-color: ${i.primary||"#3b82f6"};
+        `:U`
           background: white;
-          color: ${tokens.onSurface || '#374151'};
+          color: ${i.onSurface||"#374151"};
 
           &:hover {
             background: #f8fafc;
-            border-color: ${tokens.primary || '#94a3b8'};
+            border-color: ${i.primary||"#94a3b8"};
           }
         `}
-`;
-/**
- * Internal Text filter component with options support
- */
-const TextFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder, className, style, defaultValue, delay = 500, getFilter, onFilter, id, disabled, } = options || {};
-    // Local state for immediate input updates (maintains focus)
-    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
-    const internalValueRef = useRef(internalValue);
-    const inputRef = useRef(null);
-    const onChangeRef = useRef(onChange);
-    const onFilterRef = useRef(onFilter);
-    // Track if the last change was from user input (internal) vs external (e.g., clear all)
-    const lastInternalValueRef = useRef(internalValue);
-    // Keep refs in sync
-    useEffect(() => {
-        internalValueRef.current = internalValue;
-    }, [internalValue]);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-        onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
-    // Sync internal value when external value changes (e.g., from clear all filters)
-    // Only sync when external value differs from what we last sent to parent
-    useEffect(() => {
-        const externalValue = value || '';
-        // Only sync if external value is different from what we last propagated
-        // This prevents overwriting user input while they're typing
-        if (externalValue !== lastInternalValueRef.current) {
-            setInternalValue(externalValue);
-            lastInternalValueRef.current = externalValue;
-        }
-    }, [value]);
-    // Debounce the internal value
-    const [debouncedValue] = useDebouncedValue(internalValue, { wait: delay });
-    // Propagate debounced value to parent
-    useEffect(() => {
-        // Update the ref to track what we're sending to parent
-        lastInternalValueRef.current = debouncedValue || '';
-        onChangeRef.current(debouncedValue || null);
-        onFilterRef.current?.(debouncedValue);
-    }, [debouncedValue]);
-    // Provide filter instance via getFilter callback - only on mount
-    useEffect(() => {
-        if (getFilter) {
-            getFilter({
-                get value() {
-                    return internalValueRef.current;
-                },
-                setValue: (newValue) => {
-                    setInternalValue(newValue);
-                    onChangeRef.current(newValue || null);
-                    onFilterRef.current?.(newValue);
-                },
-                clear: () => {
-                    setInternalValue('');
-                    onChangeRef.current(null);
-                    onFilterRef.current?.('');
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFilter]);
-    // Track if input should be focused (user is actively typing)
-    const hasFocusRef = useRef(false);
-    // Simple change handler - just update local state
-    const handleChange = useCallback((e) => {
-        setInternalValue(e.target.value);
-    }, []);
-    // Track focus state
-    const handleFocus = useCallback(() => {
-        hasFocusRef.current = true;
-    }, []);
-    const handleBlur = useCallback(() => {
-        hasFocusRef.current = false;
-    }, []);
-    // Restore focus after re-renders if it was focused
-    useEffect(() => {
-        if (hasFocusRef.current && inputRef.current) {
-            // Use requestAnimationFrame to ensure DOM is ready
-            requestAnimationFrame(() => {
-                if (hasFocusRef.current && inputRef.current) {
-                    inputRef.current.focus();
-                }
-            });
-        }
-    });
-    const inputStyle = {
-        fontWeight: 400,
-        ...style,
-    };
-    // If custom className is provided, use plain input to allow full CSS control
-    if (className) {
-        return (_jsx("input", { ref: inputRef, type: "text", id: id, "data-filter-field": column.dataField, value: internalValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
-                width: '100%',
-                fontWeight: 400,
-                ...style,
-            }, disabled: disabled }));
-    }
-    return (_jsx(FilterInputBase, { ref: inputRef, type: "text", id: id, "data-filter-field": column.dataField, value: internalValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: inputStyle, disabled: disabled }));
-};
-export function TextFilter(optionsOrProps) {
-    // Check if it's being used as a factory function (options object without column/value/onChange)
-    if (!('column' in optionsOrProps) &&
-        !('value' in optionsOrProps) &&
-        !('onChange' in optionsOrProps)) {
-        // Factory function usage - return a component
-        const options = optionsOrProps;
-        const FilterWithOptions = (props) => (_jsx(TextFilterComponent, { ...props, options: options }));
-        FilterWithOptions.displayName = 'TextFilter';
-        return FilterWithOptions;
-    }
-    // Direct component usage
-    const props = optionsOrProps;
-    return _jsx(TextFilterComponent, { ...props });
-}
-/**
- * Internal Number filter component with options support
- */
-const NumberFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder, className, style, defaultValue, delay = 500, defaultComparator = '=', allowDecimal = true, getFilter, onFilter, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
-    // Local state for immediate input updates (maintains focus)
-    const [number, setNumber] = useState(value?.number || defaultValue?.number || '');
-    const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
-    const numberRef = useRef(number);
-    const comparatorRef = useRef(comparator);
-    const inputRef = useRef(null);
-    const onChangeRef = useRef(onChange);
-    const onFilterRef = useRef(onFilter);
-    // Track last value sent to parent to prevent sync loops
-    const lastNumberRef = useRef(number);
-    const lastComparatorRef = useRef(comparator);
-    // Keep refs in sync with state
-    useEffect(() => {
-        numberRef.current = number;
-        comparatorRef.current = comparator;
-    }, [number, comparator]);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-        onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
-    // Sync internal value when external value changes (e.g., from clear all filters)
-    useEffect(() => {
-        const externalNumber = value?.number || '';
-        const externalComparator = value?.comparator || defaultComparator;
-        // Only sync if different from what we last sent to parent
-        if (externalNumber !== lastNumberRef.current) {
-            setNumber(externalNumber);
-            lastNumberRef.current = externalNumber;
-        }
-        if (externalComparator !== lastComparatorRef.current) {
-            setComparator(externalComparator);
-            lastComparatorRef.current = externalComparator;
-        }
-    }, [value, defaultComparator]);
-    // Debounce the number value
-    const [debouncedNumber] = useDebouncedValue(number, { wait: delay });
-    // Propagate debounced value to parent
-    useEffect(() => {
-        // Update refs to track what we're sending to parent
-        lastNumberRef.current = debouncedNumber || '';
-        lastComparatorRef.current = comparatorRef.current;
-        const newValue = debouncedNumber
-            ? { number: debouncedNumber, comparator: comparatorRef.current }
-            : null;
-        onChangeRef.current(newValue);
-        onFilterRef.current?.(newValue);
-    }, [debouncedNumber]);
-    // Provide filter instance via getFilter callback - only on mount
-    useEffect(() => {
-        if (getFilter) {
-            getFilter({
-                get value() {
-                    return numberRef.current
-                        ? { number: numberRef.current, comparator: comparatorRef.current }
-                        : null;
-                },
-                setValue: (newValue) => {
-                    if (newValue) {
-                        setNumber(newValue.number);
-                        setComparator(newValue.comparator);
-                        onChangeRef.current(newValue);
-                        onFilterRef.current?.(newValue);
-                    }
-                    else {
-                        setNumber('');
-                        onChangeRef.current(null);
-                        onFilterRef.current?.(null);
-                    }
-                },
-                clear: () => {
-                    setNumber('');
-                    setComparator(defaultComparator);
-                    onChangeRef.current(null);
-                    onFilterRef.current?.(null);
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFilter]);
-    // Track if input should be focused
-    const hasFocusRef = useRef(false);
-    // Track focus state
-    const handleFocus = useCallback(() => {
-        hasFocusRef.current = true;
-    }, []);
-    const handleBlur = useCallback(() => {
-        hasFocusRef.current = false;
-    }, []);
-    // Restore focus after re-renders if it was focused
-    useEffect(() => {
-        if (hasFocusRef.current && inputRef.current) {
-            requestAnimationFrame(() => {
-                if (hasFocusRef.current && inputRef.current) {
-                    inputRef.current.focus();
-                }
-            });
-        }
-    });
-    // Handle comparator change - trigger immediate filter update
-    const handleComparatorChange = useCallback((newComparator) => {
-        setComparator(newComparator);
-        if (number) {
-            const newValue = { number, comparator: newComparator };
-            onChangeRef.current(newValue);
-            onFilterRef.current?.(newValue);
-        }
-    }, [number]);
-    const comparatorSymbols = {
-        '=': '=',
-        '!=': '≠',
-        '>': '>',
-        '>=': '≥',
-        '<': '<',
-        '<=': '≤',
-    };
-    const inputStyle = {
-        flex: 1,
-        fontWeight: 400,
-        ...style,
-    };
-    const inputProps = {
-        type: 'text',
-        id,
-        'data-filter-field': column.dataField,
-        value: number,
-        onChange: (e) => {
-            const val = e.target.value;
-            const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
-            if (pattern.test(val)) {
-                setNumber(val);
-            }
-        },
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        placeholder: placeholder || column.filterPlaceholder || 'Number...',
-        disabled,
-    };
-    return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) => handleComparatorChange(e.target.value), disabled: disabled, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), className ? (_jsx("input", { ref: inputRef, ...inputProps, className: className, style: { flex: 1, width: '100%', fontWeight: 400, ...style } })) : (_jsx(FilterInputBase, { ref: inputRef, ...inputProps, style: inputStyle }))] }));
-};
-export function NumberFilter(optionsOrProps) {
-    if (!('column' in optionsOrProps) &&
-        !('value' in optionsOrProps) &&
-        !('onChange' in optionsOrProps)) {
-        const options = optionsOrProps;
-        const FilterWithOptions = (props) => (_jsx(NumberFilterComponent, { ...props, options: options }));
-        FilterWithOptions.displayName = 'NumberFilter';
-        return FilterWithOptions;
-    }
-    const props = optionsOrProps;
-    return _jsx(NumberFilterComponent, { ...props });
-}
-/**
- * Internal Date filter component with options support
- */
-const DateFilterComponent = ({ column, value, onChange, options }) => {
-    const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter, id, disabled, minDate, maxDate, } = options || {};
-    // Local state for immediate updates
-    const [startDate, setStartDate] = useState(value?.startDate || defaultValue?.startDate || '');
-    const [endDate, setEndDate] = useState(value?.endDate || defaultValue?.endDate || '');
-    const [diffFlag, setDiffFlag] = useState(value?.diffFlag ?? defaultValue?.diffFlag ?? defaultRangeMode);
-    const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
-    const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
-    const onChangeRef = useRef(onChange);
-    const onFilterRef = useRef(onFilter);
-    // Track last values sent to parent to prevent sync loops
-    const lastValuesRef = useRef({
-        startDate,
-        endDate,
-        diffFlag,
-        comparator,
-    });
-    // Keep refs in sync with state
-    useEffect(() => {
-        stateRef.current = { startDate, endDate, diffFlag, comparator };
-    }, [startDate, endDate, diffFlag, comparator]);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-        onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
-    // Sync internal value when external value changes (e.g., from clear all filters)
-    useEffect(() => {
-        const externalStartDate = value?.startDate || '';
-        const externalEndDate = value?.endDate || '';
-        const externalDiffFlag = value?.diffFlag ?? defaultRangeMode;
-        const externalComparator = value?.comparator || defaultComparator;
-        // Only sync if different from what we last sent to parent
-        if (externalStartDate !== lastValuesRef.current.startDate) {
-            setStartDate(externalStartDate);
-            lastValuesRef.current.startDate = externalStartDate;
-        }
-        if (externalEndDate !== lastValuesRef.current.endDate) {
-            setEndDate(externalEndDate);
-            lastValuesRef.current.endDate = externalEndDate;
-        }
-        if (externalDiffFlag !== lastValuesRef.current.diffFlag) {
-            setDiffFlag(externalDiffFlag);
-            lastValuesRef.current.diffFlag = externalDiffFlag;
-        }
-        if (externalComparator !== lastValuesRef.current.comparator) {
-            setComparator(externalComparator);
-            lastValuesRef.current.comparator = externalComparator;
-        }
-    }, [value, defaultRangeMode, defaultComparator]);
-    // Debounce the date values
-    const [debouncedStartDate] = useDebouncedValue(startDate, { wait: 500 });
-    const [debouncedEndDate] = useDebouncedValue(endDate, { wait: 500 });
-    // Propagate debounced value to parent
-    useEffect(() => {
-        // Update refs to track what we're sending to parent
-        lastValuesRef.current = {
-            startDate: debouncedStartDate,
-            endDate: debouncedEndDate,
-            diffFlag,
-            comparator,
-        };
-        const newValue = debouncedStartDate || debouncedEndDate
-            ? {
-                startDate: debouncedStartDate,
-                endDate: debouncedEndDate,
-                diffFlag,
-                comparator,
-            }
-            : null;
-        onChangeRef.current(newValue);
-        onFilterRef.current?.(newValue);
-    }, [debouncedStartDate, debouncedEndDate, diffFlag, comparator]);
-    // Provide filter instance via getFilter callback - only on mount
-    useEffect(() => {
-        if (getFilter) {
-            getFilter({
-                get value() {
-                    const { startDate: s, endDate: e, diffFlag: d, comparator: c, } = stateRef.current;
-                    return s || e
-                        ? { startDate: s, endDate: e, diffFlag: d, comparator: c }
-                        : null;
-                },
-                setValue: (newValue) => {
-                    if (newValue) {
-                        setStartDate(newValue.startDate || '');
-                        setEndDate(newValue.endDate || '');
-                        setDiffFlag(newValue.diffFlag ?? defaultRangeMode);
-                        setComparator(newValue.comparator || defaultComparator);
-                        onChangeRef.current(newValue);
-                        onFilterRef.current?.(newValue);
-                    }
-                    else {
-                        setStartDate('');
-                        setEndDate('');
-                        onChangeRef.current(null);
-                        onFilterRef.current?.(null);
-                    }
-                },
-                clear: () => {
-                    setStartDate('');
-                    setEndDate('');
-                    setDiffFlag(defaultRangeMode);
-                    setComparator(defaultComparator);
-                    onChangeRef.current(null);
-                    onFilterRef.current?.(null);
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFilter]);
-    // Simple change handlers - just update local state
-    const handleStartDateChange = useCallback((e) => {
-        setStartDate(e.target.value);
-    }, []);
-    const handleEndDateChange = useCallback((e) => {
-        setEndDate(e.target.value);
-    }, []);
-    const handleDiffFlagChange = useCallback(() => {
-        setDiffFlag((prev) => !prev);
-    }, []);
-    const handleComparatorChange = useCallback((e) => {
-        setComparator(e.target.value);
-    }, []);
-    return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: handleDiffFlagChange, title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: handleComparatorChange, disabled: disabled, style: { fontWeight: 400 }, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: handleStartDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12, fontWeight: 400 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: handleEndDateChange, disabled: disabled, min: minDate, max: maxDate, style: { fontWeight: 400 } })] }))] }));
-};
-export function DateFilter(optionsOrProps) {
-    if (!('column' in optionsOrProps) &&
-        !('value' in optionsOrProps) &&
-        !('onChange' in optionsOrProps)) {
-        const options = optionsOrProps;
-        const FilterWithOptions = (props) => (_jsx(DateFilterComponent, { ...props, options: options }));
-        FilterWithOptions.displayName = 'DateFilter';
-        return FilterWithOptions;
-    }
-    const props = optionsOrProps;
-    return _jsx(DateFilterComponent, { ...props });
-}
-/**
- * Internal Select filter component with options support
- */
-const SelectFilterComponent = ({ column, value, onChange, options }) => {
-    const { placeholder = 'All', className, style, defaultValue, delay = 300, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
-    // Local state for immediate updates
-    const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
-    const selectedValueRef = useRef(selectedValue);
-    const onChangeRef = useRef(onChange);
-    const onFilterRef = useRef(onFilter);
-    // Track last value sent to parent to prevent sync loops
-    const lastValueRef = useRef(selectedValue);
-    // Keep refs in sync with state
-    useEffect(() => {
-        selectedValueRef.current = selectedValue;
-    }, [selectedValue]);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-        onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
-    // Sync internal value when external value changes (e.g., from clear all filters)
-    useEffect(() => {
-        const externalValue = value || '';
-        // Only sync if different from what we last sent to parent
-        if (externalValue !== lastValueRef.current) {
-            setSelectedValue(externalValue);
-            lastValueRef.current = externalValue;
-        }
-    }, [value]);
-    // Debounce the selected value
-    const [debouncedValue] = useDebouncedValue(selectedValue, { wait: delay });
-    // Propagate debounced value to parent
-    useEffect(() => {
-        // Update ref to track what we're sending to parent
-        lastValueRef.current = debouncedValue || '';
-        onChangeRef.current(debouncedValue || null);
-        onFilterRef.current?.(debouncedValue || null);
-    }, [debouncedValue]);
-    // Provide filter instance via getFilter callback - only on mount
-    useEffect(() => {
-        if (getFilter) {
-            getFilter({
-                get value() {
-                    return selectedValueRef.current || null;
-                },
-                setValue: (newValue) => {
-                    setSelectedValue(newValue || '');
-                    onChangeRef.current(newValue);
-                    onFilterRef.current?.(newValue);
-                },
-                clear: () => {
-                    setSelectedValue('');
-                    onChangeRef.current(null);
-                    onFilterRef.current?.(null);
-                },
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFilter]);
-    // Simple change handler - just update local state
-    const handleChange = useCallback((e) => {
-        setSelectedValue(e.target.value);
-    }, []);
-    // Use custom options if provided, otherwise fall back to column.filterOptions
-    const selectOptions = customOptions || column.filterOptions || [];
-    const selectContent = (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: placeholder }), selectOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
-    // If custom className is provided, use plain select to allow full CSS control
-    if (className) {
-        return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
-    }
-    return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: { fontWeight: 400, ...style }, disabled: disabled, children: selectContent }));
-};
-export function SelectFilter(optionsOrProps) {
-    if (!('column' in optionsOrProps) &&
-        !('value' in optionsOrProps) &&
-        !('onChange' in optionsOrProps)) {
-        const options = optionsOrProps;
-        const FilterWithOptions = (props) => (_jsx(SelectFilterComponent, { ...props, options: options }));
-        FilterWithOptions.displayName = 'SelectFilter';
-        return FilterWithOptions;
-    }
-    const props = optionsOrProps;
-    return _jsx(SelectFilterComponent, { ...props });
-}
-/**
- * Get filter component based on type
- */
-export const getFilterComponent = (type) => {
-    switch (type) {
-        case 'number':
-            return NumberFilter;
-        case 'date':
-        case 'dateRange':
-            return DateFilter;
-        case 'select':
-            return SelectFilter;
-        default:
-            return TextFilter;
-    }
-};
+`,P=({column:e,value:n,onChange:s,options:h})=>{const{placeholder:x,className:z,style:S,defaultValue:W,delay:V=500,getFilter:C,onFilter:w,id:k,disabled:$}=h||{},[D,b]=_(n||W||""),F=f(D),y=f(null),o=f(s),p=f(w),l=f(D);d(()=>{F.current=D},[D]),d(()=>{o.current=s,p.current=w},[s,w]),d(()=>{const u=n||"";u!==l.current&&(b(u),l.current=u)},[n]);const[g]=H(D,{wait:V});d(()=>{l.current=g||"",o.current(g||null),p.current?.(g)},[g]),d(()=>{C&&C({get value(){return F.current},setValue:u=>{b(u),o.current(u||null),p.current?.(u)},clear:()=>{b(""),o.current(null),p.current?.("")}})},[C]);const m=f(!1),R=B(u=>{b(u.target.value)},[]),v=B(()=>{m.current=!0},[]),r=B(()=>{m.current=!1},[]);d(()=>{m.current&&y.current&&requestAnimationFrame(()=>{m.current&&y.current&&y.current.focus()})});const N={fontWeight:400,...S};return z?c("input",{ref:y,type:"text",id:k,"data-filter-field":e.dataField,value:D,onChange:R,onFocus:v,onBlur:r,placeholder:x||e.filterPlaceholder||`Filter ${e.text}...`,className:z,style:{width:"100%",fontWeight:400,...S},disabled:$}):c(Y,{ref:y,type:"text",id:k,"data-filter-field":e.dataField,value:D,onChange:R,onFocus:v,onBlur:r,placeholder:x||e.filterPlaceholder||`Filter ${e.text}...`,style:N,disabled:$})};export function TextFilter(e){if(!("column"in e)&&!("value"in e)&&!("onChange"in e)){const s=e,h=x=>c(P,{...x,options:s});return h.displayName="TextFilter",h}return c(P,{...e})}const ee=({column:e,value:n,onChange:s,options:h})=>{const{placeholder:x,className:z,style:S,defaultValue:W,delay:V=500,defaultComparator:C="=",allowDecimal:w=!0,getFilter:k,onFilter:$,id:D,disabled:b,hideComparator:F,comparators:y=["=","!=",">",">=","<","<="]}=h||{},[o,p]=_(n?.number||W?.number||""),[l,g]=_(n?.comparator||W?.comparator||C),m=f(o),R=f(l),v=f(null),r=f(s),N=f($),u=f(o),I=f(l);d(()=>{m.current=o,R.current=l},[o,l]),d(()=>{r.current=s,N.current=$},[s,$]),d(()=>{const t=n?.number||"",j=n?.comparator||C;t!==u.current&&(p(t),u.current=t),j!==I.current&&(g(j),I.current=j)},[n,C]);const[E]=H(o,{wait:V});d(()=>{u.current=E||"",I.current=R.current;const t=E?{number:E,comparator:R.current}:null;r.current(t),N.current?.(t)},[E]),d(()=>{k&&k({get value(){return m.current?{number:m.current,comparator:R.current}:null},setValue:t=>{t?(p(t.number),g(t.comparator),r.current(t),N.current?.(t)):(p(""),r.current(null),N.current?.(null))},clear:()=>{p(""),g(C),r.current(null),N.current?.(null)}})},[k]);const q=f(!1),J=B(()=>{q.current=!0},[]),K=B(()=>{q.current=!1},[]);d(()=>{q.current&&v.current&&requestAnimationFrame(()=>{q.current&&v.current&&v.current.focus()})});const L=B(t=>{if(g(t),o){const j={number:o,comparator:t};r.current(j),N.current?.(j)}},[o]),a={"=":"=","!=":"\u2260",">":">",">=":"\u2265","<":"<","<=":"\u2264"},T={flex:1,fontWeight:400,...S},A={type:"text",id:D,"data-filter-field":e.dataField,value:o,onChange:t=>{const j=t.target.value;(w?/^[0-9.,]*$/:/^[0-9]*$/).test(j)&&p(j)},onFocus:J,onBlur:K,placeholder:x||e.filterPlaceholder||"Number...",disabled:b};return G(X,{children:[!F&&c(Z,{value:l,onChange:t=>L(t.target.value),disabled:b,children:y.map(t=>c("option",{value:t,children:a[t]||t},t))}),z?c("input",{ref:v,...A,className:z,style:{flex:1,width:"100%",fontWeight:400,...S}}):c(Y,{ref:v,...A,style:T})]})};export function NumberFilter(e){if(!("column"in e)&&!("value"in e)&&!("onChange"in e)){const s=e,h=x=>c(ee,{...x,options:s});return h.displayName="NumberFilter",h}return c(ee,{...e})}const te=({column:e,value:n,onChange:s,options:h})=>{const{className:x,style:z,defaultValue:S,defaultComparator:W="=",defaultRangeMode:V=!1,getFilter:C,onFilter:w,id:k,disabled:$,minDate:D,maxDate:b}=h||{},[F,y]=_(n?.startDate||S?.startDate||""),[o,p]=_(n?.endDate||S?.endDate||""),[l,g]=_(n?.diffFlag??S?.diffFlag??V),[m,R]=_(n?.comparator||S?.comparator||W),v=f({startDate:F,endDate:o,diffFlag:l,comparator:m}),r=f(s),N=f(w),u=f({startDate:F,endDate:o,diffFlag:l,comparator:m});d(()=>{v.current={startDate:F,endDate:o,diffFlag:l,comparator:m}},[F,o,l,m]),d(()=>{r.current=s,N.current=w},[s,w]),d(()=>{const a=n?.startDate||"",T=n?.endDate||"",A=n?.diffFlag??V,t=n?.comparator||W;a!==u.current.startDate&&(y(a),u.current.startDate=a),T!==u.current.endDate&&(p(T),u.current.endDate=T),A!==u.current.diffFlag&&(g(A),u.current.diffFlag=A),t!==u.current.comparator&&(R(t),u.current.comparator=t)},[n,V,W]);const[I]=H(F,{wait:500}),[E]=H(o,{wait:500});d(()=>{u.current={startDate:I,endDate:E,diffFlag:l,comparator:m};const a=I||E?{startDate:I,endDate:E,diffFlag:l,comparator:m}:null;r.current(a),N.current?.(a)},[I,E,l,m]),d(()=>{C&&C({get value(){const{startDate:a,endDate:T,diffFlag:A,comparator:t}=v.current;return a||T?{startDate:a,endDate:T,diffFlag:A,comparator:t}:null},setValue:a=>{a?(y(a.startDate||""),p(a.endDate||""),g(a.diffFlag??V),R(a.comparator||W),r.current(a),N.current?.(a)):(y(""),p(""),r.current(null),N.current?.(null))},clear:()=>{y(""),p(""),g(V),R(W),r.current(null),N.current?.(null)}})},[C]);const q=B(a=>{y(a.target.value)},[]),J=B(a=>{p(a.target.value)},[]),K=B(()=>{g(a=>!a)},[]),L=B(a=>{R(a.target.value)},[]);return G(X,{className:x,style:z,children:[c(ae,{$active:l,onClick:K,title:"Date range mode",disabled:$,children:l?"Range":"Single"}),!l&&G(Z,{value:m,onChange:L,disabled:$,style:{fontWeight:400},children:[c("option",{value:"=",children:"="}),c("option",{value:">=",children:"\u2265"}),c("option",{value:"<",children:"<"})]}),c(O,{type:"date",id:k,value:F,onChange:q,disabled:$,min:D,max:b,style:{fontWeight:400}}),l&&G(Q,{children:[c("span",{style:{color:"#6b7280",fontSize:12,fontWeight:400},children:"to"}),c(O,{type:"date",value:o,onChange:J,disabled:$,min:D,max:b,style:{fontWeight:400}})]})]})};export function DateFilter(e){if(!("column"in e)&&!("value"in e)&&!("onChange"in e)){const s=e,h=x=>c(te,{...x,options:s});return h.displayName="DateFilter",h}return c(te,{...e})}const re=({column:e,value:n,onChange:s,options:h})=>{const{placeholder:x="All",className:z,style:S,defaultValue:W,delay:V=300,options:C,getFilter:w,onFilter:k,id:$,disabled:D}=h||{},[b,F]=_(n||W||""),y=f(b),o=f(s),p=f(k),l=f(b);d(()=>{y.current=b},[b]),d(()=>{o.current=s,p.current=k},[s,k]),d(()=>{const r=n||"";r!==l.current&&(F(r),l.current=r)},[n]);const[g]=H(b,{wait:V});d(()=>{l.current=g||"",o.current(g||null),p.current?.(g||null)},[g]),d(()=>{w&&w({get value(){return y.current||null},setValue:r=>{F(r||""),o.current(r),p.current?.(r)},clear:()=>{F(""),o.current(null),p.current?.(null)}})},[w]);const m=B(r=>{F(r.target.value)},[]),R=C||e.filterOptions||[],v=G(Q,{children:[c("option",{value:"",children:x}),R.map(r=>c("option",{value:r.value,children:r.label},r.value))]});return z?c("select",{id:$,value:b,onChange:m,className:z,style:{width:"100%",fontWeight:400,...S},disabled:D,children:v}):c(ne,{id:$,value:b,onChange:m,style:{fontWeight:400,...S},disabled:D,children:v})};export function SelectFilter(e){if(!("column"in e)&&!("value"in e)&&!("onChange"in e)){const s=e,h=x=>c(re,{...x,options:s});return h.displayName="SelectFilter",h}return c(re,{...e})}export const getFilterComponent=e=>{switch(e){case"number":return NumberFilter;case"date":case"dateRange":return DateFilter;case"select":return SelectFilter;default:return TextFilter}};