indas-ui 0.0.1 → 0.1.0

package/dist/components/datagrid/search/SearchHighlighter.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface SearchHighlighterProps {
+    text: string;
+    searchTerm: string;
+    className?: string;
+    highlightClassName?: string;
+}
+export declare function SearchHighlighter({ text, searchTerm, className, highlightClassName }: SearchHighlighterProps): React.JSX.Element;
+export declare function fuzzyMatch(text: string, searchTerm: string): boolean;
+export declare function getCellTextContent(cellValue: any): string;
+export declare function advancedSearch(data: any[], searchTerm: string, columns: any[], mainColumns?: string[]): {
+    matchingRows: any[];
+    rowIds: string[];
+    columnMatches: Record<string, string[]>;
+};
+export {};

package/dist/components/datagrid/search/SearchHighlighter.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export function SearchHighlighter({ text, searchTerm, className = '', highlightClassName = 'border-2 border-primary rounded px-0.5' }) {
+    // Don't highlight - just return plain text
+    // User requested no yellow highlighting, keep it simple
+    return _jsx("span", { className: className, children: text });
+}
+// Utility function for fuzzy search matching
+export function fuzzyMatch(text, searchTerm) {
+    if (!searchTerm || !text)
+        return false;
+    const textLower = text.toLowerCase();
+    const searchLower = searchTerm.toLowerCase();
+    // Exact match
+    if (textLower.includes(searchLower))
+        return true;
+    // Fuzzy match - check if all characters of searchTerm appear in order in text
+    let searchIndex = 0;
+    for (let i = 0; i < textLower.length && searchIndex < searchLower.length; i++) {
+        if (textLower[i] === searchLower[searchIndex]) {
+            searchIndex++;
+        }
+    }
+    return searchIndex === searchLower.length;
+}
+// Utility function to get all text content from a cell value
+export function getCellTextContent(cellValue) {
+    if (cellValue === null || cellValue === undefined)
+        return '';
+    if (typeof cellValue === 'string')
+        return cellValue;
+    if (typeof cellValue === 'number')
+        return cellValue.toString();
+    if (typeof cellValue === 'boolean')
+        return cellValue.toString();
+    // Handle React elements or complex objects
+    if (React.isValidElement(cellValue)) {
+        // Try to extract text from React element
+        const extractText = (element) => {
+            if (typeof element === 'string' || typeof element === 'number') {
+                return element.toString();
+            }
+            if (React.isValidElement(element) && element.props?.children) {
+                if (Array.isArray(element.props.children)) {
+                    return element.props.children.map(extractText).join('');
+                }
+                return extractText(element.props.children);
+            }
+            return '';
+        };
+        return extractText(cellValue);
+    }
+    return JSON.stringify(cellValue);
+}
+// Simple search function - just search and return matches
+export function advancedSearch(data, searchTerm, columns, mainColumns) {
+    if (!searchTerm.trim()) {
+        return {
+            matchingRows: data,
+            rowIds: data.map((row, index) => row.id || index.toString()),
+            columnMatches: {}
+        };
+    }
+    const results = [];
+    const rowIds = [];
+    const columnMatches = {};
+    // Define searchable columns
+    const searchableColumns = columns.filter(col => {
+        // Exclude select columns and any column marked to skip search
+        if (col.meta?.isSelectColumn || col.meta?.skipSearch || col.id === 'select') {
+            return false;
+        }
+        if (mainColumns && mainColumns.length > 0) {
+            return mainColumns.includes(col.accessorKey || col.id);
+        }
+        // Default: search in all text-based columns
+        return col.accessorKey && typeof col.accessorKey === 'string';
+    });
+    data.forEach((row, index) => {
+        let isMatch = false;
+        const rowId = row.id || index.toString();
+        const matchingColumns = [];
+        // Search in specified columns
+        for (const column of searchableColumns) {
+            const columnKey = column.accessorKey || column.id;
+            const cellValue = row[columnKey];
+            const textContent = getCellTextContent(cellValue);
+            if (fuzzyMatch(textContent, searchTerm)) {
+                isMatch = true;
+                matchingColumns.push(columnKey);
+            }
+        }
+        // If no main columns specified, search all columns as fallback
+        if (!isMatch && (!mainColumns || mainColumns.length === 0)) {
+            for (const column of columns) {
+                // Skip select columns in fallback search too
+                if (column.meta?.isSelectColumn || column.meta?.skipSearch || column.id === 'select') {
+                    continue;
+                }
+                const columnKey = column.accessorKey || column.id;
+                if (!columnKey)
+                    continue;
+                const cellValue = row[columnKey];
+                const textContent = getCellTextContent(cellValue);
+                if (fuzzyMatch(textContent, searchTerm)) {
+                    isMatch = true;
+                    matchingColumns.push(columnKey);
+                    break;
+                }
+            }
+        }
+        if (isMatch) {
+            results.push(row);
+            rowIds.push(rowId);
+            columnMatches[rowId] = matchingColumns;
+        }
+    });
+    return {
+        matchingRows: results,
+        rowIds,
+        columnMatches
+    };
+}

