@multiplatform.one/table 6.7.0 → 7.1.0

package/dist/jsx/components/DataTableSearch/index.native.js

@@ -38,6 +38,9 @@ var import_tamagui = require("tamagui");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_withInterp = require("../../utils/withInterp.native.js");
+var iconSizeForToken = function iconSizeForToken2(token) {
+  return (0, import_theme.sizeRecipeForToken)(token).iconSize;
+};
 function DataTableSearch(props) {
   var _ref, _props_data, _props_columns;
   var ctx = (0, import_DataTableStateContext.useDataTableState)();
@@ -45,6 +48,7 @@ function DataTableSearch(props) {
   var columns = (_props_columns = props.columns) !== null && _props_columns !== void 0 ? _props_columns : [];
   var {
     onSearchResults,
+    onHighlightText,
     placeholder = (0, import_t.t)("Search across all columns..."),
     debounceMs = 300,
     showAdvancedOptions = true,
@@ -56,6 +60,9 @@ function DataTableSearch(props) {
   } = (0, import_theme.useResolvedKnobs)();
   var sz = knobProps.sizeToken;
   var searchMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  var iconPx = iconSizeForToken(String(sz));
+  var resultsId = (0, import_react2.useId)();
+  var rootRef = (0, import_react2.useRef)(null);
   var [searchTerm, setSearchTerm] = (0, import_react2.useState)("");
   var [debouncedSearchTerm, setDebouncedSearchTerm] = (0, import_react2.useState)("");
   var [searchOptions, setSearchOptions] = (0, import_react2.useState)({
@@ -68,23 +75,47 @@ function DataTableSearch(props) {
     regex: false,
     highlightResults: true
   });
+  var compiled = (0, import_react2.useMemo)(function () {
+    return compileSearchPattern({
+      ...searchOptions,
+      searchTerm: debouncedSearchTerm
+    });
+  }, [searchOptions, debouncedSearchTerm]);
+  var results = (0, import_react2.useMemo)(function () {
+    if (!debouncedSearchTerm.trim()) return data;
+    if (compiled.invalid || !compiled.regex) return [];
+    return matchRows(data, searchOptions.columns, compiled.regex);
+  }, [data, debouncedSearchTerm, compiled, searchOptions.columns]);
+  (0, import_react2.useEffect)(function () {
+    onSearchResults === null || onSearchResults === void 0 ? void 0 : onSearchResults(results, {
+      ...searchOptions,
+      searchTerm: debouncedSearchTerm
+    });
+  }, [results, data, searchOptions, debouncedSearchTerm, onSearchResults]);
   (0, import_react2.useEffect)(function () {
-    if (debouncedSearchTerm.trim()) {
-      var results = performSearch(data, {
-        ...searchOptions,
-        searchTerm: debouncedSearchTerm
-      });
-      onSearchResults === null || onSearchResults === void 0 ? void 0 : onSearchResults(results, {
-        ...searchOptions,
-        searchTerm: debouncedSearchTerm
-      });
+    if (!onHighlightText) return;
+    if (searchOptions.highlightResults && debouncedSearchTerm.trim() && !compiled.invalid) {
+      onHighlightText(debouncedSearchTerm);
     } else {
-      onSearchResults === null || onSearchResults === void 0 ? void 0 : onSearchResults(data, {
-        ...searchOptions,
-        searchTerm: ""
-      });
+      onHighlightText("");
     }
-  }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
+  }, [debouncedSearchTerm, searchOptions.highlightResults, compiled.invalid, onHighlightText]);
+  (0, import_react2.useEffect)(function () {
+    if (!import_tamagui.isWeb || disabled) return;
+    var onKey = function onKey2(e) {
+      var _rootRef_current_querySelector, _rootRef_current;
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return;
+      var target = e.target;
+      if (target === null || target === void 0 ? void 0 : target.closest("input, textarea, select, [contenteditable=true]")) return;
+      e.preventDefault();
+      var field = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : (_rootRef_current_querySelector = _rootRef_current.querySelector) === null || _rootRef_current_querySelector === void 0 ? void 0 : _rootRef_current_querySelector.call(_rootRef_current, "[role='searchbox']");
+      field === null || field === void 0 ? void 0 : field.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return function () {
+      return window.removeEventListener("keydown", onKey);
+    };
+  }, [disabled]);
   var handleOptionsChange = function handleOptionsChange2(newOptions) {
     setSearchOptions(function (prev) {
       return {
@@ -98,44 +129,66 @@ function DataTableSearch(props) {
   });
   var selectedColumnCount = searchOptions.columns.length;
   var totalColumnCount = searchableColumns.length;
+  var optionsActive = searchOptions.caseSensitive || searchOptions.wholeWord || searchOptions.regex || !searchOptions.highlightResults || selectedColumnCount !== totalColumnCount;
+  var isSearching = searchTerm !== debouncedSearchTerm;
+  var showStatus = Boolean(debouncedSearchTerm.trim());
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    gap: "$2",
+    ref: rootRef,
+    // role="search" is a valid ARIA landmark role but outside RN's `Role`
+    // union; this web-only bag forwards it to the DOM node (house Record
+    // cast).
+    ...{
+      role: "search"
+    },
+    "aria-busy": isSearching || void 0,
+    ...knobProps.gap,
     alignItems: "center",
     flex: 1,
     maxWidth: searchMaxWidth,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    children: [
+    /* LC-71: SearchInput is the whole search box — ring lives on its
+    Input.Box (magnifier + field + clear). Do not fork or wrap the
+    field in extra chrome that would split that boundary. */
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
-      children: (
-      /* Catalog SearchInput (census item 6): owns the debounce and the
-      icon + field + clear anatomy this file used to re-compose. */
-      /* @__PURE__ */
-      (0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+      minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
         value: searchTerm,
         onChange: setSearchTerm,
         onSearch: setDebouncedSearchTerm,
         debounceMs,
         placeholder,
-        disabled
-      }))
+        disabled,
+        size: sz,
+        "aria-label": (0, import_t.t)("Search table"),
+        inputProps: {
+          "aria-describedby": showStatus ? resultsId : void 0,
+          "aria-keyshortcuts": "/",
+          "aria-invalid": compiled.invalid || void 0
+        }
+      })
     }), showAdvancedOptions && /* @__PURE__ */(0, import_jsx_runtime.jsx)(SearchOptionsPopover, {
       searchOptions,
       onOptionsChange: handleOptionsChange,
       columns: searchableColumns,
       selectedColumnCount,
       totalColumnCount,
-      disabled
-    }), debouncedSearchTerm ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingHorizontal: "$2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: "$2",
-        color: "$color10",
-        children: (0, import_t.t)("{{count}} results", {
-          count: performSearch(data, {
-            ...searchOptions,
-            searchTerm: debouncedSearchTerm
-          }).length
-        })
-      })
+      disabled,
+      iconPx,
+      optionsActive
+    }), showStatus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      id: resultsId,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      ...knobProps.label,
+      color: compiled.invalid ? import_forms.formCommonColors.error : import_forms.formCommonColors.muted,
+      flexShrink: 0,
+      children: compiled.invalid ? (0, import_t.t)("Invalid regex") : (0, import_withInterp.bidiIsolate)((0, import_t.t)("{{shown}} of {{total}}", {
+        shown: results.length,
+        total: data.length
+      }))
     }) : null]
   });
 }
