react-restyle-components 0.4.49 → 0.4.51

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressStepper';
+export type { ProgressStepperOrientation, ProgressStepperSize, ProgressStepperStepState, ProgressStepperIndicatorType, ProgressStepperStep, ProgressStepperLineItem, ProgressStepperProps, } from './types';

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/index.js

@@ -0,0 +1 @@
+export * from './ProgressStepper';

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/types.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+export type ProgressStepperOrientation = 'horizontal' | 'vertical';
+export type ProgressStepperSize = 'small' | 'medium' | 'large';
+export type ProgressStepperStepState = 'incomplete' | 'inprogress' | 'complete' | 'warning' | 'error';
+/**
+ * Indicator type for each step:
+ * - 'dot': Simple circle dot
+ * - 'number': Step number display
+ * - 'icon': Custom icon only
+ * - 'iconCircle': Icon inside a circle
+ * - 'check': Checkmark icon (auto for complete state)
+ */
+export type ProgressStepperIndicatorType = 'dot' | 'number' | 'icon' | 'iconCircle' | 'check';
+export interface ProgressStepperStep {
+    /** Unique identifier for the step */
+    id?: string;
+    /** Current state of the step */
+    state: ProgressStepperStepState;
+    /** Title text for the step */
+    stepTitle?: string;
+    /** Subtitle text for the step */
+    stepSubTitle?: string;
+    /** Link URL for the step */
+    stepLinkHref?: string;
+    /** Link text for the step */
+    stepLinkText?: string;
+    /** Tag text to display */
+    tagText?: string;
+    /** Tag variant */
+    tagVariant?: 'success' | 'error' | 'warning' | 'info' | 'neutral';
+    /** Sub-steps for partial progress */
+    subSteps?: ProgressStepperStep[];
+    /** Custom icon for the step (React node) */
+    icon?: React.ReactNode;
+    /** Icon source URL (alternative to icon prop) */
+    iconSrc?: string;
+    /** Step number override (for number indicator type) */
+    stepNumber?: number;
+}
+export interface ProgressStepperLineItem extends ProgressStepperStep {
+    /** Index of the step in the list */
+    index: number;
+    /** Total number of steps */
+    stepsAmount: number;
+    /** Size of the step indicator */
+    size: ProgressStepperSize;
+    /** Orientation of the stepper */
+    orientation: ProgressStepperOrientation;
+    /** Whether to use compact spacing */
+    isPacked?: boolean;
+    /** Type of indicator to display */
+    indicatorType: ProgressStepperIndicatorType;
+    /** Primary color for active/complete states */
+    activeColor?: string;
+    /** Color for incomplete state */
+    inactiveColor?: string;
+}
+export interface ProgressStepperProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** Array of steps to display */
+    steps: ProgressStepperStep[];
+    /** Orientation of the progress stepper */
+    orientation?: ProgressStepperOrientation;
+    /** Size of the step indicators */
+    size?: ProgressStepperSize;
+    /** Whether to use compact vertical spacing */
+    isPacked?: boolean;
+    /** Type of indicator to display for all steps */
+    indicatorType?: ProgressStepperIndicatorType;
+    /** Primary color for active/complete states */
+    activeColor?: string;
+    /** Color for incomplete state */
+    inactiveColor?: string;
+    /** Custom class name */
+    className?: string;
+}

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/types.js

@@ -0,0 +1 @@
+export {};

package/lib/src/core-components/src/components/ProgressStepper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ProgressBar';
+export * from './ProgressStepper';
+export type { ProgressBarProps } from './ProgressBar/types';
+export type { ProgressStepperOrientation, ProgressStepperSize, ProgressStepperStepState, ProgressStepperIndicatorType, ProgressStepperStep, ProgressStepperLineItem, ProgressStepperProps, } from './ProgressStepper/types';

package/lib/src/core-components/src/components/ProgressStepper/index.js

@@ -0,0 +1,2 @@
+export * from './ProgressBar';
+export * from './ProgressStepper';

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