package/dist/components/datagrid/search/SearchNavigator.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SearchNavigationState {
+    currentIndex: number;
+    totalResults: number;
+    highlightedRowId: string | null;
+    searchTerm: string;
+}
+interface SearchNavigatorProps {
+    navigationState: SearchNavigationState;
+    onNavigate: (direction: 'up' | 'down') => void;
+    onSelect: (rowId: string) => void;
+    onClear: () => void;
+    searchInputRef?: React.RefObject<HTMLInputElement>;
+    enabled: boolean;
+}
+export declare function SearchNavigator({ navigationState, onNavigate, onSelect, onClear, searchInputRef, enabled }: SearchNavigatorProps): any;
+export declare function useSearchNavigation(scrollContainerRef?: React.RefObject<HTMLDivElement>): {
+    navigationState: SearchNavigationState;
+    updateSearchResults: (searchTerm: string, matchingRowIds: string[]) => void;
+    navigate: (direction: "up" | "down") => void;
+    selectRow: (rowId: string) => string;
+    clearNavigation: () => void;
+};
+export {};

package/dist/components/datagrid/search/SearchNavigator.js

@@ -0,0 +1,148 @@
+'use client';
+import React, { useEffect, useCallback } from 'react';
+export function SearchNavigator({ navigationState, onNavigate, onSelect, onClear, searchInputRef, enabled }) {
+    const { currentIndex, totalResults, highlightedRowId, searchTerm } = navigationState;
+    // Keyboard navigation handler - only for arrow keys and special keys
+    const handleKeyDown = useCallback((event) => {
+        if (!enabled || !searchTerm || totalResults === 0) {
+            return;
+        }
+        // ONLY handle arrow keys and special navigation keys
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                onNavigate('down');
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                onNavigate('up');
+                break;
+            case 'Enter':
+                event.preventDefault();
+                event.stopPropagation();
+                if (highlightedRowId) {
+                    onSelect(highlightedRowId);
+                    // Return focus to search input after selection
+                    if (searchInputRef?.current) {
+                        setTimeout(() => {
+                            searchInputRef.current?.focus();
+                        }, 100);
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                onClear();
+                break;
+            default:
+                // Do nothing for other keys - let them type normally
+                return;
+        }
+    }, [enabled, searchTerm, totalResults, highlightedRowId, onNavigate, onSelect, onClear, searchInputRef]);
+    // Attach keyboard event listeners ONLY to search input
+    useEffect(() => {
+        const searchInput = searchInputRef?.current;
+        if (!searchInput)
+            return;
+        searchInput.addEventListener('keydown', handleKeyDown);
+        return () => {
+            searchInput.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown, searchInputRef]);
+    // Scroll handling is now done in useSearchNavigation hook with proper grid scoping
+    // No need to handle scroll here - removed to prevent cross-grid search issues
+    // Don't render visual navigator - just handle keyboard events
+    return null;
+}
+// Hook for managing search navigation state
+export function useSearchNavigation(scrollContainerRef) {
+    const [navigationState, setNavigationState] = React.useState({
+        currentIndex: -1,
+        totalResults: 0,
+        highlightedRowId: null,
+        searchTerm: ''
+    });
+    const [filteredRowIds, setFilteredRowIds] = React.useState([]);
+    const updateSearchResults = useCallback((searchTerm, matchingRowIds) => {
+        setFilteredRowIds(matchingRowIds);
+        setNavigationState(prev => ({
+            ...prev,
+            searchTerm,
+            totalResults: matchingRowIds.length,
+            currentIndex: matchingRowIds.length > 0 ? 0 : -1,
+            highlightedRowId: matchingRowIds.length > 0 ? matchingRowIds[0] : null
+        }));
+    }, []);
+    const navigate = useCallback((direction) => {
+        if (filteredRowIds.length === 0) {
+            return;
+        }
+        setNavigationState(prev => {
+            let newIndex = prev.currentIndex;
+            if (direction === 'down') {
+                newIndex = (prev.currentIndex + 1) % prev.totalResults;
+            }
+            else {
+                newIndex = prev.currentIndex <= 0 ? prev.totalResults - 1 : prev.currentIndex - 1;
+            }
+            const nextRowId = filteredRowIds[newIndex];
+            // Auto-scroll to the new highlighted row - ONLY within THIS grid container
+            if (nextRowId && scrollContainerRef?.current) {
+                requestAnimationFrame(() => {
+                    const scrollContainer = scrollContainerRef.current;
+                    if (!scrollContainer)
+                        return;
+                    // CRITICAL FIX: Search within THIS grid only, not globally
+                    const rowElement = scrollContainer.querySelector(`[data-row-id="${nextRowId}"]`);
+                    if (rowElement) {
+                        // Use getBoundingClientRect for accurate positioning
+                        const containerRect = scrollContainer.getBoundingClientRect();
+                        const rowRect = rowElement.getBoundingClientRect();
+                        // Check if row is fully visible within container
+                        const isRowAboveViewport = rowRect.top < containerRect.top;
+                        const isRowBelowViewport = rowRect.bottom > containerRect.bottom;
+                        if (isRowAboveViewport) {
+                            // Row is above visible area - scroll up
+                            const scrollOffset = rowRect.top - containerRect.top;
+                            scrollContainer.scrollTop += scrollOffset - 10; // 10px padding
+                        }
+                        else if (isRowBelowViewport) {
+                            // Row is below visible area - scroll down
+                            const scrollOffset = rowRect.bottom - containerRect.bottom;
+                            scrollContainer.scrollTop += scrollOffset + 10; // 10px padding
+                        }
+                        // If row is fully visible, don't scroll
+                    }
+                });
+            }
+            return {
+                ...prev,
+                currentIndex: newIndex,
+                highlightedRowId: nextRowId || null
+            };
+        });
+    }, [filteredRowIds, scrollContainerRef]);
+    const selectRow = useCallback((rowId) => {
+        // This will be handled by the parent component
+        return rowId;
+    }, []);
+    const clearNavigation = useCallback(() => {
+        setNavigationState({
+            currentIndex: -1,
+            totalResults: 0,
+            highlightedRowId: null,
+            searchTerm: ''
+        });
+        setFilteredRowIds([]);
+    }, []);
+    return {
+        navigationState,
+        updateSearchResults,
+        navigate,
+        selectRow,
+        clearNavigation
+    };
+}

package/dist/components/datagrid/search/SearchNewModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface SearchNewModalProps<TData> {
+    data: TData[];
+    columns: any[];
+    mainColumns?: string;
+    onRowSelect?: (rowId: string) => void;
+    selectedRows?: Set<string>;
+    className?: string;
+    onSearchClear?: () => void;
+}
+export declare function SearchNewModal<TData>({ data, columns, mainColumns, onRowSelect, selectedRows, className, onSearchClear }: SearchNewModalProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/search/SearchNewModal.js

@@ -0,0 +1,202 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from '../../ui/index.js';
+import { Button } from '../../ui/index.js';
+import { SearchHighlighter, advancedSearch } from './SearchHighlighter.js';
+export function SearchNewModal({ data, columns, mainColumns, onRowSelect, selectedRows = new Set(), className = '', onSearchClear }) {
+    const [searchValue, setSearchValue] = useState('');
+    const [showModal, setShowModal] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [selectedDuringSearch, setSelectedDuringSearch] = useState([]);
+    const [searchResults, setSearchResults] = useState({
+        matchingRows: [],
+        rowIds: [],
+        columnMatches: {}
+    });
+    const searchInputRef = useRef(null);
+    const modalRef = useRef(null);
+    const highlightedItemRef = useRef(null);
+    // Parse main columns for search - memoized to prevent infinite re-renders
+    const searchColumns = useMemo(() => {
+        return mainColumns ? mainColumns.split(',').map(col => col.trim()) : undefined;
+    }, [mainColumns]);
+    // Perform search when search value changes
+    useEffect(() => {
+        if (searchValue.trim()) {
+            const results = advancedSearch(data, searchValue, columns, searchColumns);
+            setSearchResults(results);
+            setHighlightedIndex(0); // Reset highlighted index when search changes
+        }
+        else {
+            setSearchResults({
+                matchingRows: [],
+                rowIds: [],
+                columnMatches: {}
+            });
+            setHighlightedIndex(0);
+        }
+    }, [searchValue, data, columns, searchColumns]);
+    // Handle search input change
+    const handleSearchChange = useCallback((value) => {
+        setSearchValue(value);
+    }, []);
+    // Handle row selection
+    const handleRowSelection = useCallback((rowId, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        // Mouse click - don't scroll (isKeyboardNav stays false)
+        // Intelligent search clearing logic
+        if (searchValue.trim()) {
+            const newSelected = [...selectedDuringSearch, rowId];
+            setSelectedDuringSearch(newSelected);
+            // Clear search based on intelligent rules
+            const shouldClearSearch = 
+            // Rule 1: If only 1 search result and user selects it
+            (searchResults.matchingRows.length === 1) ||
+                // Rule 2: If user selects ALL search results
+                (newSelected.length >= searchResults.matchingRows.length);
+            if (shouldClearSearch) {
+                setShowModal(false);
+                setSearchValue('');
+                setSelectedDuringSearch([]);
+                onSearchClear?.();
+                // Don't reset highlightedIndex to prevent scroll jump
+                // Ensure input can be focused again
+                setTimeout(() => {
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                    // Reset highlighted index after modal closes to prevent next search from starting at wrong position
+                    setHighlightedIndex(0);
+                }, 100);
+            }
+        }
+        else {
+            // Normal selection without search
+            setShowModal(false);
+        }
+        onRowSelect?.(rowId);
+    }, [onRowSelect, searchValue, searchResults.matchingRows.length, selectedDuringSearch, onSearchClear]);
+    // Handle input focus
+    const handleFocus = useCallback(() => {
+        setShowModal(true);
+    }, []);
+    // Handle input blur
+    const handleBlur = useCallback(() => {
+        // Delay closing to allow for click interactions
+        // Only close if not actively selecting
+        setTimeout(() => {
+            if (document.activeElement !== searchInputRef.current) {
+                setShowModal(false);
+            }
+        }, 150);
+    }, []);
+    // Handle keyboard navigation
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!showModal || searchResults.matchingRows.length === 0)
+                return;
+            switch (event.key) {
+                case 'Escape':
+                    setShowModal(false);
+                    setSearchValue('');
+                    setHighlightedIndex(0);
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    setIsKeyboardNav(true); // Enable scroll for keyboard nav
+                    setHighlightedIndex(prev => prev < searchResults.matchingRows.length - 1 ? prev + 1 : 0);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    setIsKeyboardNav(true); // Enable scroll for keyboard nav
+                    setHighlightedIndex(prev => prev > 0 ? prev - 1 : searchResults.matchingRows.length - 1);
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (highlightedIndex >= 0 && highlightedIndex < searchResults.matchingRows.length) {
+                        const row = searchResults.matchingRows[highlightedIndex];
+                        const rowId = getRowId(row, highlightedIndex);
+                        // Intelligent search clearing logic (same as click)
+                        if (searchValue.trim()) {
+                            const newSelected = [...selectedDuringSearch, rowId];
+                            setSelectedDuringSearch(newSelected);
+                            const shouldClearSearch = (searchResults.matchingRows.length === 1) ||
+                                (newSelected.length >= searchResults.matchingRows.length);
+                            if (shouldClearSearch) {
+                                setShowModal(false);
+                                setSearchValue('');
+                                setSelectedDuringSearch([]);
+                                onSearchClear?.();
+                                // Don't reset highlightedIndex to prevent scroll jump
+                                setTimeout(() => {
+                                    if (searchInputRef.current) {
+                                        searchInputRef.current.focus();
+                                    }
+                                    // Reset highlighted index after modal closes to prevent next search from starting at wrong position
+                                    setHighlightedIndex(0);
+                                }, 100);
+                            }
+                        }
+                        else {
+                            setShowModal(false);
+                            setSearchValue('');
+                            setHighlightedIndex(0);
+                            setTimeout(() => {
+                                if (searchInputRef.current) {
+                                    searchInputRef.current.focus();
+                                }
+                            }, 100);
+                        }
+                        onRowSelect?.(rowId);
+                    }
+                    break;
+            }
+        };
+        if (showModal) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [showModal, searchResults.matchingRows, highlightedIndex, onRowSelect, onSearchClear, searchValue, selectedDuringSearch]);
+    // Track if we're using keyboard navigation (to enable scroll) vs mouse clicks (no scroll)
+    const [isKeyboardNav, setIsKeyboardNav] = React.useState(false);
+    // Scroll highlighted item into view (only when using keyboard navigation)
+    useEffect(() => {
+        if (highlightedItemRef.current && showModal && isKeyboardNav) {
+            highlightedItemRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+            // Reset after scroll
+            setIsKeyboardNav(false);
+        }
+    }, [highlightedIndex, showModal, isKeyboardNav]);
+    // Get display text for a row
+    const getRowDisplayText = useCallback((row) => {
+        // Try to get a meaningful display name from the row
+        const rowObj = row;
+        return rowObj.name || rowObj.title || rowObj.label ||
+            rowObj.firstName || rowObj.email ||
+            Object.values(rowObj).find(val => typeof val === 'string') ||
+            'Row Item';
+    }, []);
+    // Get row ID
+    const getRowId = useCallback((row, index) => {
+        const rowObj = row;
+        return rowObj.id || rowObj.ID || index.toString();
+    }, []);
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-fg-subtle" }), _jsx(Input, { ref: searchInputRef, placeholder: "Search...", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onFocus: handleFocus, onBlur: handleBlur, className: "pl-10 pr-10 h-8 text-sm bg-bg-surface border-bd-default focus:border-primary focus:ring-primary" }), searchValue && (_jsx(Button, { variant: "ghost", onClick: () => {
+                            setSearchValue('');
+                            setShowModal(false);
+                        }, className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-gray-100", children: _jsx(X, { className: "h-3 w-3 text-fg-subtle" }) }))] }), showModal && (_jsx("div", { ref: modalRef, className: "absolute top-full left-0 right-0 mt-2 z-50 bg-bg-surface rounded-lg shadow-xl border border-bd-default overflow-hidden", style: { minWidth: '320px' }, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("h3", { className: "text-sm font-semibold text-fg-default", children: ["Search Results", searchResults.matchingRows.length > 0 && (_jsxs("span", { className: "ml-2 text-xs text-fg-muted", children: ["(", searchResults.matchingRows.length, " found)"] }))] }), searchResults.matchingRows.length > 0 && (_jsxs("div", { className: "text-xs text-fg-muted", children: [highlightedIndex + 1, " of ", searchResults.matchingRows.length, _jsx("span", { className: "ml-2 text-fg-subtle", children: "\u2191\u2193 to navigate, Enter to select" })] }))] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: searchValue ? (searchResults.matchingRows.length > 0 ? (_jsx("div", { className: "space-y-1", children: searchResults.matchingRows.map((row, index) => {
+                                    const rowId = getRowId(row, index);
+                                    const isSelected = selectedRows.has(rowId);
+                                    const isHighlighted = index === highlightedIndex;
+                                    const displayText = getRowDisplayText(row);
+                                    return (_jsxs("div", { ref: isHighlighted ? highlightedItemRef : null, className: `flex items-center p-2.5 rounded-md transition-colors group cursor-pointer ${isHighlighted
+                                            ? 'bg-primary-subtle border-2 border-primary/30'
+                                            : 'hover:bg-bg-hover'}`, onClick: (e) => handleRowSelection(rowId, e), children: [_jsx("div", { className: "flex items-center justify-center mr-3", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: () => { }, className: "w-4 h-4 border border-gray-300 rounded cursor-pointer focus:ring-2 focus:ring-primary" }) }), _jsx("div", { className: "w-8 h-8 bg-primary-subtle rounded-lg flex items-center justify-center mr-3 group-hover:bg-primary-muted", children: _jsx("span", { className: "text-xs font-medium text-primary", children: displayText.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-fg-default text-sm", children: _jsx(SearchHighlighter, { text: displayText, searchTerm: searchValue, highlightClassName: "border-2 border-primary rounded px-0.5" }) }), _jsxs("div", { className: "text-xs text-fg-muted", children: ["Row ID: ", rowId] })] }), isSelected && (_jsx("div", { className: "text-xs text-green-600 font-medium", children: "Selected" }))] }, rowId));
+                                }) })) : (_jsxs("div", { className: "text-center py-6 text-fg-muted text-sm", children: ["No results found for \"", searchValue, "\""] }))) : (_jsx("div", { className: "text-center py-6 text-fg-subtle text-sm", children: "Type to search..." })) })] }) }))] }));
+}

