react-glide-table 1.4.0 → 1.6.0

package/dist/core.cjs

@@ -26,18 +26,29 @@ __export(core_exports, {
   DEFAULT_TREE_ID_FIELD: () => DEFAULT_TREE_ID_FIELD,
   DEFAULT_TREE_PARENT_ID_FIELD: () => DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
+  INLINE_SEARCH_MAX_RESULTS: () => INLINE_SEARCH_MAX_RESULTS,
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
   applySelectionUpdater: () => applySelectionUpdater,
   buildColumnFreezeOffsets: () => buildColumnFreezeOffsets,
   buildColumnRowSpanMap: () => buildColumnRowSpanMap,
+  buildFlatSearchCorpus: () => buildFlatSearchCorpus,
   buildRowsPastePayload: () => buildRowsPastePayload,
+  buildSearchMatchKey: () => buildSearchMatchKey,
+  buildSearchMatchKeys: () => buildSearchMatchKeys,
+  buildTreeSearchCorpus: () => buildTreeSearchCorpus,
   canExpandRow: () => canExpandRow,
+  cellValueToSearchText: () => cellValueToSearchText,
+  collectAncestorKeysToExpand: () => collectAncestorKeysToExpand,
   collectCopyRowEntries: () => collectCopyRowEntries,
   collectCopyRows: () => collectCopyRows,
   collectFillChanges: () => collectFillChanges,
   collectRowSpanColumns: () => collectRowSpanColumns,
+  collectSearchMatchesInRange: () => collectSearchMatchesInRange,
+  createSearchRegex: () => createSearchRegex,
+  escapeSearchRegex: () => escapeSearchRegex,
   flattenSubtreeRows: () => flattenSubtreeRows,
+  formatSearchResultLabel: () => formatSearchResultLabel,
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
   getColumnEditType: () => getColumnEditType,
@@ -49,10 +60,15 @@ __export(core_exports, {
   isCellInSelection: () => isCellInSelection,
   isColumnEditable: () => isColumnEditable,
   isEditablePasteTarget: () => isEditablePasteTarget,
+  mapSearchResultToVisibleItem: () => mapSearchResultToVisibleItem,
+  mapSearchResultsToVisibleKeys: () => mapSearchResultsToVisibleKeys,
   measureMergedSpanRowHeights: () => measureMergedSpanRowHeights,
+  nextSearchIndex: () => nextSearchIndex,
+  nextSearchStride: () => nextSearchStride,
   parseCellEditValue: () => parseCellEditValue,
   parseClipboardTSV: () => parseClipboardTSV,
   parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
+  previousSearchIndex: () => previousSearchIndex,
   resolveColumnFreezeSide: () => resolveColumnFreezeSide,
   resolveDataTableLabels: () => resolveDataTableLabels,
   resolvePasteColumnIds: () => resolvePasteColumnIds,
@@ -66,6 +82,7 @@ __export(core_exports, {
   useCellSelection: () => useCellSelection,
   useConvertTreeData: () => useConvertTreeData,
   useGlideTable: () => useGlideTable,
+  useInlineSearch: () => useInlineSearch,
   writeSelectionToClipboard: () => writeSelectionToClipboard
 });
 module.exports = __toCommonJS(core_exports);
@@ -77,7 +94,12 @@ var DEFAULT_DATA_TABLE_LABELS = {
   selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
   expandRow: "Expand row",
   collapseRow: "Collapse row",
-  resizeColumn: "Resize column"
+  resizeColumn: "Resize column",
+  searchPlaceholder: "Search\u2026",
+  searchResultHint: "Type to search",
+  searchPrevious: "Previous result",
+  searchNext: "Next result",
+  searchClose: "Close search"
 };
 function resolveDataTableLabels(partial) {
   return {
@@ -95,7 +117,7 @@ var DEFAULT_TREE_QTY_FIELD = "qty";
 // src/core/useGlideTable.ts
 var import_react_table = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/ui/table/constants.ts
 var DATA_TABLE_ROW_HEIGHT = 44;
@@ -252,6 +274,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function getCellNavigationDelta(key) {
+  switch (key) {
+    case "ArrowUp":
+    case "w":
+    case "W":
+      return { row: -1, col: 0 };
+    case "ArrowDown":
+    case "s":
+    case "S":
+      return { row: 1, col: 0 };
+    case "ArrowLeft":
+    case "a":
+    case "A":
+      return { row: 0, col: -1 };
+    case "ArrowRight":
+    case "d":
+    case "D":
+      return { row: 0, col: 1 };
+    default:
+      return null;
+  }
+}
+function clampCellPosition(position, rowCount, columnCount) {
+  const maxRow = Math.max(rowCount - 1, 0);
+  const maxCol = Math.max(columnCount - 1, 0);
+  return {
+    row: Math.min(Math.max(position.row, 0), maxRow),
+    col: Math.min(Math.max(position.col, 0), maxCol)
+  };
+}
 function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
   if (rowSpan <= 1) return void 0;
   const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
@@ -775,26 +827,44 @@ function useCellSelection({
   data,
   rows,
   enabled = true,
+  columnCount = 0,
   enableSubtreeCopy = false,
   enableInsertPaste = true,
   onDataChange,
   onBatchChange,
-  onRowsPaste
+  onRowsPaste,
+  onCellNavigate
 }) {
   const [dragState, setDragState] = (0, import_react2.useState)(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = (0, import_react2.useRef)(null);
+  const dragStateRef = (0, import_react2.useRef)(dragState);
+  const onCellNavigateRef = (0, import_react2.useRef)(onCellNavigate);
+  dragStateRef.current = dragState;
+  onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
   const handleCellMouseDown = (0, import_react2.useCallback)(
-    (rowIndex, colIndex) => {
+    (rowIndex, colIndex, options) => {
       if (!enabled) return;
-      setDragState({
-        isSelecting: true,
-        isFillDragging: false,
-        start: { row: rowIndex, col: colIndex },
-        end: { row: rowIndex, col: colIndex },
-        fillAnchor: null,
-        fillEnd: null
+      setDragState((prev) => {
+        if (options?.shiftKey && prev.start) {
+          return {
+            ...prev,
+            isSelecting: true,
+            isFillDragging: false,
+            end: { row: rowIndex, col: colIndex },
+            fillAnchor: null,
+            fillEnd: null
+          };
+        }
+        return {
+          isSelecting: true,
+          isFillDragging: false,
+          start: { row: rowIndex, col: colIndex },
+          end: { row: rowIndex, col: colIndex },
+          fillAnchor: null,
+          fillEnd: null
+        };
       });
     },
     [enabled]
@@ -836,6 +906,53 @@ function useCellSelection({
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      const delta = getCellNavigationDelta(e.key);
+      if (!delta) return;
+      const prev = dragStateRef.current;
+      if (!prev.start || !prev.end) return;
+      if (prev.isSelecting || prev.isFillDragging) return;
+      const rowCount = rows.length;
+      const resolvedColumnCount = columnCount > 0 ? columnCount : rows[0]?.getVisibleCells().length ?? 0;
+      if (rowCount <= 0 || resolvedColumnCount <= 0) return;
+      const nextEnd = clampCellPosition(
+        {
+          row: prev.end.row + delta.row,
+          col: prev.end.col + delta.col
+        },
+        rowCount,
+        resolvedColumnCount
+      );
+      if (nextEnd.row === prev.end.row && nextEnd.col === prev.end.col) return;
+      e.preventDefault();
+      const nextState = e.shiftKey ? {
+        ...prev,
+        isSelecting: false,
+        isFillDragging: false,
+        end: nextEnd,
+        fillAnchor: null,
+        fillEnd: null
+      } : {
+        isSelecting: false,
+        isFillDragging: false,
+        start: nextEnd,
+        end: nextEnd,
+        fillAnchor: null,
+        fillEnd: null
+      };
+      dragStateRef.current = nextState;
+      setDragState(nextState);
+      onCellNavigateRef.current?.(nextEnd);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [columnCount, enabled, rows]);
   const copySelection = (0, import_react2.useCallback)(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
@@ -1076,8 +1193,462 @@ function getColumnFreezeStyle(offset, options) {
   };
 }
 
-// src/components/ui/table/features/row-expand/row-expand.ts
+// src/components/ui/table/features/inline-search/inlineSearch.ts
+var INLINE_SEARCH_MAX_RESULTS = 1e3;
+var INLINE_SEARCH_TARGET_TICK_MS = 10;
+var INLINE_SEARCH_INITIAL_STRIDE = 10;
+function escapeSearchRegex(value) {
+  return value.replace(/([$()*+.?[\\\]^{|}-])/g, "\\$1");
+}
+function createSearchRegex(query) {
+  const trimmed = query.trim();
+  if (!trimmed) return null;
+  return new RegExp(escapeSearchRegex(trimmed), "i");
+}
+function cellValueToSearchText(value) {
+  if (value == null) return void 0;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => cellValueToSearchText(item) ?? "").join(" ");
+  }
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function formatSearchResultLabel(status) {
+  const countLabel = status.results >= INLINE_SEARCH_MAX_RESULTS ? `over ${INLINE_SEARCH_MAX_RESULTS}` : `${status.results} result${status.results !== 1 ? "s" : ""}`;
+  if (status.selectedIndex >= 0 && status.results > 0) {
+    return `${status.selectedIndex + 1} of ${countLabel}`;
+  }
+  return countLabel;
+}
+function nextSearchIndex(selectedIndex, results) {
+  if (results <= 0) return -1;
+  if (selectedIndex < 0) return 0;
+  return (selectedIndex + 1) % results;
+}
+function previousSearchIndex(selectedIndex, results) {
+  if (results <= 0) return -1;
+  if (selectedIndex < 0) return results - 1;
+  let next = (selectedIndex - 1) % results;
+  if (next < 0) next += results;
+  return next;
+}
+function buildSearchMatchKey(colIndex, rowIndex) {
+  return `${colIndex}:${rowIndex}`;
+}
+function buildSearchMatchKeys(results) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const [colIndex, rowIndex] of results) {
+    keys.add(buildSearchMatchKey(colIndex, rowIndex));
+  }
+  return keys;
+}
+function collectSearchMatchesInRange(options) {
+  const {
+    query,
+    startRow,
+    rowCount,
+    columnCount,
+    getCellValue,
+    maxResults = INLINE_SEARCH_MAX_RESULTS
+  } = options;
+  const regex = createSearchRegex(query);
+  if (!regex || rowCount <= 0 || columnCount <= 0) return [];
+  const matches = [];
+  for (let rowOffset = 0; rowOffset < rowCount; rowOffset += 1) {
+    const rowIndex = startRow + rowOffset;
+    for (let colIndex = 0; colIndex < columnCount; colIndex += 1) {
+      const text = cellValueToSearchText(getCellValue(rowIndex, colIndex));
+      if (text !== void 0 && regex.test(text)) {
+        matches.push([colIndex, rowIndex]);
+        if (matches.length >= maxResults) {
+          return matches;
+        }
+      }
+    }
+  }
+  return matches;
+}
+function nextSearchStride(currentStride, elapsedMs, targetMs = INLINE_SEARCH_TARGET_TICK_MS) {
+  const rounded = Math.max(elapsedMs, 1);
+  const scalar = targetMs / rounded;
+  return Math.max(1, Math.ceil(currentStride * scalar));
+}
+function buildFlatSearchCorpus(rows, getRowId) {
+  return rows.map((data, index) => ({
+    id: getRowId(data, index),
+    data,
+    ancestorToggleKeys: []
+  }));
+}
+function buildTreeSearchCorpus(visibleRows, options) {
+  const { toggleField, getRowId } = options;
+  const corpus = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (node, ancestorToggleKeys) => {
+    const id = getRowId(node, corpus.length);
+    if (seen.has(id)) return;
+    seen.add(id);
+    corpus.push({
+      id,
+      data: node,
+      ancestorToggleKeys
+    });
+    const children = node.children;
+    if (!Array.isArray(children) || children.length === 0) return;
+    const toggleValue = node[toggleField];
+    const childAncestors = typeof toggleValue === "string" && toggleValue.length > 0 ? [...ancestorToggleKeys, toggleValue] : ancestorToggleKeys;
+    for (const child of children) {
+      if (child && typeof child === "object") {
+        walk(child, childAncestors);
+      }
+    }
+  };
+  for (const row of visibleRows) {
+    const level = row.level;
+    if (level === 0 || level === void 0) {
+      walk(row, []);
+    }
+  }
+  for (const row of visibleRows) {
+    const id = getRowId(row, corpus.length);
+    if (seen.has(id)) continue;
+    walk(row, []);
+  }
+  return corpus;
+}
+function mapSearchResultsToVisibleKeys(results, corpus, visibleRowIndexById) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const [colIndex, corpusRowIndex] of results) {
+    const corpusRow = corpus[corpusRowIndex];
+    if (!corpusRow) continue;
+    const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
+    if (visibleRowIndex === void 0) continue;
+    keys.add(buildSearchMatchKey(colIndex, visibleRowIndex));
+  }
+  return keys;
+}
+function mapSearchResultToVisibleItem(item, corpus, visibleRowIndexById) {
+  const [colIndex, corpusRowIndex] = item;
+  const corpusRow = corpus[corpusRowIndex];
+  if (!corpusRow) return null;
+  const visibleRowIndex = visibleRowIndexById.get(corpusRow.id);
+  if (visibleRowIndex === void 0) return null;
+  return [colIndex, visibleRowIndex];
+}
+function collectAncestorKeysToExpand(corpusRow, expandedRows) {
+  return corpusRow.ancestorToggleKeys.filter((key) => !expandedRows.has(key));
+}
+
+// src/components/ui/table/features/inline-search/useInlineSearch.ts
 var import_react3 = require("react");
+var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
+function useInlineSearch({
+  enabled = false,
+  rowCount,
+  columnCount,
+  getCellValue,
+  initialStartRow = 0,
+  showSearch: controlledShowSearch,
+  searchValue: controlledSearchValue,
+  searchResults: controlledSearchResults,
+  onSearchValueChange,
+  onSearchClose,
+  onSearchResultsChanged,
+  onNavigateToResult,
+  rootRef
+}) {
+  const searchInputId = (0, import_react3.useId)();
+  const searchInputRef = (0, import_react3.useRef)(null);
+  const [internalShowSearch, setInternalShowSearch] = (0, import_react3.useState)(false);
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react3.useState)("");
+  const [internalResults, setInternalResults] = (0, import_react3.useState)(
+    []
+  );
+  const [searchStatus, setSearchStatus] = (0, import_react3.useState)();
+  const searchStatusRef = (0, import_react3.useRef)(searchStatus);
+  searchStatusRef.current = searchStatus;
+  const abortControllerRef = (0, import_react3.useRef)(null);
+  const searchHandleRef = (0, import_react3.useRef)(void 0);
+  const initialStartRowRef = (0, import_react3.useRef)(initialStartRow);
+  initialStartRowRef.current = initialStartRow;
+  const getCellValueRef = (0, import_react3.useRef)(getCellValue);
+  getCellValueRef.current = getCellValue;
+  const showSearch = controlledShowSearch ?? internalShowSearch;
+  const searchValue = controlledSearchValue ?? internalSearchValue;
+  const searchResults = controlledSearchResults ?? internalResults;
+  const setSearchValue = (0, import_react3.useCallback)(
+    (value) => {
+      setInternalSearchValue(value);
+      onSearchValueChange?.(value);
+    },
+    [onSearchValueChange]
+  );
+  const cancelSearch = (0, import_react3.useCallback)(() => {
+    if (searchHandleRef.current !== void 0) {
+      window.cancelAnimationFrame(searchHandleRef.current);
+      searchHandleRef.current = void 0;
+    }
+    abortControllerRef.current?.abort();
+  }, []);
+  const emitResultsChanged = (0, import_react3.useCallback)(
+    (results, navIndex) => {
+      onSearchResultsChanged?.(results, navIndex);
+    },
+    [onSearchResultsChanged]
+  );
+  const navigateToIndex = (0, import_react3.useCallback)(
+    (results, navIndex) => {
+      if (onSearchResultsChanged) return;
+      if (navIndex < 0 || navIndex >= results.length) return;
+      const item = results[navIndex];
+      if (!item) return;
+      onNavigateToResult?.(item);
+    },
+    [onNavigateToResult, onSearchResultsChanged]
+  );
+  const beginSearch = (0, import_react3.useCallback)(
+    (query) => {
+      if (controlledSearchResults !== void 0) return;
+      const totalRows = rowCount;
+      if (totalRows === 0 || columnCount === 0) {
+        setSearchStatus(void 0);
+        setInternalResults([]);
+        emitResultsChanged([], -1);
+        return;
+      }
+      let startY = Math.min(
+        Math.max(0, initialStartRowRef.current),
+        totalRows - 1
+      );
+      let searchStride = Math.min(INLINE_SEARCH_INITIAL_STRIDE, totalRows);
+      let rowsSearched = 0;
+      const runningResult = [];
+      setSearchStatus(void 0);
+      setInternalResults([]);
+      const tick = () => {
+        if (abortControllerRef.current?.signal.aborted) return;
+        const tStart = performance.now();
+        const rowsLeft = totalRows - rowsSearched;
+        const height = Math.min(searchStride, rowsLeft, totalRows - startY);
+        if (height <= 0) {
+          return;
+        }
+        const chunk = collectSearchMatchesInRange({
+          query,
+          startRow: startY,
+          rowCount: height,
+          columnCount,
+          getCellValue: (rowIndex, colIndex) => getCellValueRef.current(rowIndex, colIndex),
+          maxResults: INLINE_SEARCH_MAX_RESULTS - runningResult.length
+        });
+        if (chunk.length > 0) {
+          runningResult.push(...chunk);
+          setInternalResults([...runningResult]);
+        }
+        rowsSearched += height;
+        const selectedIndex = searchStatusRef.current?.selectedIndex ?? -1;
+        setSearchStatus({
+          results: runningResult.length,
+          rowsSearched,
+          selectedIndex
+        });
+        emitResultsChanged(runningResult, selectedIndex);
+        if (startY + height >= totalRows) {
+          startY = 0;
+        } else {
+          startY += height;
+        }
+        searchStride = nextSearchStride(
+          searchStride,
+          performance.now() - tStart
+        );
+        if (rowsSearched < totalRows && runningResult.length < INLINE_SEARCH_MAX_RESULTS) {
+          searchHandleRef.current = window.requestAnimationFrame(tick);
+        }
+      };
+      cancelSearch();
+      abortControllerRef.current = new AbortController();
+      searchHandleRef.current = window.requestAnimationFrame(tick);
+    },
+    [
+      cancelSearch,
+      columnCount,
+      controlledSearchResults,
+      emitResultsChanged,
+      rowCount
+    ]
+  );
+  const openSearch = (0, import_react3.useCallback)(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(true);
+    }
+  }, [controlledShowSearch]);
+  const closeSearch = (0, import_react3.useCallback)(() => {
+    if (controlledShowSearch === void 0) {
+      setInternalShowSearch(false);
+    }
+    onSearchClose?.();
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    cancelSearch();
+  }, [
+    cancelSearch,
+    controlledShowSearch,
+    emitResultsChanged,
+    onSearchClose
+  ]);
+  const goToNext = (0, import_react3.useCallback)(() => {
+    if (!searchStatus || searchStatus.results === 0) return;
+    const newIndex = nextSearchIndex(
+      searchStatus.selectedIndex,
+      searchStatus.results
+    );
+    setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
+    emitResultsChanged(searchResults, newIndex);
+    navigateToIndex(searchResults, newIndex);
+  }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
+  const goToPrevious = (0, import_react3.useCallback)(() => {
+    if (!searchStatus || searchStatus.results === 0) return;
+    const newIndex = previousSearchIndex(
+      searchStatus.selectedIndex,
+      searchStatus.results
+    );
+    setSearchStatus({ ...searchStatus, selectedIndex: newIndex });
+    emitResultsChanged(searchResults, newIndex);
+    navigateToIndex(searchResults, newIndex);
+  }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
+  (0, import_react3.useEffect)(() => {
+    if (controlledSearchResults === void 0) return;
+    if (controlledSearchResults.length > 0) {
+      setSearchStatus((current) => ({
+        rowsSearched: rowCount,
+        results: controlledSearchResults.length,
+        selectedIndex: current?.selectedIndex ?? -1
+      }));
+    } else {
+      setSearchStatus(void 0);
+    }
+  }, [controlledSearchResults, rowCount]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    setSearchStatus(void 0);
+    setInternalResults([]);
+    emitResultsChanged([], -1);
+    if (showSearch) {
+      queueMicrotask(() => {
+        searchInputRef.current?.focus({ preventScroll: true });
+      });
+    } else {
+      cancelSearch();
+    }
+  }, [enabled, showSearch]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled || !showSearch) return;
+    if (controlledSearchResults !== void 0) return;
+    if (searchValue.trim() === "") {
+      setSearchStatus(void 0);
+      setInternalResults([]);
+      cancelSearch();
+      emitResultsChanged([], -1);
+      return;
+    }
+    beginSearch(searchValue);
+  }, [
+    beginSearch,
+    cancelSearch,
+    controlledSearchResults,
+    emitResultsChanged,
+    enabled,
+    searchValue,
+    showSearch
+  ]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (!(event.ctrlKey || event.metaKey)) return;
+      if (event.key.toLowerCase() !== "f") return;
+      const root = rootRef?.current;
+      if (root) {
+        const active = document.activeElement;
+        const focusInside = active === root || active instanceof Node && root.contains(active);
+        if (!focusInside && active !== document.body) {
+          return;
+        }
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (showSearch) {
+        searchInputRef.current?.focus({ preventScroll: true });
+        searchInputRef.current?.select();
+        return;
+      }
+      if (controlledShowSearch === void 0) {
+        setInternalShowSearch(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [controlledShowSearch, enabled, rootRef, showSearch]);
+  (0, import_react3.useEffect)(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = (0, import_react3.useMemo)(
+    () => buildSearchMatchKeys(searchResults),
+    [searchResults]
+  );
+  const activeMatch = (0, import_react3.useMemo)(() => {
+    if (!searchStatus || searchStatus.selectedIndex < 0) return null;
+    return searchResults[searchStatus.selectedIndex] ?? null;
+  }, [searchResults, searchStatus]);
+  if (!enabled) {
+    return {
+      enabled: false,
+      showSearch: false,
+      searchValue: "",
+      searchResults: [],
+      searchStatus: void 0,
+      searchMatchKeys: EMPTY_MATCH_KEYS,
+      activeMatch: null,
+      searchInputRef,
+      searchInputId,
+      canClose: false,
+      openSearch,
+      closeSearch,
+      setSearchValue,
+      goToNext,
+      goToPrevious
+    };
+  }
+  return {
+    enabled: true,
+    showSearch,
+    searchValue,
+    searchResults,
+    searchStatus,
+    searchMatchKeys,
+    activeMatch,
+    searchInputRef,
+    searchInputId,
+    canClose: controlledShowSearch === void 0 || onSearchClose !== void 0,
+    openSearch,
+    closeSearch,
+    setSearchValue,
+    goToNext,
+    goToPrevious
+  };
+}
+
+// src/components/ui/table/features/row-expand/row-expand.ts
+var import_react4 = require("react");
 function getFieldValue(row, key) {
   return row[key];
 }
@@ -1107,12 +1678,12 @@ var useConvertTreeData = ({
   expandedRows,
   onExpandedRowsChange
 }) => {
-  const onExpandedRowsChangeRef = (0, import_react3.useRef)(onExpandedRowsChange);
-  const hasInitializedRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const onExpandedRowsChangeRef = (0, import_react4.useRef)(onExpandedRowsChange);
+  const hasInitializedRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     onExpandedRowsChangeRef.current = onExpandedRowsChange;
   }, [onExpandedRowsChange]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!data || data.length === 0) {
       hasInitializedRef.current = false;
       return;
@@ -1122,7 +1693,7 @@ var useConvertTreeData = ({
     onExpandedRowsChangeRef.current?.(new Set(ids));
     hasInitializedRef.current = true;
   }, [enabled, data, toggleField]);
-  const processedData = (0, import_react3.useMemo)(() => {
+  const processedData = (0, import_react4.useMemo)(() => {
     if (!enabled || !data || data.length === 0) return [];
     const flattenedData = [];
     const flattenItems = (items) => {
@@ -1186,7 +1757,7 @@ var useConvertTreeData = ({
     });
     return rootItems;
   }, [enabled, data, toggleField, childField, flattenField]);
-  const flattenTree = (0, import_react3.useMemo)(() => {
+  const flattenTree = (0, import_react4.useMemo)(() => {
     if (!enabled) return [];
     const flatten = (nodes, result = [], level = 0) => {
       nodes.forEach((node, index) => {
@@ -1236,7 +1807,7 @@ var useConvertTreeData = ({
     preventExpand,
     expandedRows
   ]);
-  const sortedData = (0, import_react3.useMemo)(() => {
+  const sortedData = (0, import_react4.useMemo)(() => {
     if (!enabled) {
       return data ?? [];
     }
@@ -1342,6 +1913,7 @@ function collectRowSpanColumns(columns) {
 
 // src/core/useGlideTable.ts
 var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
+var EMPTY_SEARCH_MATCH_KEYS = /* @__PURE__ */ new Set();
 function useGlideTable(options) {
   const {
     data,
@@ -1382,9 +1954,16 @@ function useGlideTable(options) {
     columnSizing: controlledColumnSizing,
     onColumnSizingChange,
     columnResizeMode = "onChange",
-    enableColumnFreeze = false
+    enableColumnFreeze = false,
+    enableInlineSearch = false,
+    showSearch,
+    searchValue,
+    onSearchValueChange,
+    onSearchClose,
+    searchResults,
+    onSearchResultsChanged
   } = options;
-  const labels = (0, import_react4.useMemo)(() => {
+  const labels = (0, import_react5.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -1395,15 +1974,16 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react4.useState)({});
-  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react4.useState)({});
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react5.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react5.useState)({});
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react5.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react4.useState)(null);
-  const scrollRef = (0, import_react4.useRef)(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react5.useState)(null);
+  const scrollRef = (0, import_react5.useRef)(null);
+  const rootRef = (0, import_react5.useRef)(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -1417,7 +1997,7 @@ function useGlideTable(options) {
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react4.useCallback)(
+  const handleExpandedRowsChange = (0, import_react5.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -1478,13 +2058,13 @@ function useGlideTable(options) {
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react4.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react5.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = (0, import_react4.useMemo)(
+  const columnRowSpanMap = (0, import_react5.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -1493,7 +2073,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = (0, import_react4.useMemo)(() => {
+  const columnFreezeOffsets = (0, import_react5.useMemo)(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -1513,13 +2093,46 @@ function useGlideTable(options) {
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedRowIndices = (0, import_react4.useMemo)(() => {
+  const selectedRowIndices = (0, import_react5.useMemo)(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
+  const scrollCellIntoView = (0, import_react5.useCallback)(
+    (rowIndex, colIndex, options2) => {
+      const align = options2?.align ?? "nearest";
+      const blockAlign = align === "center" ? "center" : "nearest";
+      if (shouldVirtualize) {
+        rowVirtualizer.scrollToIndex(rowIndex, {
+          align: align === "nearest" ? "auto" : align
+        });
+      }
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) return;
+      const scrollToMatchedCell = () => {
+        const cell = scrollElement.querySelector(
+          `[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`
+        );
+        if (cell instanceof HTMLElement) {
+          cell.scrollIntoView({ block: blockAlign, inline: "nearest" });
+        }
+      };
+      if (shouldVirtualize) {
+        requestAnimationFrame(scrollToMatchedCell);
+        return;
+      }
+      scrollToMatchedCell();
+    },
+    [rowVirtualizer, shouldVirtualize]
+  );
+  const handleCellNavigate = (0, import_react5.useCallback)(
+    (position) => {
+      scrollCellIntoView(position.row, position.col, { align: "nearest" });
+    },
+    [scrollCellIntoView]
+  );
   const {
     dragState,
     activeSelectionBounds,
@@ -1531,11 +2144,13 @@ function useGlideTable(options) {
     data: tableData,
     rows,
     enabled: enableCellSelection,
+    columnCount: visibleLeafColumns.length,
     enableSubtreeCopy: resolvedEnableSubtreeCopy,
     enableInsertPaste: enableInsertPaste ?? true,
     onDataChange,
     onBatchChange,
-    onRowsPaste
+    onRowsPaste,
+    onCellNavigate: handleCellNavigate
   });
   const {
     editingCell,
@@ -1545,23 +2160,193 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const handleCellMouseDownWithCommit = (0, import_react4.useCallback)(
-    (rowIndex, colIndex) => {
+  const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
+    (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
         return;
       }
-      handleCellMouseDown(rowIndex, colIndex);
+      handleCellMouseDown(rowIndex, colIndex, options2);
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const clearHover = (0, import_react4.useCallback)(() => {
+  const navigateToSearchResult = (0, import_react5.useCallback)(
+    (item) => {
+      const [colIndex, rowIndex] = item;
+      handleCellMouseDownWithCommit(rowIndex, colIndex);
+      scrollCellIntoView(rowIndex, colIndex, { align: "center" });
+    },
+    [handleCellMouseDownWithCommit, scrollCellIntoView]
+  );
+  const resolveSearchRowId = (0, import_react5.useCallback)(
+    (row, index) => {
+      if (getRowId) return getRowId(row, index);
+      if (enableExpand) {
+        const record = row;
+        const idValue = record.id;
+        if (idValue != null && String(idValue).length > 0) {
+          return String(idValue);
+        }
+        const uniqueId = record.uniqueId;
+        if (uniqueId != null && String(uniqueId).length > 0) {
+          return String(uniqueId);
+        }
+        if (toggleField) {
+          const toggleValue = record[toggleField];
+          if (toggleValue != null && String(toggleValue).length > 0) {
+            return String(toggleValue);
+          }
+        }
+      }
+      return String(index);
+    },
+    [enableExpand, getRowId, toggleField]
+  );
+  const searchCorpus = (0, import_react5.useMemo)(() => {
+    if (!enableInlineSearch) return [];
+    if (enableExpand && toggleField) {
+      return buildTreeSearchCorpus(tableData, {
+        toggleField,
+        getRowId: resolveSearchRowId
+      });
+    }
+    return buildFlatSearchCorpus(tableData, resolveSearchRowId);
+  }, [
+    enableExpand,
+    enableInlineSearch,
+    resolveSearchRowId,
+    tableData,
+    toggleField
+  ]);
+  const searchCorpusRef = (0, import_react5.useRef)(searchCorpus);
+  searchCorpusRef.current = searchCorpus;
+  const visibleRowIndexById = (0, import_react5.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      map.set(resolveSearchRowId(row.original, row.index), row.index);
+    }
+    return map;
+  }, [resolveSearchRowId, rows]);
+  const getSearchCellValue = (0, import_react5.useCallback)(
+    (rowIndex, colIndex) => {
+      const corpusRow = searchCorpusRef.current[rowIndex];
+      const column = visibleLeafColumns[colIndex];
+      if (!corpusRow || !column) return void 0;
+      const visibleIndex = visibleRowIndexById.get(corpusRow.id);
+      if (visibleIndex !== void 0) {
+        const visibleRow = rows[visibleIndex];
+        if (visibleRow) {
+          return visibleRow.getValue(column.id);
+        }
+      }
+      const columnDef = column.columnDef;
+      if ("accessorFn" in columnDef && typeof columnDef.accessorFn === "function") {
+        return columnDef.accessorFn(corpusRow.data, rowIndex);
+      }
+      if ("accessorKey" in columnDef && columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+        return corpusRow.data[String(columnDef.accessorKey)];
+      }
+      return corpusRow.data[column.id];
+    },
+    [rows, visibleLeafColumns, visibleRowIndexById]
+  );
+  const pendingSearchNavRef = (0, import_react5.useRef)(null);
+  const focusSearchResult = (0, import_react5.useCallback)(
+    (colIndex, visibleRowIndex) => {
+      navigateToSearchResult([colIndex, visibleRowIndex]);
+    },
+    [navigateToSearchResult]
+  );
+  const navigateToCorpusSearchResult = (0, import_react5.useCallback)(
+    (item) => {
+      const [colIndex, corpusRowIndex] = item;
+      const corpusRow = searchCorpusRef.current[corpusRowIndex];
+      if (!corpusRow) return;
+      const missingKeys = collectAncestorKeysToExpand(corpusRow, expandedRows);
+      if (missingKeys.length > 0) {
+        pendingSearchNavRef.current = {
+          colIndex,
+          rowId: corpusRow.id
+        };
+        const next = new Set(expandedRows);
+        for (const key of corpusRow.ancestorToggleKeys) {
+          next.add(key);
+        }
+        handleExpandedRowsChange(next);
+        return;
+      }
+      const visibleItem = mapSearchResultToVisibleItem(
+        item,
+        searchCorpusRef.current,
+        visibleRowIndexById
+      );
+      if (!visibleItem) return;
+      focusSearchResult(visibleItem[0], visibleItem[1]);
+    },
+    [
+      expandedRows,
+      focusSearchResult,
+      handleExpandedRowsChange,
+      visibleRowIndexById
+    ]
+  );
+  (0, import_react5.useEffect)(() => {
+    const pending = pendingSearchNavRef.current;
+    if (!pending) return;
+    const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
+    if (visibleRowIndex === void 0) return;
+    pendingSearchNavRef.current = null;
+    focusSearchResult(pending.colIndex, visibleRowIndex);
+  }, [focusSearchResult, rows, visibleRowIndexById]);
+  const initialSearchStartRow = virtualRows[0]?.index ?? 0;
+  const inlineSearch = useInlineSearch({
+    enabled: enableInlineSearch,
+    rowCount: searchCorpus.length,
+    columnCount: visibleLeafColumns.length,
+    getCellValue: getSearchCellValue,
+    initialStartRow: initialSearchStartRow,
+    showSearch,
+    searchValue,
+    searchResults,
+    onSearchValueChange,
+    onSearchClose,
+    onSearchResultsChanged,
+    onNavigateToResult: navigateToCorpusSearchResult,
+    rootRef
+  });
+  const visibleSearchMatchKeys = (0, import_react5.useMemo)(() => {
+    if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
+    return mapSearchResultsToVisibleKeys(
+      inlineSearch.searchResults,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.searchResults,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const visibleActiveMatch = (0, import_react5.useMemo)(() => {
+    if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
+    return mapSearchResultToVisibleItem(
+      inlineSearch.activeMatch,
+      searchCorpus,
+      visibleRowIndexById
+    );
+  }, [
+    enableInlineSearch,
+    inlineSearch.activeMatch,
+    searchCorpus,
+    visibleRowIndexById
+  ]);
+  const clearHover = (0, import_react5.useCallback)(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = (0, import_react4.useCallback)((rowIndex, _rowData) => {
+  const handleRowHover = (0, import_react5.useCallback)((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = (0, import_react4.useCallback)(
+  const handleToggleSelect = (0, import_react5.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -1571,14 +2356,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react4.useCallback)(
+  const handleToggleExpand = (0, import_react5.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react4.useMemo)(() => {
+  const rowContextValue = (0, import_react5.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -1626,6 +2411,11 @@ function useGlideTable(options) {
       columnFreeze: {
         enableColumnFreeze,
         offsets: columnFreezeOffsets
+      },
+      inlineSearch: {
+        enabled: enableInlineSearch,
+        matchKeys: visibleSearchMatchKeys,
+        activeMatch: visibleActiveMatch
       }
     };
   }, [
@@ -1661,14 +2451,17 @@ function useGlideTable(options) {
     labels.collapseRow,
     enableColumnResize,
     enableColumnFreeze,
-    columnFreezeOffsets
+    columnFreezeOffsets,
+    enableInlineSearch,
+    visibleSearchMatchKeys,
+    visibleActiveMatch
   ]);
-  const copySelectionRef = (0, import_react4.useRef)(copySelection);
-  (0, import_react4.useEffect)(() => {
+  const copySelectionRef = (0, import_react5.useRef)(copySelection);
+  (0, import_react5.useEffect)(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = (0, import_react4.useCallback)((options2) => copySelectionRef.current(options2), []);
-  (0, import_react4.useEffect)(() => {
+  const stableCopySelection = (0, import_react5.useCallback)((options2) => copySelectionRef.current(options2), []);
+  (0, import_react5.useEffect)(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -1684,8 +2477,10 @@ function useGlideTable(options) {
     enableCellSelection,
     enableColumnResize,
     enableColumnFreeze,
+    enableInlineSearch,
     shouldVirtualize,
     scrollRef,
+    rootRef,
     rowVirtualizer,
     virtualRows,
     paddingTop,
@@ -1693,7 +2488,21 @@ function useGlideTable(options) {
     rowContextValue,
     handleToggleSelect,
     clearHover,
-    copySelection: stableCopySelection
+    copySelection: stableCopySelection,
+    inlineSearch: {
+      showSearch: inlineSearch.showSearch,
+      searchValue: inlineSearch.searchValue,
+      searchStatus: inlineSearch.searchStatus,
+      searchInputRef: inlineSearch.searchInputRef,
+      searchInputId: inlineSearch.searchInputId,
+      canClose: inlineSearch.canClose,
+      searchRowCount: searchCorpus.length,
+      setSearchValue: inlineSearch.setSearchValue,
+      closeSearch: inlineSearch.closeSearch,
+      goToNext: inlineSearch.goToNext,
+      goToPrevious: inlineSearch.goToPrevious,
+      openSearch: inlineSearch.openSearch
+    }
   };
 }
 
@@ -1717,18 +2526,29 @@ function getColumnSizeStyle(size, options) {
   DEFAULT_TREE_ID_FIELD,
   DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD,
+  INLINE_SEARCH_MAX_RESULTS,
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
   buildColumnFreezeOffsets,
   buildColumnRowSpanMap,
+  buildFlatSearchCorpus,
   buildRowsPastePayload,
+  buildSearchMatchKey,
+  buildSearchMatchKeys,
+  buildTreeSearchCorpus,
   canExpandRow,
+  cellValueToSearchText,
+  collectAncestorKeysToExpand,
   collectCopyRowEntries,
   collectCopyRows,
   collectFillChanges,
   collectRowSpanColumns,
+  collectSearchMatchesInRange,
+  createSearchRegex,
+  escapeSearchRegex,
   flattenSubtreeRows,
+  formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
@@ -1740,10 +2560,15 @@ function getColumnSizeStyle(size, options) {
   isCellInSelection,
   isColumnEditable,
   isEditablePasteTarget,
+  mapSearchResultToVisibleItem,
+  mapSearchResultsToVisibleKeys,
   measureMergedSpanRowHeights,
+  nextSearchIndex,
+  nextSearchStride,
   parseCellEditValue,
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
+  previousSearchIndex,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
   resolvePasteColumnIds,
@@ -1757,5 +2582,6 @@ function getColumnSizeStyle(size, options) {
   useCellSelection,
   useConvertTreeData,
   useGlideTable,
+  useInlineSearch,
   writeSelectionToClipboard
 });