@@ -49,8 +49,9 @@ const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stro
 const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M23 4v6h-6M1 20v-6h6", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
 const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const tableFilterCache = new Map();
 export const Table = forwardRef(function TableComponent(props, ref) {
-    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
+    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, isFieldSelector = true, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
     // Quick configuration props
     isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, getNonSelectableRows, nonSelectableStyle, isView = false, fileName, hideExcelSheet = false, 
     // Quick callbacks
@@ -62,7 +63,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Toolbar customization
     toolbarPosition = 'top', toolbarLeft, toolbarRight, toolbarCenter, 
     // Refresh
-    refreshable = false, onRefresh, 
+    refreshable = false, onRefresh, isForceReload, 
     // Print
     printable = false, onPrint, 
     // Size
@@ -84,8 +85,15 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Resolve aliases
     const resolvedExportable = isExport ?? exportable;
     const resolvedExportFileName = fileName ?? exportFileName;
+    // Read cached filter/search state (survives remounts when parent changes React key)
+    const cachedFilterState = tableFilterCache.get(id);
     // Auto-detect remote mode: if totalSize <= data.length, use client-side (remote=false)
+    // Exception: if onFilter is provided, always use remote mode (server handles filtering)
     const resolvedRemote = useMemo(() => {
+        // If onFilter callback is provided, data is server-filtered - never re-filter client-side
+        if (onFilter) {
+            return true;
+        }
         // If totalSize is provided and is <= data.length, all data is loaded - use client-side
         if (totalSize !== undefined &&
             totalSize > 0 &&
@@ -94,7 +102,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         }
         // Otherwise use the prop value (default: true)
         return remote;
-    }, [remote, totalSize, data.length]);
+    }, [remote, totalSize, data.length, onFilter]);
     // Handle isSelectRow shorthand
     const resolvedRowSelection = isSelectRow
         ? {
@@ -146,8 +154,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const tableRef = useRef(null);
     const columnToggleRef = useRef(null);
     const prevSelectionCountRef = useRef(0);
-    // State
-    const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
+    // Cache filter component references per dataField to keep stable React element types.
+    // Without this, factory functions like TextFilter({...}) create a new component ref
+    // on every render, causing React to unmount/remount the filter and lose typed text.
+    const filterComponentCacheRef = useRef(new Map());
+    // State (use cached values if available to survive remounts from key changes)
+    const [internalSearchValue, setInternalSearchValue] = useState(cachedFilterState?.searchValue ?? defaultSearchValue);
     const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
     const [columnToggleOpen, setColumnToggleOpen] = useState(false);
     const [columnSearch, setColumnSearch] = useState('');
@@ -179,6 +191,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             // Add new columns at the end
             const added = columns.filter((c) => !existingDataFields.has(c.dataField));
             setReorderedColumns([...preserved, ...added]);
+            // Clean up filter component cache for removed columns
+            const newFieldSet = new Set(columns.map((c) => c.dataField));
+            for (const key of filterComponentCacheRef.current.keys()) {
+                if (!newFieldSet.has(key)) {
+                    filterComponentCacheRef.current.delete(key);
+                }
+            }
         }
         else {
             // Same columns but maybe different data - update column data while preserving order
@@ -226,34 +245,53 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // Clear cache when editing target changes
         editorRendererCacheRef.current.clear();
     }, [editingCell]);
+    // Force reload: when isForceReload toggles, trigger onRefresh
+    const prevForceReloadRef = useRef(isForceReload);
+    useEffect(() => {
+        if (prevForceReloadRef.current !== isForceReload &&
+            isForceReload !== undefined) {
+            prevForceReloadRef.current = isForceReload;
+            onRefresh?.();
+        }
+    }, [isForceReload, onRefresh]);
     const searchValue = controlledSearchValue ?? internalSearchValue;
     const debouncedSearchValue = useTableDebounce(searchValue, searchDebounce);
     // Sort state
     const { sort, handleSort } = useSortState(defaultSort, controlledSort);
-    // Filter state
-    const { filters, setFilter, clearFilters } = useFilterState(defaultFilters, controlledFilters);
+    // Filter state (prefer cached filters over defaultFilters to survive remounts)
+    const { filters, setFilter, clearFilters } = useFilterState(cachedFilterState?.filters ?? defaultFilters, controlledFilters);
     // Track if onFilter should be called (only after user interaction)
     const shouldCallOnFilter = useRef(false);
     const filterTypeRef = useRef('filter');
     const onFilterRef = useRef(onFilter);
     // Track last called values to prevent duplicate calls
     const lastOnFilterCallRef = useRef(null);
