react-restyle-components 0.4.39 → 0.4.40

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

@@ -1,64 +1,74 @@
-"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`
+'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 `
   display: flex;
   align-items: center;
   gap: 3px;
-`,Y=M.input`
+`;
+const FilterInputBase = styled.input `
   width: 100%;
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
   font-weight: normal;
   color: #000000;
-  border: 1px solid ${i.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   background: white;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${i.primary||"#94a3b8"};
+    border-color: ${tokens.primary || '#94a3b8'};
   }
 
   &:focus {
     outline: none;
-    border-color: ${i.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
     box-shadow: 0 0 0 1px
-      ${i.primary?`${i.primary}20`:"#3b82f620"};
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
 
   &::placeholder {
-    color: ${i.onSurface?`${i.onSurface}50`:"#94a3af"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#94a3af'};
     font-size: 9px;
   }
-`,ne=M.select`
+`;
+const FilterSelectBase = styled.select `
   width: 100%;
   height: 22px;
   padding: 0 5px;
   font-size: 10px;
   font-weight: normal;
   color: #000000;
-  border: 1px solid ${i.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   background: white;
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${i.primary||"#94a3b8"};
+    border-color: ${tokens.primary || '#94a3b8'};
   }
 
   &:focus {
     outline: none;
-    border-color: ${i.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
     box-shadow: 0 0 0 1px
-      ${i.primary?`${i.primary}20`:"#3b82f620"};
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
-`,Z=M.select`
+`;
+const ComparatorSelect = styled.select `
   width: 38px;
   height: 22px;
   padding: 0 2px;
   font-size: 9px;
   font-weight: normal;
-  border: 1px solid ${i.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   background: white;
   cursor: pointer;
@@ -67,56 +77,571 @@
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${i.primary||"#94a3b8"};
+    border-color: ${tokens.primary || '#94a3b8'};
   }
 
   &:focus {
     outline: none;
-    border-color: ${i.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
   }
-`,O=M.input`
+`;
+const DateInput = styled.input `
   flex: 1;
   height: 22px;
   padding: 0 4px;
   font-size: 10px;
-  border: 1px solid ${i.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   background: white;
   min-width: 80px;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${i.primary||"#94a3b8"};
+    border-color: ${tokens.primary || '#94a3b8'};
   }
 
   &:focus {
     outline: none;
-    border-color: ${i.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
     box-shadow: 0 0 0 1px
-      ${i.primary?`${i.primary}20`:"#3b82f620"};
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
-`,ae=M.button`
+`;
+const ToggleButton = styled.button `
   height: 22px;
   padding: 0 5px;
   font-size: 9px;
   font-weight: normal;
-  border: 1px solid ${i.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
 
-  ${({$active:e})=>e?U`
-          background: ${i.primary||"#3b82f6"};
+  ${({ $active }) => $active
+    ? css `
+          background: ${tokens.primary || '#3b82f6'};
           color: white;
-          border-color: ${i.primary||"#3b82f6"};
-        `:U`
+          border-color: ${tokens.primary || '#3b82f6'};
+        `
+    : css `
           background: white;
-          color: ${i.onSurface||"#374151"};
+          color: ${tokens.onSurface || '#374151'};
 
           &:hover {
             background: #f8fafc;
-            border-color: ${i.primary||"#94a3b8"};
+            border-color: ${tokens.primary || '#94a3b8'};
           }
         `}
-`,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}};
+`;
+/**
+ * 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;
+    }
+};