@@ -146,231 +199,217 @@ function SearchOptionsPopover(param) {
     columns,
     selectedColumnCount,
     totalColumnCount,
-    disabled
+    disabled,
+    iconPx,
+    optionsActive
   } = param;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var [columnVisibility, setColumnVisibility] = (0, import_react2.useState)(function () {
-    var visibility = {};
-    columns.forEach(function (col) {
-      var key = col.accessorKey || col.id || "";
-      visibility[key] = searchOptions.columns.includes(key);
-    });
-    return visibility;
-  });
+  var [open, setOpen] = (0, import_react2.useState)(false);
   var handleColumnToggle = function handleColumnToggle2(columnKey, checked) {
-    var newVisibility = {
-      ...columnVisibility,
-      [columnKey]: checked
-    };
-    setColumnVisibility(newVisibility);
-    var selectedColumns = Object.entries(newVisibility).filter(function (param2) {
-      var [_, isVisible] = param2;
-      return isVisible;
-    }).map(function (param2) {
-      var [key] = param2;
-      return key;
+    var next = checked ? Array.from(/* @__PURE__ */new Set([...searchOptions.columns, columnKey])) : searchOptions.columns.filter(function (key) {
+      return key !== columnKey;
     });
     onOptionsChange({
-      columns: selectedColumns
+      columns: next
     });
   };
   var handleSelectAllColumns = function handleSelectAllColumns2() {
-    var allColumns = columns.map(function (col) {
-      return col.accessorKey || col.id || "";
-    });
-    setColumnVisibility(Object.fromEntries(allColumns.map(function (key) {
-      return [key, true];
-    })));
     onOptionsChange({
-      columns: allColumns
+      columns: columns.map(function (col) {
+        return col.accessorKey || col.id || "";
+      })
     });
   };
   var handleSelectNoColumns = function handleSelectNoColumns2() {
-    setColumnVisibility(Object.fromEntries(columns.map(function (col) {
-      return [col.accessorKey || col.id || "", false];
-    })));
     onOptionsChange({
       columns: []
     });
   };
   var sz = knobProps.sizeToken;
   var panelMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
-  return (
-    // LC-06: anchored popover with collision handling — flip, shift, and
-    // clamp inside the viewport (`resize` is a no-op on native).
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-      stayInFrame: true,
-      allowFlip: true,
-      resize: true,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-        asChild: true,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: knobProps.sizeToken,
-          variant: "outlined",
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
-            size: 16
-          }),
-          disabled,
-          "aria-label": (0, import_t.t)("Search options"),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-            size: 16
-          })
-        })
-      }),
-      /* SF-OVERLAY/E-OVERLAY: canonical elevated overlay (complete
-      elevatedSurface knob fragment + transition). The frame owns only
-      its border (inset lives on the panel YStack below); overflow
-      hidden clips the scroll region to the radius knob. */
-      /* @__PURE__ */
-      (0, import_jsx_runtime.jsx)(import_components.PopoverContent, {
-        padding: 0,
-        overflow: "hidden",
-        alignItems: "stretch",
-        minWidth: 280,
-        children: (
-        /* LC-10: when clamped below content height the body scrolls
-        internally — rows are never sliced at the frame edge. */
-        /* @__PURE__ */
-        (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-          flexShrink: 1,
-          maxHeight: panelMaxHeight,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
-            ...knobProps.gapLg,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open,
+    onOpenChange: setOpen,
+    stayInFrame: true,
+    allowFlip: true,
+    resize: true,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        accent: optionsActive,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SlidersHorizontalIcon, {
+          size: iconPx,
+          weight: optionsActive ? "fill" : "regular"
+        }),
+        disabled,
+        "aria-label": (0, import_t.t)("Search options"),
+        "aria-expanded": open,
+        "aria-haspopup": "dialog"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PopoverContent, {
+      padding: 0,
+      overflow: "hidden",
+      alignItems: "stretch",
+      minWidth: 280,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flexShrink: 1,
+        maxHeight: panelMaxHeight,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.panelPadding,
+          ...knobProps.gapLg,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.heading,
+            ...knobProps.label,
+            fontWeight: "600",
+            children: (0, import_t.t)("Search Options")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.gap,
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$5",
-              fontWeight: "600",
-              children: (0, import_t.t)("Search Options")
-            }), /* Search Settings */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-              ...knobProps.gap,
+              ...knobProps.label,
+              fontWeight: "500",
+              children: (0, import_t.t)("Search Settings")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+              compact: true,
+              label: (0, import_t.t)("Case sensitive"),
+              checked: searchOptions.caseSensitive,
+              onCheckedChange: function onCheckedChange(checked) {
+                return onOptionsChange({
+                  caseSensitive: checked
+                });
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+              compact: true,
+              label: (0, import_t.t)("Whole word only"),
+              checked: searchOptions.wholeWord,
+              onCheckedChange: function onCheckedChange(checked) {
+                return onOptionsChange({
+                  wholeWord: checked
+                });
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+              compact: true,
+              label: (0, import_t.t)("Use regex"),
+              checked: searchOptions.regex,
+              onCheckedChange: function onCheckedChange(checked) {
+                return onOptionsChange({
+                  regex: checked
+                });
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+              compact: true,
+              label: (0, import_t.t)("Highlight results"),
+              checked: searchOptions.highlightResults,
+              onCheckedChange: function onCheckedChange(checked) {
+                return onOptionsChange({
+                  highlightResults: checked
+                });
+              }
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.gap,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              justifyContent: "space-between",
+              alignItems: "center",
               children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                fontSize: "$4",
+                ...knobProps.label,
                 fontWeight: "500",
-                children: (0, import_t.t)("Search Settings")
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Case sensitive"),
-                checked: searchOptions.caseSensitive,
-                onCheckedChange: function onCheckedChange(checked) {
-                  return onOptionsChange({
-                    caseSensitive: checked
-                  });
-                }
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Whole word only"),
-                checked: searchOptions.wholeWord,
-                onCheckedChange: function onCheckedChange(checked) {
-                  return onOptionsChange({
-                    wholeWord: checked
-                  });
-                }
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Use regex"),
-                checked: searchOptions.regex,
-                onCheckedChange: function onCheckedChange(checked) {
-                  return onOptionsChange({
-                    regex: checked
-                  });
-                }
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Highlight results"),
-                checked: searchOptions.highlightResults,
-                onCheckedChange: function onCheckedChange(checked) {
-                  return onOptionsChange({
-                    highlightResults: checked
-                  });
-                }
+                children: (0, import_t.t)("Search Columns")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.label,
+                color: import_forms.formCommonColors.muted,
+                children: (0, import_withInterp.bidiIsolate)((0, import_t.t)("{{selected}} of {{total}}", {
+                  selected: selectedColumnCount,
+                  total: totalColumnCount
+                }))
               })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Column Selection */
-            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
               ...knobProps.gap,
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                justifyContent: "space-between",
-                alignItems: "center",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  fontSize: "$4",
-                  fontWeight: "500",
-                  children: (0, import_t.t)("Search Columns")
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                  fontSize: "$2",
-                  color: "$color10",
-                  children: (/* Bidi-isolated so RTL contexts can't reorder the count run */
-                  (0, import_withInterp.bidiIsolate)((0, import_t.t)("{{selected}} of {{total}}", {
-                    selected: selectedColumnCount,
-                    total: totalColumnCount
-                  })))
-                })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                gap: "$2",
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  size: "$2",
-                  variant: "outlined",
-                  onPress: handleSelectAllColumns,
-                  children: (0, import_t.t)("All")
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  size: "$2",
-                  variant: "outlined",
-                  onPress: handleSelectNoColumns,
-                  children: (0, import_t.t)("None")
-                })]
-              }),
-              /* One scroll region for the whole panel body (above); a nested
-              column scroller would trap wheel/drag inside 200px. */
-              /* @__PURE__ */
-              (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
-                children: columns.map(function (col) {
-                  var key = col.accessorKey || col.id || "";
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                    label: col.header || key,
-                    checked: columnVisibility[key] || false,
-                    onCheckedChange: function onCheckedChange(checked) {
-                      return handleColumnToggle(key, checked);
-                    }
-                  }, key);
-                })
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
+                compact: true,
+                variant: "outlined",
+                onPress: handleSelectAllColumns,
+                children: (0, import_t.t)("All")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
+                compact: true,
+                variant: "outlined",
+                onPress: handleSelectNoColumns,
+                children: (0, import_t.t)("None")
               })]
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$1",
+              children: columns.map(function (col) {
+                var key = col.accessorKey || col.id || "";
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+                  compact: true,
+                  label: col.header || key,
+                  checked: searchOptions.columns.includes(key),
+                  onCheckedChange: function onCheckedChange(checked) {
+                    return handleColumnToggle(key, checked);
+                  }
+                }, key);
+              })
             })]