-    // Track focused filter field to restore focus after data changes
-    const focusedFilterFieldRef = useRef(null);
+    // Track focused filter field to restore focus after data changes (or remounts)
+    const focusedFilterFieldRef = useRef(cachedFilterState?.focusedField ?? null);
     const tableContainerRef = useRef(null);
+    // Helper: save current filter/search/focus state to module-level cache
+    const saveFilterCache = useCallback((updates) => {
+        const current = tableFilterCache.get(id) || {
+            filters: {},
+            searchValue: '',
+            focusedField: null,
+        };
+        tableFilterCache.set(id, { ...current, ...updates });
+    }, [id]);
     // Clear focus ref when clicking outside the table
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (tableContainerRef.current &&
                 !tableContainerRef.current.contains(event.target)) {
                 focusedFilterFieldRef.current = null;
+                saveFilterCache({ focusedField: null });
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, []);
+    }, [saveFilterCache]);
     // Restore filter focus after data changes
     useEffect(() => {
         const restoreFocus = () => {
@@ -283,7 +321,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         };
     }, [data]);
     // Pagination state
-    const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
+    const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, setPage, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
+    // Reset page to 0 when data changes (e.g., after server-side onFilter response)
+    // This ensures new data is visible without re-triggering onFilter.
+    const prevDataRef = useRef(data);
+    useEffect(() => {
+        if (prevDataRef.current !== data) {
+            prevDataRef.current = data;
+            if (page !== 0) {
+                setPage(0);
+            }
+        }
+    }, [data, page, setPage]);
     // Row selection
     const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data, resolvedRowSelection?.keyField || keyField, resolvedRowSelection?.mode || 'none', resolvedRowSelection?.selectedRowKeys, resolvedRowSelection?.getCheckboxProps);
     // Row expansion
@@ -421,7 +470,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         shouldCallOnFilter.current = true;
         filterTypeRef.current = 'search';
         onChange?.({ type: 'search', search: value });
-    }, [resetEditingState, onSearch, onChange]);
+        // Persist to cache
+        saveFilterCache({ searchValue: value });
+    }, [resetEditingState, onSearch, onChange, saveFilterCache]);
     // Handle sort
     const handleSortClick = useCallback((column) => {
         if (!column.sort)
@@ -441,7 +492,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         shouldCallOnFilter.current = true;
         filterTypeRef.current = 'filter';
         onChange?.({ type: 'filter', filters: newFilters });
-    }, [filters, setFilter, onFilterChange, onChange, resetEditingState]);
+        // Persist to cache (including focused field)
+        saveFilterCache({
+            filters: newFilters,
+            focusedField: focusedFilterFieldRef.current,
+        });
+    }, [filters, setFilter, onFilterChange, onChange, resetEditingState, saveFilterCache]);
     // Handle clear all filters
     const handleClearFilters = useCallback(() => {
         resetEditingState();
@@ -453,7 +509,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         onChange?.({ type: 'filter', filters: {} });
         // Reset the tracking ref so subsequent filters can trigger onFilter
         lastOnFilterCallRef.current = null;
+        // Clear the cache so remounts also start fresh
+        tableFilterCache.delete(id);
     }, [
+        id,
         clearFilters,
         onClearFilters,
         onFilterChange,
@@ -951,7 +1010,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onFocus: () => {
                                         // Clear column filter focus when global search is focused
                                         focusedFilterFieldRef.current = null;
-                                    }, placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), exportFormat === 'excel' ? 'Export Excel' : 'Export CSV'] })), showFilterToggle && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
+                                        saveFilterCache({ focusedField: null });
+                                    }, placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), exportFormat === 'excel' ? 'Export Excel' : 'Export CSV'] })), showFilterToggle && isFieldSelector && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
                                                         borderBottom: '1px solid #e5e7eb',
                                                         paddingBottom: 8,
                                                         marginBottom: 4,
