react-restyle-components 0.4.49 → 0.4.51

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

@@ -1,149 +1,28 @@
 '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;
-`;
-const FilterInputBase = styled.input `
-  width: 100%;
-  height: 22px;
-  padding: 0 5px;
-  font-size: 10px;
-  font-weight: normal;
-  color: #000000;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
-  border-radius: 2px;
-  background: white;
-  transition: all 0.15s ease;
-
-  &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
-    box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
-  }
-
-  &::placeholder {
-    color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#94a3af'};
-    font-size: 9px;
-  }
-`;
-const FilterSelectBase = styled.select `
-  width: 100%;
-  height: 22px;
-  padding: 0 5px;
-  font-size: 10px;
-  font-weight: normal;
-  color: #000000;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
-  border-radius: 2px;
-  background: white;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
-    box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
-  }
-`;
-const ComparatorSelect = styled.select `
-  width: 38px;
-  height: 22px;
-  padding: 0 2px;
-  font-size: 9px;
-  font-weight: normal;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
-  border-radius: 2px;
-  background: white;
-  cursor: pointer;
-  flex-shrink: 0;
-  text-align: center;
-  transition: all 0.15s ease;
-
-  &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
-  }
-`;
-const DateInput = styled.input `
-  flex: 1;
-  height: 22px;
-  padding: 0 4px;
-  font-size: 10px;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
-  border-radius: 2px;
-  background: white;
-  min-width: 80px;
-  transition: all 0.15s ease;
-
-  &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
-    box-shadow: 0 0 0 1px
-      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
-  }
-`;
-const ToggleButton = styled.button `
-  height: 22px;
-  padding: 0 5px;
-  font-size: 9px;
-  font-weight: normal;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
-  border-radius: 2px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-
-  ${({ $active }) => $active
-    ? css `
-          background: ${tokens.primary || '#3b82f6'};
-          color: white;
-          border-color: ${tokens.primary || '#3b82f6'};
-        `
-    : css `
-          background: white;
-          color: ${tokens.onSurface || '#374151'};
-
-          &:hover {
-            background: #f8fafc;
-            border-color: ${tokens.primary || '#94a3b8'};
-          }
-        `}
-`;
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+// Tailwind CSS class helpers for filter components
+const filterInputClass = cn(s['leading-4'], s['p-1'], s['focus:outline-none'], s['focus:ring'], s['shadow-sm'], s['text-xs'], s['font-normal'], s['border'], s['border-gray-300'], s['rounded-md'], s['text-black'], s['w-full'], s['bg-white'], s['placeholder-gray-400'], s['transition-all']);
+const filterSelectClass = cn(s['leading-4'], s['p-1'], s['focus:outline-none'], s['focus:ring'], s['shadow-sm'], s['text-xs'], s['font-normal'], s['border'], s['border-gray-300'], s['rounded-md'], s['text-black'], s['w-full'], s['bg-white'], s['cursor-pointer'], s['transition-all']);
+const comparatorSelectClass = cn(s['leading-4'], s['p-1'], s['focus:outline-none'], s['focus:ring'], s['shadow-sm'], s['text-xs'], s['font-normal'], s['border'], s['border-gray-300'], s['rounded-md'], s['text-black'], s['bg-white'], s['cursor-pointer'], s['w-12']);
+const dateInputClass = cn(s['leading-4'], s['p-1'], s['focus:outline-none'], s['focus:ring'], s['shadow-sm'], s['text-xs'], s['font-normal'], s['border'], s['border-gray-300'], s['rounded-md'], s['text-black'], s['bg-white'], s['flex-1'], s['transition-all']);
+const filterContainerClass = cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center'], s['w-full']);
 /**
  * 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 || {};
+const TextFilterComponent = ({ column, value, onChange, onFilter: onFilterProp, options }) => {
+    const { placeholder, className, style, defaultValue, delay = 500, getFilter, onFilter: onFilterOption, id, disabled, } = options || {};
+    // Support both onChange and onFilter props (onFilter is alias for onChange)
+    const onChangeCallback = onChange || onFilterProp || (() => { });
+    const onFilter = onFilterOption;
     // 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 onChangeRef = useRef(onChangeCallback);
     const onFilterRef = useRef(onFilter);
     // Track if the last change was from user input (internal) vs external (e.g., clear all)
     const lastInternalValueRef = useRef(internalValue);
@@ -152,9 +31,9 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
         internalValueRef.current = internalValue;
     }, [internalValue]);
     useEffect(() => {
-        onChangeRef.current = onChange;
+        onChangeRef.current = onChangeCallback;
         onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
+    }, [onChangeCallback, 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(() => {
@@ -220,19 +99,7 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
             });
         }
     });
-    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 }));
+    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 || filterInputClass, style: style, disabled: disabled }));
 };
 export function TextFilter(optionsOrProps) {
     // Check if it's being used as a factory function (options object without column/value/onChange)
@@ -243,6 +110,9 @@ export function TextFilter(optionsOrProps) {
         const options = optionsOrProps;
         const FilterWithOptions = (props) => (_jsx(TextFilterComponent, { ...props, options: options }));
         FilterWithOptions.displayName = 'TextFilter';
+        // Attach options as props for backwards compatibility
+        // This allows accessing: column.filter.props.getFilter
+        FilterWithOptions.props = options;
         return FilterWithOptions;
     }
     // Direct component usage
@@ -252,15 +122,18 @@ export function TextFilter(optionsOrProps) {
 /**
  * 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 || {};
+const NumberFilterComponent = ({ column, value, onChange, onFilter: onFilterProp, options }) => {
+    const { placeholder, className, style, defaultValue, delay = 500, defaultComparator = '=', allowDecimal = true, getFilter, onFilter: onFilterOption, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
+    // Support both onChange and onFilter props (onFilter is alias for onChange)
+    const onChangeCallback = onChange || onFilterProp || (() => { });
+    const onFilter = onFilterOption;
     // 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 onChangeRef = useRef(onChangeCallback);
     const onFilterRef = useRef(onFilter);
     // Track last value sent to parent to prevent sync loops
     const lastNumberRef = useRef(number);
@@ -271,9 +144,9 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
         comparatorRef.current = comparator;
     }, [number, comparator]);
     useEffect(() => {
-        onChangeRef.current = onChange;
+        onChangeRef.current = onChangeCallback;
         onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
+    }, [onChangeCallback, onFilter]);
     // Sync internal value when external value changes (e.g., from clear all filters)
     useEffect(() => {
         const externalNumber = value?.number || '';
@@ -299,7 +172,8 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
             ? { number: debouncedNumber, comparator: comparatorRef.current }
             : null;
         onChangeRef.current(newValue);
-        onFilterRef.current?.(newValue);
+        // onFilter passes string value directly
+        onFilterRef.current?.(debouncedNumber || null);
     }, [debouncedNumber]);
     // Provide filter instance via getFilter callback - only on mount
     useEffect(() => {
@@ -311,11 +185,13 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
                         : null;
                 },
                 setValue: (newValue) => {
-                    if (newValue) {
-                        setNumber(newValue.number);
-                        setComparator(newValue.comparator);
-                        onChangeRef.current(newValue);
-                        onFilterRef.current?.(newValue);
+                    if (newValue !== null && newValue !== undefined) {
+                        const num = typeof newValue === 'object' ? newValue.number : String(newValue);
+                        const comp = typeof newValue === 'object' ? newValue.comparator : comparatorRef.current;
+                        setNumber(num);
+                        setComparator(comp);
+                        onChangeRef.current({ number: num, comparator: comp });
+                        onFilterRef.current?.(num);
                     }
                     else {
                         setNumber('');
@@ -356,9 +232,8 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
     const handleComparatorChange = useCallback((newComparator) => {
         setComparator(newComparator);
         if (number) {
-            const newValue = { number, comparator: newComparator };
-            onChangeRef.current(newValue);
-            onFilterRef.current?.(newValue);
+            onChangeRef.current({ number, comparator: newComparator });
+            onFilterRef.current?.(number);
         }
     }, [number]);
     const comparatorSymbols = {
@@ -369,29 +244,19 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
         '<': '<',
         '<=': '≤',
     };
-    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 }))] }));
+    // Resolve placeholder: own options > column.filter.props.placeholder > column.filterPlaceholder > default
+    const resolvedPlaceholder = placeholder ||
+        column?.filter?.props?.placeholder ||
+        column.filterPlaceholder ||
+        'Number...';
+    const handleInputChange = useCallback((e) => {
+        const val = e.target.value;
+        const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
+        if (pattern.test(val)) {
+            setNumber(val);
+        }
+    }, [allowDecimal]);
+    return (_jsxs("div", { className: filterContainerClass, children: [!hideComparator && (_jsx("select", { value: comparator, onChange: (e) => handleComparatorChange(e.target.value), disabled: disabled, className: className || comparatorSelectClass, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), _jsx("input", { ref: inputRef, type: "text", id: id, "data-filter-field": column.dataField, value: number, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: resolvedPlaceholder, className: className || filterInputClass, style: style, disabled: disabled })] }));
 };
 export function NumberFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&
@@ -400,6 +265,8 @@ export function NumberFilter(optionsOrProps) {
         const options = optionsOrProps;
         const FilterWithOptions = (props) => (_jsx(NumberFilterComponent, { ...props, options: options }));
         FilterWithOptions.displayName = 'NumberFilter';
+        // Attach options as props for backwards compatibility
+        FilterWithOptions.props = options;
         return FilterWithOptions;
     }
     const props = optionsOrProps;
@@ -408,15 +275,18 @@ export function NumberFilter(optionsOrProps) {
 /**
  * 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 || {};
+const DateFilterComponent = ({ column, value, onChange, onFilter: onFilterProp, options }) => {
+    const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter: onFilterOption, id, disabled, minDate, maxDate, } = options || {};
+    // Support both onChange and onFilter props (onFilter is alias for onChange)
+    const handleChange = onChange || onFilterProp || (() => { });
+    const onFilter = onFilterOption;
     // 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 onChangeRef = useRef(handleChange);
     const onFilterRef = useRef(onFilter);
     // Track last values sent to parent to prevent sync loops
     const lastValuesRef = useRef({
@@ -430,9 +300,9 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
         stateRef.current = { startDate, endDate, diffFlag, comparator };
     }, [startDate, endDate, diffFlag, comparator]);
     useEffect(() => {
-        onChangeRef.current = onChange;
+        onChangeRef.current = handleChange;
         onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
+    }, [handleChange, onFilter]);
     // Sync internal value when external value changes (e.g., from clear all filters)
     useEffect(() => {
         const externalStartDate = value?.startDate || '';
@@ -531,7 +401,25 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
     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 } })] }))] }));
+    // Show/hide the expanded filter UI - initially collapsed (search icon only)
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Collapsed view: show column text + search icon
+    if (!isExpanded) {
+        return (_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-2'], s['items-center'], s['cursor-pointer']), onClick: () => setIsExpanded(true), title: "Click to open date filter", children: [_jsx("span", { className: cn(s['text-white'], s['text-xs'], s['font-normal']), children: column.text }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { color: 'white', cursor: 'pointer', flexShrink: 0 }, children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })] }));
+    }
+    // Expanded view: full date filter UI
+    return (_jsxs("div", { className: cn(filterContainerClass, className), style: style, children: [_jsx("button", { type: "button", onClick: handleDiffFlagChange, title: "Date range mode", disabled: disabled, className: cn(s['text-xs'], s['font-normal'], s['px-2'], s['py-1'], s['border'], s['rounded-md'], s['cursor-pointer'], s['whitespace-nowrap'], s['transition-all'], s['focus:outline-none'], diffFlag
+                    ? cn(s['bg-blue-500'], s['text-white'], s['border-blue-500'])
+                    : cn(s['bg-white'], s['text-black'], s['border-gray-300'], s['hover:bg-gray-50'])), children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs("select", { value: comparator, onChange: handleComparatorChange, disabled: disabled, className: comparatorSelectClass, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx("input", { type: "date", id: id, value: startDate, onChange: handleStartDateChange, disabled: disabled, min: minDate, max: maxDate, className: dateInputClass }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(s['text-xs'], s['text-gray-500'], s['font-normal']), children: "to" }), _jsx("input", { type: "date", value: endDate, onChange: handleEndDateChange, disabled: disabled, min: minDate, max: maxDate, className: dateInputClass })] })), _jsx("button", { type: "button", onClick: () => {
+                    setIsExpanded(false);
+                    // Clear filter when collapsing
+                    setStartDate('');
+                    setEndDate('');
+                    setDiffFlag(defaultRangeMode);
+                    setComparator(defaultComparator);
+                    onChangeRef.current(null);
+                    onFilterRef.current?.(null);
+                }, title: "Close date filter", className: cn(s['text-xs'], s['p-1'], s['cursor-pointer'], s['text-gray-400'], s['hover:text-red-500'], s['focus:outline-none'], s['transition-all']), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }));
 };
 export function DateFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&
@@ -540,6 +428,8 @@ export function DateFilter(optionsOrProps) {
         const options = optionsOrProps;
         const FilterWithOptions = (props) => (_jsx(DateFilterComponent, { ...props, options: options }));
         FilterWithOptions.displayName = 'DateFilter';
+        // Attach options as props for backwards compatibility
+        FilterWithOptions.props = options;
         return FilterWithOptions;
     }
     const props = optionsOrProps;
@@ -548,12 +438,15 @@ export function DateFilter(optionsOrProps) {
 /**
  * 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 || {};
+const SelectFilterComponent = ({ column, value, onChange, onFilter: onFilterProp, options }) => {
+    const { placeholder = 'All', className, style, defaultValue, delay = 300, options: customOptions, getFilter, onFilter: onFilterOption, id, disabled, } = options || {};
+    // Support both onChange and onFilter props (onFilter is alias for onChange)
+    const onChangeCallback = onChange || onFilterProp || (() => { });
+    const onFilter = onFilterOption;
     // Local state for immediate updates
     const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
     const selectedValueRef = useRef(selectedValue);
-    const onChangeRef = useRef(onChange);
+    const onChangeRef = useRef(onChangeCallback);
     const onFilterRef = useRef(onFilter);
     // Track last value sent to parent to prevent sync loops
     const lastValueRef = useRef(selectedValue);
@@ -562,9 +455,9 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
         selectedValueRef.current = selectedValue;
     }, [selectedValue]);
     useEffect(() => {
-        onChangeRef.current = onChange;
+        onChangeRef.current = onChangeCallback;
         onFilterRef.current = onFilter;
-    }, [onChange, onFilter]);
+    }, [onChangeCallback, onFilter]);
     // Sync internal value when external value changes (e.g., from clear all filters)
     useEffect(() => {
         const externalValue = value || '';
@@ -611,11 +504,7 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
     // 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 }));
+    return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className || filterSelectClass, style: style, disabled: disabled, children: selectContent }));
 };
 export function SelectFilter(optionsOrProps) {
     if (!('column' in optionsOrProps) &&
@@ -624,11 +513,234 @@ export function SelectFilter(optionsOrProps) {
         const options = optionsOrProps;
         const FilterWithOptions = (props) => (_jsx(SelectFilterComponent, { ...props, options: options }));
         FilterWithOptions.displayName = 'SelectFilter';
+        // Attach options as props for backwards compatibility
+        FilterWithOptions.props = options;
         return FilterWithOptions;
     }
     const props = optionsOrProps;
     return _jsx(SelectFilterComponent, { ...props });
 }
+/**
+ * Internal Custom filter component with options support
+ */
+const CustomFilterComponent = ({ column, value, onChange, onFilter: onFilterProp, options }) => {
+    const { render, placeholder, className, style, defaultValue, delay = 300, getFilter, onFilter: onFilterOption, id, disabled, } = options;
+    // Support both onChange and onFilter props (onFilter is alias for onChange)
+    const onChangeCallback = onChange || onFilterProp || (() => { });
+    const onFilter = onFilterOption;
+    // Local state for immediate updates
+    const [filterValue, setFilterValue] = useState(value ?? defaultValue ?? null);
+    const filterValueRef = useRef(filterValue);
+    const onChangeRef = useRef(onChangeCallback);
+    const onFilterRef = useRef(onFilter);
+    // Track last value sent to parent to prevent sync loops
+    const lastValueRef = useRef(filterValue);
+    // Keep refs in sync with state
+    useEffect(() => {
+        filterValueRef.current = filterValue;
+    }, [filterValue]);
+    useEffect(() => {
+        onChangeRef.current = onChangeCallback;
+        onFilterRef.current = onFilter;
+    }, [onChangeCallback, onFilter]);
+    // Sync internal value when external value changes (e.g., from clear all filters)
+    useEffect(() => {
+        const externalValue = value ?? null;
+        // Only sync if different from what we last sent to parent
+        if (JSON.stringify(externalValue) !== JSON.stringify(lastValueRef.current)) {
+            setFilterValue(externalValue);
+            lastValueRef.current = externalValue;
+        }
+    }, [value]);
+    // Debounce the filter value
+    const [debouncedValue] = useDebouncedValue(filterValue, { wait: delay });
+    // Propagate debounced value to parent
+    useEffect(() => {
+        // Update ref to track what we're sending to parent
+        lastValueRef.current = debouncedValue;
+        onChangeRef.current(debouncedValue);
+        onFilterRef.current?.(debouncedValue);
+    }, [debouncedValue]);
+    // Provide filter instance via getFilter callback - only on mount
+    useEffect(() => {
+        if (getFilter) {
+            getFilter({
+                get value() {
+                    return filterValueRef.current;
+                },
+                setValue: (newValue) => {
+                    setFilterValue(newValue);
+                    onChangeRef.current(newValue);
+                    onFilterRef.current?.(newValue);
+                },
+                clear: () => {
+                    setFilterValue(null);
+                    onChangeRef.current(null);
+                    onFilterRef.current?.(null);
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getFilter]);
+    // Handler for value changes from custom render
+    const handleChange = useCallback((newValue) => {
+        setFilterValue(newValue);
+    }, []);
+    // Clear handler
+    const handleClear = useCallback(() => {
+        setFilterValue(null);
+    }, []);
+    // Build render props
+    const renderProps = {
+        value: filterValue,
+        onChange: handleChange,
+        column,
+        clear: handleClear,
+        placeholder,
+        className,
+        style,
+        id,
+        disabled,
+    };
+    // If no render function provided, render a default text input
+    // This allows using CustomFilter with column.filterRenderer
+    if (!render) {
+        return (_jsx("input", { type: "text", id: id, "data-filter-field": column.dataField, value: filterValue || '', onChange: (e) => handleChange(e.target.value || null), placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className || filterInputClass, style: style, disabled: disabled }));
+    }
+    // Render the custom filter UI
+    return _jsx(_Fragment, { children: render(renderProps) });
+};
+/**
+ * Custom filter - allows rendering any custom filter component
+ *
+ * @example
+ * // Basic custom filter with input
+ * filter: CustomFilter({
+ *   render: ({ value, onChange }) => (
+ *     <input
+ *       type="text"
+ *       value={value || ''}
+ *       onChange={(e) => onChange(e.target.value || null)}
+ *       placeholder="Custom filter..."
+ *     />
+ *   ),
+ * })
+ *
+ * @example
+ * // Using render props (placeholder, className, etc.)
+ * filter: CustomFilter({
+ *   placeholder: 'Search...',
+ *   className: 'my-custom-input',
+ *   render: ({ value, onChange, placeholder, className }) => (
+ *     <input
+ *       type="text"
+ *       value={value || ''}
+ *       onChange={(e) => onChange(e.target.value || null)}
+ *       placeholder={placeholder}
+ *       className={className}
+ *     />
+ *   ),
+ * })
+ *
+ * @example
+ * // Using with column.filterRenderer (simple options pattern)
+ * // This allows using existing filter components with custom configuration
+ * {
+ *   dataField: 'picture',
+ *   text: 'Picture',
+ *   filter: CustomFilter({
+ *     placeholder: 'Picture',
+ *     getFilter: (filter) => {
+ *       pictureFilterRef.current = filter;
+ *     },
+ *   }),
+ *   filterRenderer: (onFilter, column) => (
+ *     <NumberFilter onFilter={onFilter} column={column} />
+ *   ),
+ * }
+ *
+ * @example
+ * // Custom range filter
+ * filter: CustomFilter({
+ *   render: ({ value, onChange }) => (
+ *     <div style={{ display: 'flex', gap: 4 }}>
+ *       <input
+ *         type="number"
+ *         placeholder="Min"
+ *         value={value?.min || ''}
+ *         onChange={(e) => onChange({ ...value, min: e.target.value })}
+ *       />
+ *       <input
+ *         type="number"
+ *         placeholder="Max"
+ *         value={value?.max || ''}
+ *         onChange={(e) => onChange({ ...value, max: e.target.value })}
+ *       />
+ *     </div>
+ *   ),
+ *   filterFunction: (cellValue, filterValue) => {
+ *     if (!filterValue) return true;
+ *     const { min, max } = filterValue;
+ *     const num = Number(cellValue);
+ *     if (min && num < Number(min)) return false;
+ *     if (max && num > Number(max)) return false;
+ *     return true;
+ *   },
+ * })
+ *
+ * @example
+ * // Custom multi-select filter with checkboxes
+ * filter: CustomFilter({
+ *   render: ({ value, onChange }) => {
+ *     const selected = value || [];
+ *     const options = ['Active', 'Inactive', 'Pending'];
+ *     return (
+ *       <div>
+ *         {options.map(opt => (
+ *           <label key={opt}>
+ *             <input
+ *               type="checkbox"
+ *               checked={selected.includes(opt)}
+ *               onChange={(e) => {
+ *                 if (e.target.checked) {
+ *                   onChange([...selected, opt]);
+ *                 } else {
+ *                   onChange(selected.filter(s => s !== opt));
+ *                 }
+ *               }}
+ *             />
+ *             {opt}
+ *           </label>
+ *         ))}
+ *       </div>
+ *     );
+ *   },
+ *   filterFunction: (cellValue, filterValue) => {
+ *     if (!filterValue?.length) return true;
+ *     return filterValue.includes(cellValue);
+ *   },
+ * })
+ *
+ * @example
+ * // External control with getFilter
+ * filter: CustomFilter({
+ *   placeholder: 'Custom...',
+ *   getFilter: (filter) => {
+ *     customFilterRef.current = filter;
+ *     // filter.value - get current value
+ *     // filter.setValue(newValue) - set value programmatically
+ *     // filter.clear() - clear the filter
+ *   },
+ * })
+ */
+export function CustomFilter(options) {
+    const FilterWithOptions = (props) => (_jsx(CustomFilterComponent, { ...props, options: options }));
+    FilterWithOptions.displayName = 'CustomFilter';
+    // Attach options as props for backwards compatibility with filter-comp.tsx pattern
+    // This allows accessing: column.filter.props.getFilter
+    FilterWithOptions.props = options;
+    return FilterWithOptions;
+}
 /**
  * Get filter component based on type
  */
@@ -641,6 +753,10 @@ export const getFilterComponent = (type) => {
             return DateFilter;
         case 'select':
             return SelectFilter;
+        case 'custom':
+            // For 'custom' type, return a placeholder - actual custom filters
+            // should be created using CustomFilter factory function
+            return TextFilter;
         default:
             return TextFilter;
     }