-          })
-        }))
-      })]
-    })
-  );
+          })]
+        })
+      })
+    })]
+  });
 }
-function performSearch(data, options) {
+function compileSearchPattern(options) {
   var {
     searchTerm,
-    columns,
     caseSensitive,
     wholeWord,
     regex
   } = options;
   if (!searchTerm.trim()) {
-    return data;
+    return {
+      regex: null,
+      invalid: false
+    };
   }
-  var searchPattern;
+  var flags = caseSensitive ? "" : "i";
   try {
     if (regex) {
-      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
-    } else {
-      var pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
-      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
+      return {
+        regex: new RegExp(searchTerm, flags),
+        invalid: false
+      };
     }
+    var pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
+    return {
+      regex: new RegExp(pattern, flags),
+      invalid: false
+    };
   } catch (unused) {
-    return [];
+    return {
+      regex: null,
+      invalid: true
+    };
   }
+}
+function matchRows(data, columns, searchPattern) {
   return data.filter(function (item) {
     return columns.some(function (columnKey) {
       var value = item[columnKey];
       if (value == null) return false;
-      var stringValue = String(value);
-      return searchPattern.test(stringValue);
+      searchPattern.lastIndex = 0;
+      return searchPattern.test(String(value));
     });
   });
 }
+function performSearch(data, options) {
+  var compiled = compileSearchPattern(options);
+  if (!options.searchTerm.trim()) return data;
+  if (compiled.invalid || !compiled.regex) return [];
+  return matchRows(data, options.columns, compiled.regex);
+}
 function escapeRegex(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -380,48 +419,58 @@ function highlightText(text, options) {
     caseSensitive = false,
     wholeWord = false,
     regex = false,
-    highlightClassName = "search-highlight",
-    highlightStyle: _highlightStyle = {
-      backgroundColor: "var(--color-yellow3)",
-      padding: "2px 4px",
-      borderRadius: "3px",
-      fontWeight: "bold"
-    }
+    highlightClassName = "search-highlight"
   } = options;
   if (!searchTerm.trim() || !text) {
     return text;
   }
-  var searchPattern;
+  var compiled = compileSearchPattern({
+    searchTerm,
+    caseSensitive,
+    wholeWord,
+    regex
+  });
+  if (!compiled.regex) return text;
+  var global = new RegExp(compiled.regex.source, compiled.regex.flags.includes("i") ? "gi" : "g");
+  var parts = [];
+  var last = 0;
+  var index = 0;
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
   try {
-    if (regex) {
-      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
-    } else {
-      var pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
-      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
-    }
-  } catch (unused) {
-    return text;
-  }
-  var parts = text.split(searchPattern);
-  if (parts.length === 1) {
-    return text;
-  }
-  var matches = text.match(searchPattern) || [];
-  var result = [];
-  parts.forEach(function (part, index) {
-    result.push(part);
-    if (index < parts.length - 1 && matches[index]) {
-      result.push(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    for (var _iterator = text.matchAll(global)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var match = _step.value;
+      var _match_index;
+      var start = (_match_index = match.index) !== null && _match_index !== void 0 ? _match_index : 0;
+      if (start > last) parts.push(text.slice(last, start));
+      parts.push(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         className: highlightClassName,
         backgroundColor: "$yellow3",
         paddingHorizontal: "$1",
         borderRadius: "$1",
         fontWeight: "bold",
-        children: matches[index]
+        children: match[0]
       }, `highlight-${index}`));
+      last = start + match[0].length;
+      index += 1;
     }
-  });
-  return result;
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts.length ? parts : text;
 }
 function useFullTextSearch(param) {
   var {