indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,133 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchHighlighter = SearchHighlighter;
+exports.fuzzyMatch = fuzzyMatch;
+exports.getCellTextContent = getCellTextContent;
+exports.advancedSearch = advancedSearch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+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 (0, jsx_runtime_1.jsx)("span", { className: className, children: text });
+}
+// Utility function for fuzzy search matching
+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
+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_1.default.isValidElement(cellValue)) {
+        // Try to extract text from React element
+        const extractText = (element) => {
+            if (typeof element === 'string' || typeof element === 'number') {
+                return element.toString();
+            }
+            if (react_1.default.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
+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/cjs/components/datagrid/search/SearchNavigator.js

@@ -0,0 +1,185 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchNavigator = SearchNavigator;
+exports.useSearchNavigation = useSearchNavigation;
+const react_1 = __importStar(require("react"));
+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 = (0, react_1.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
+    (0, react_1.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
+function useSearchNavigation(scrollContainerRef) {
+    const [navigationState, setNavigationState] = react_1.default.useState({
+        currentIndex: -1,
+        totalResults: 0,
+        highlightedRowId: null,
+        searchTerm: ''
+    });
+    const [filteredRowIds, setFilteredRowIds] = react_1.default.useState([]);
+    const updateSearchResults = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((rowId) => {
+        // This will be handled by the parent component
+        return rowId;
+    }, []);
+    const clearNavigation = (0, react_1.useCallback)(() => {
+        setNavigationState({
+            currentIndex: -1,
+            totalResults: 0,
+            highlightedRowId: null,
+            searchTerm: ''
+        });
+        setFilteredRowIds([]);
+    }, []);
+    return {
+        navigationState,
+        updateSearchResults,
+        navigate,
+        selectRow,
+        clearNavigation
+    };
+}

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

@@ -0,0 +1,238 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchNewModal = SearchNewModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../../ui/index.js");
+const ui_2 = require("../../ui/index.js");
+const SearchHighlighter_1 = require("./SearchHighlighter.js");
+function SearchNewModal({ data, columns, mainColumns, onRowSelect, selectedRows = new Set(), className = '', onSearchClear }) {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(0);
+    const [selectedDuringSearch, setSelectedDuringSearch] = (0, react_1.useState)([]);
+    const [searchResults, setSearchResults] = (0, react_1.useState)({
+        matchingRows: [],
+        rowIds: [],
+        columnMatches: {}
+    });
+    const searchInputRef = (0, react_1.useRef)(null);
+    const modalRef = (0, react_1.useRef)(null);
+    const highlightedItemRef = (0, react_1.useRef)(null);
+    // Parse main columns for search - memoized to prevent infinite re-renders
+    const searchColumns = (0, react_1.useMemo)(() => {
+        return mainColumns ? mainColumns.split(',').map(col => col.trim()) : undefined;
+    }, [mainColumns]);
+    // Perform search when search value changes
+    (0, react_1.useEffect)(() => {
+        if (searchValue.trim()) {
+            const results = (0, SearchHighlighter_1.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 = (0, react_1.useCallback)((value) => {
+        setSearchValue(value);
+    }, []);
+    // Handle row selection
+    const handleRowSelection = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setShowModal(true);
+    }, []);
+    // Handle input blur
+    const handleBlur = (0, react_1.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
+    (0, react_1.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_1.default.useState(false);
+    // Scroll highlighted item into view (only when using keyboard navigation)
+    (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)((row, index) => {
+        const rowObj = row;
+        return rowObj.id || rowObj.ID || index.toString();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative ${className}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-fg-subtle" }), (0, jsx_runtime_1.jsx)(ui_1.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 && ((0, jsx_runtime_1.jsx)(ui_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-3 w-3 text-fg-subtle" }) }))] }), showModal && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-sm font-semibold text-fg-default", children: ["Search Results", searchResults.matchingRows.length > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2 text-xs text-fg-muted", children: ["(", searchResults.matchingRows.length, " found)"] }))] }), searchResults.matchingRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-fg-muted", children: [highlightedIndex + 1, " of ", searchResults.matchingRows.length, (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-fg-subtle", children: "\u2191\u2193 to navigate, Enter to select" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "max-h-64 overflow-y-auto", children: searchValue ? (searchResults.matchingRows.length > 0 ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center mr-3", children: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-primary", children: displayText.charAt(0).toUpperCase() }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-fg-default text-sm", children: (0, jsx_runtime_1.jsx)(SearchHighlighter_1.SearchHighlighter, { text: displayText, searchTerm: searchValue, highlightClassName: "border-2 border-primary rounded px-0.5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-fg-muted", children: ["Row ID: ", rowId] })] }), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs text-green-600 font-medium", children: "Selected" }))] }, rowId));
+                                }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-6 text-fg-muted text-sm", children: ["No results found for \"", searchValue, "\""] }))) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-6 text-fg-subtle text-sm", children: "Type to search..." })) })] }) }))] }));
+}

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

@@ -0,0 +1,112 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.advancedSearch = advancedSearch;
+const react_1 = require("react");
+const SearchHighlighter_1 = require("./SearchHighlighter.js");
+function advancedSearch({ data, columns, mainColumnsArray, enableSearch, totalSearchResults, updateSearchResults, clearNavigation, setGlobalFilter }) {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [currentSearchTerm, setCurrentSearchTerm] = (0, react_1.useState)('');
+    const [selectedDuringSearch, setSelectedDuringSearch] = (0, react_1.useState)([]);
+    // Debounce search for better performance (300ms delay)
+    const [debouncedSearchValue, setDebouncedSearchValue] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchValue(searchValue);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchValue]);
+    // Enhanced global search with navigation (immediate UI update)
+    const handleGlobalSearchChange = (0, react_1.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
+    (0, react_1.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 = (0, SearchHighlighter_1.advancedSearch)(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 = (0, react_1.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 = (0, react_1.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
+    };
+}