package/dist/components/datagrid/search/advancedSearch.d.ts

@@ -0,0 +1,23 @@
+interface AdvancedSearchProps {
+    data: any[];
+    columns: any[];
+    mainColumnsArray: string[];
+    enableSearch: boolean;
+    totalSearchResults: number;
+    updateSearchResults: (searchTerm: string, rowIds: string[]) => void;
+    clearNavigation: () => void;
+    setGlobalFilter: (value: string) => void;
+}
+export declare function advancedSearch({ data, columns, mainColumnsArray, enableSearch, totalSearchResults, updateSearchResults, clearNavigation, setGlobalFilter }: AdvancedSearchProps): {
+    searchValue: string;
+    setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    currentSearchTerm: string;
+    setCurrentSearchTerm: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedDuringSearch: string[];
+    setSelectedDuringSearch: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    debouncedSearchValue: string;
+    handleGlobalSearchChange: (searchTerm: string) => void;
+    handleRowSelectionChange: (rowId: string, isSelected: boolean) => void;
+    clearSearch: () => void;
+};
+export {};

package/dist/components/datagrid/search/advancedSearch.js

@@ -0,0 +1,109 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import { advancedSearch as advancedSearchFn } from './SearchHighlighter.js';
+export function advancedSearch({ data, columns, mainColumnsArray, enableSearch, totalSearchResults, updateSearchResults, clearNavigation, setGlobalFilter }) {
+    const [searchValue, setSearchValue] = useState('');
+    const [currentSearchTerm, setCurrentSearchTerm] = useState('');
+    const [selectedDuringSearch, setSelectedDuringSearch] = useState([]);
+    // Debounce search for better performance (300ms delay)
+    const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchValue(searchValue);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchValue]);
+    // Enhanced global search with navigation (immediate UI update)
+    const handleGlobalSearchChange = useCallback((searchTerm) => {
+        // Update search value immediately for instant UI feedback
+        setSearchValue(searchTerm);
+        // Update current search term immediately for navigation to work
+        setCurrentSearchTerm(searchTerm);
+        // Reset selected during search when search changes
+        if (searchTerm !== currentSearchTerm) {
+            setSelectedDuringSearch([]);
+        }
+        // If search is cleared, clear navigation immediately
+        if (!searchTerm.trim()) {
+            clearNavigation();
+            setSelectedDuringSearch([]);
+            setGlobalFilter('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentSearchTerm]);
+    // Perform actual search with debounced value for performance
+    useEffect(() => {
+        if (!enableSearch)
+            return;
+        if (debouncedSearchValue.trim()) {
+            // Set global filter to actually filter the table rows
+            setGlobalFilter(debouncedSearchValue);
+            // Find matching rows using advanced search
+            const searchResults = advancedSearchFn(data, debouncedSearchValue, columns, mainColumnsArray);
+            updateSearchResults(debouncedSearchValue, searchResults.rowIds);
+        }
+        else {
+            // Clear global filter when search is empty
+            setGlobalFilter('');
+            clearNavigation();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedSearchValue]);
+    // Full search reset — also clears the DEBOUNCED value, which otherwise
+    // re-applies the old filter 300ms after an external clear.
+    const clearSearch = useCallback(() => {
+        setSearchValue('');
+        setDebouncedSearchValue('');
+        setCurrentSearchTerm('');
+        setSelectedDuringSearch([]);
+        setGlobalFilter('');
+        clearNavigation();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setGlobalFilter, clearNavigation]);
+    // Track row selection and auto-clear search when all results selected
+    const handleRowSelectionChange = useCallback((rowId, isSelected) => {
+        if (currentSearchTerm.trim()) {
+            if (isSelected) {
+                // Track this selection during search
+                setSelectedDuringSearch(prev => {
+                    if (!prev.includes(rowId)) {
+                        const newSelected = [...prev, rowId];
+                        // Auto-clear search when ALL search results are selected
+                        if (newSelected.length >= totalSearchResults && totalSearchResults > 0) {
+                            // Clear search after a short delay to allow selection to complete
+                            setTimeout(() => {
+                                setSearchValue('');
+                                setGlobalFilter('');
+                                setCurrentSearchTerm('');
+                                clearNavigation();
+                                setSelectedDuringSearch([]);
+                            }, 100);
+                        }
+                        return newSelected;
+                    }
+                    return prev;
+                });
+            }
+            else {
+                // Track deselection - remove from tracking but don't clear search
+                setSelectedDuringSearch(prev => {
+                    const filtered = prev.filter(id => id !== rowId);
+                    return filtered;
+                });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentSearchTerm, totalSearchResults]);
+    return {
+        searchValue,
+        setSearchValue,
+        currentSearchTerm,
+        setCurrentSearchTerm,
+        selectedDuringSearch,
+        setSelectedDuringSearch,
+        debouncedSearchValue,
+        handleGlobalSearchChange,
+        handleRowSelectionChange,
+        clearSearch
+    };
+}