@@ -1011,7 +1071,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                         }
                                                         setToggleDraggingColumn(null);
                                                         setToggleDragOverColumn(null);
-                                                    }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
+                                                    }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && isFieldSelector && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
                                                     if (!reorderable)
                                                         return;
                                                     setToggleDraggingColumn(column.dataField);
@@ -1168,14 +1228,26 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                             column.filter === true ||
                                             column.filterComponent ||
                                             column.filterRenderer;
-                                        // Get the filter component
-                                        const FilterComponent = hasColumnFilter
-                                            ? (typeof column.filter === 'function'
+                                        // Get the filter component (use cached reference to prevent remounting)
+                                        let FilterComponent = null;
+                                        if (hasColumnFilter) {
+                                            const cacheKey = column.dataField;
+                                            const resolved = (typeof column.filter === 'function'
                                                 ? column.filter
                                                 : null) ||
                                                 column.filterComponent ||
-                                                getFilterComponent(column.filterType || 'text')
-                                            : null;
+                                                getFilterComponent(column.filterType || 'text');
+                                            const cached = filterComponentCacheRef.current.get(cacheKey);
+                                            if (cached && cached.displayName === resolved.displayName) {
+                                                FilterComponent = cached;
+                                            }
+                                            else {
+                                                filterComponentCacheRef.current.set(cacheKey, resolved);
+                                                FilterComponent = resolved;
+                                            }
+                                        }
+                                        // Non-null reference for JSX rendering (guarded by showFilter check below)
+                                        const ResolvedFilter = FilterComponent;
                                         const onFilter = (value) => handleFilterChange(column.dataField, value);
                                         // Get resized column style
                                         const resizeStyle = resizable
@@ -1304,7 +1376,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                         }, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx("div", { onFocusCapture: () => {
                                                                                 focusedFilterFieldRef.current =
                                                                                     column.dataField;
-                                                                            }, "data-filter-wrapper": column.dataField, style: { width: '100%' }, children: _jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
+                                                                                saveFilterCache({
+                                                                                    focusedField: column.dataField,
+                                                                                });
+                                                                            }, "data-filter-wrapper": column.dataField, style: { width: '100%' }, children: _jsx(ResolvedFilter, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
                                                                             minWidth: 40,
                                                                             minHeight: 24,
                                                                             display: 'flex',
@@ -1419,10 +1494,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                 // When disabled: false or not disabled, no styles should be applied
                                 const isRowDisabled = !!checkboxProps?.disabled;
                                 const disabledStyle = isRowDisabled
-                                    ? nonSelectableStyle || {
-                                        backgroundColor: '#f3f4f6',
-                                        opacity: 0.7,
-                                    }
+                                    ? typeof nonSelectableStyle === 'function'
+                                        ? nonSelectableStyle(row, rowIndex)
+                                        : nonSelectableStyle || {
+                                            backgroundColor: '#f3f4f6',
+                                            opacity: 0.7,
+                                        }
                                     : undefined;
                                 return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$selected": rowSelected, "$clickable": !!onRowClick ||
                                                 resolvedRowSelection?.mode === 'single' ||

package/lib/src/core-components/src/components/Table/filters.d.ts

@@ -61,11 +61,8 @@ export interface NumberFilterOptions {
     allowDecimal?: boolean;
     /** Callback to get filter instance for external control */
     getFilter?: (filter: NumberFilterInstance) => void;
-    /** Callback when filter value changes */
-    onFilter?: (value: {
-        number: string;
-        comparator: string;
-    } | null) => void;
+    /** Callback when filter value changes - passes string value */
+    onFilter?: (value: string | null) => void;
     /** Input ID */
     id?: string;
     /** Disabled state */
@@ -88,7 +85,7 @@ export interface NumberFilterInstance {
     setValue: (value: {
         number: string;
         comparator: string;
-    } | null) => void;
+    } | string | null) => void;
     /** Clear the filter */
     clear: () => void;
 }
@@ -193,7 +190,9 @@ export interface DateFilterInstance {
  * // As a component (for direct usage)
  * <TextFilter column={column} value={value} onChange={onChange} />
  */
-export declare function TextFilter(options: TextFilterOptions): React.FC<TableFilterProps>;
+export declare function TextFilter(options: TextFilterOptions): React.FC<TableFilterProps> & {
+    props: TextFilterOptions;
+};
 export declare function TextFilter(props: TableFilterProps): React.ReactElement;
 /**
  * Number filter - can be used as a component or factory function
@@ -207,7 +206,9 @@ export declare function TextFilter(props: TableFilterProps): React.ReactElement;
  *   getFilter: (filter) => { myFilterRef = filter; },
  * })
  */
-export declare function NumberFilter(options: NumberFilterOptions): React.FC<TableFilterProps>;
+export declare function NumberFilter(options: NumberFilterOptions): React.FC<TableFilterProps> & {
+    props: NumberFilterOptions;
+};
 export declare function NumberFilter(props: TableFilterProps): React.ReactElement;
 /**
  * Date filter - can be used as a component or factory function
@@ -220,7 +221,9 @@ export declare function NumberFilter(props: TableFilterProps): React.ReactElemen
  *   getFilter: (filter) => { myFilterRef = filter; },
  * })
  */
-export declare function DateFilter(options: DateFilterOptions): React.FC<TableFilterProps>;
+export declare function DateFilter(options: DateFilterOptions): React.FC<TableFilterProps> & {
+    props: DateFilterOptions;
+};
 export declare function DateFilter(props: TableFilterProps): React.ReactElement;
 /**
  * Select filter - can be used as a component or factory function
@@ -233,8 +236,198 @@ export declare function DateFilter(props: TableFilterProps): React.ReactElement;
  *   getFilter: (filter) => { myFilterRef = filter; },
  * })
  */
-export declare function SelectFilter(options: SelectFilterOptions): React.FC<TableFilterProps>;
+export declare function SelectFilter(options: SelectFilterOptions): React.FC<TableFilterProps> & {
+    props: SelectFilterOptions;
+};
 export declare function SelectFilter(props: TableFilterProps): React.ReactElement;
+/**
+ * Custom filter options for factory function pattern
+ * Allows rendering any custom filter component while integrating with Table's filter system
+ */
+export interface CustomFilterOptions<T = any> {
+    /** Custom render function for the filter UI (optional if using column.filterRenderer) */
+    render?: (props: CustomFilterRenderProps<T>) => React.ReactNode;
+    /** Placeholder text (passed to render props) */
+    placeholder?: string;
+    /** CSS class name(s) for the filter */
+    className?: string;
+    /** Inline style for the filter */
+    style?: React.CSSProperties;
+    /** Default value for the filter */
+    defaultValue?: T;
+    /** Debounce delay in milliseconds */
+    delay?: number;
+    /** Callback to get filter instance for external control */
+    getFilter?: (filter: CustomFilterInstance<T>) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: T | null) => void;
+    /** Custom filter function for data filtering */
+    filterFunction?: (cellValue: any, filterValue: T, row: any) => boolean;
+    /** Input ID */
+    id?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Props passed to custom filter render function
+ */
+export interface CustomFilterRenderProps<T = any> {
+    /** Current filter value */
+    value: T | null;
+    /** Callback to update filter value */
+    onChange: (value: T | null) => void;
+    /** Column configuration */
+    column: any;
+    /** Clear the filter */
+    clear: () => void;
+    /** Placeholder text from options */
+    placeholder?: string;
+    /** CSS class name from options */
+    className?: string;
+    /** Style from options */
+    style?: React.CSSProperties;
+    /** Input ID from options */
+    id?: string;
+    /** Disabled state from options */
+    disabled?: boolean;
+}
+/**
+ * Custom filter instance returned by getFilter callback
+ */
+export interface CustomFilterInstance<T = any> {
+    /** Current filter value */
+    value: T | null;
+    /** Set filter value programmatically */
+    setValue: (value: T | null) => void;
+    /** Clear the filter */
+    clear: () => void;
+}
+/**
+ * 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 declare function CustomFilter<T = any>(options: CustomFilterOptions<T>): React.FC<TableFilterProps> & {
+    props: CustomFilterOptions<T>;
+};
 /**
  * Get filter component based on type
  */