@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/DataTableSearch/index.tsx

@@ -1,10 +1,10 @@
-import { CaretDownIcon, GearIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { SlidersHorizontalIcon } from "@phosphor-icons/react";
+import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { PopoverContent } from "@multiplatform.one/components";
-import { Button, Checkbox, SearchInput } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import { Button, Checkbox, SearchInput, formCommonColors } from "@multiplatform.one/forms";
+import { Popover, ScrollView, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { t } from "../../shared/t";
 import { bidiIsolate } from "../../utils/withInterp";
@@ -35,16 +35,19 @@ export interface DataTableSearchProps<T = any> {
   disabled?: boolean;
 }
 
+// Search glyphs are control-internal icons (LC-75/LC-79): the generated
+// recipe's icon channel — no handwritten per-token px map.
+const iconSizeForToken = (token: string): number => sizeRecipeForToken(token).iconSize;
+
 export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
-  // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
 
-  // Resolve values: explicit props override context values
   const data = props.data ?? (ctx?.computed.filteredData as T[]) ?? [];
   const columns = props.columns ?? [];
 
   const {
     onSearchResults,
+    onHighlightText,
     placeholder = t("Search across all columns..."),
     debounceMs = 300,
     showAdvancedOptions = true,
@@ -55,6 +58,10 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
   const { knobProps } = useResolvedKnobs();
   const sz = knobProps.sizeToken;
   const searchMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const iconPx = iconSizeForToken(String(sz));
+  const resultsId = useId();
+  const rootRef = useRef<HTMLElement | null>(null);
+
   const [searchTerm, setSearchTerm] = useState("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
   const [searchOptions, setSearchOptions] = useState<SearchOptions>({
@@ -66,25 +73,46 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
     highlightResults: true,
   });
 
-  // Perform search when debounced term changes
+  const compiled = useMemo(
+    () => compileSearchPattern({ ...searchOptions, searchTerm: debouncedSearchTerm }),
+    [searchOptions, debouncedSearchTerm],
+  );
+
+  const results = useMemo(() => {
+    if (!debouncedSearchTerm.trim()) return data;
+    if (compiled.invalid || !compiled.regex) return [];
+    return matchRows(data, searchOptions.columns, compiled.regex);
+  }, [data, debouncedSearchTerm, compiled, searchOptions.columns]);
+
   useEffect(() => {
-    if (debouncedSearchTerm.trim()) {
-      const results = performSearch(data, {
-        ...searchOptions,
-        searchTerm: debouncedSearchTerm,
-      });
-      onSearchResults?.(results, {
-        ...searchOptions,
-        searchTerm: debouncedSearchTerm,
-      });
+    onSearchResults?.(results, {
+      ...searchOptions,
+      searchTerm: debouncedSearchTerm,
+    });
+  }, [results, data, searchOptions, debouncedSearchTerm, onSearchResults]);
+
+  useEffect(() => {
+    if (!onHighlightText) return;
+    if (searchOptions.highlightResults && debouncedSearchTerm.trim() && !compiled.invalid) {
+      onHighlightText(debouncedSearchTerm);
     } else {
-      // Return all data when search is cleared
-      onSearchResults?.(data, {
-        ...searchOptions,
-        searchTerm: "",
-      });
+      onHighlightText("");
     }
-  }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
+  }, [debouncedSearchTerm, searchOptions.highlightResults, compiled.invalid, onHighlightText]);
+
+  useEffect(() => {
+    if (!isWeb || disabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return;
+      const target = e.target as HTMLElement | null;
+      if (target?.closest("input, textarea, select, [contenteditable=true]")) return;
+      e.preventDefault();
+      const field = rootRef.current?.querySelector?.("[role='searchbox']") as HTMLElement | null;
+      field?.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [disabled]);
 
   const handleOptionsChange = (newOptions: Partial<SearchOptions>) => {
     setSearchOptions((prev) => ({ ...prev, ...newOptions }));
@@ -93,12 +121,32 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
   const searchableColumns = columns.filter((col) => col.searchable !== false);
   const selectedColumnCount = searchOptions.columns.length;
   const totalColumnCount = searchableColumns.length;
+  const optionsActive =
+    searchOptions.caseSensitive ||
+    searchOptions.wholeWord ||
+    searchOptions.regex ||
+    !searchOptions.highlightResults ||
+    selectedColumnCount !== totalColumnCount;
+  const isSearching = searchTerm !== debouncedSearchTerm;
+  const showStatus = Boolean(debouncedSearchTerm.trim());
 
   return (
-    <XStack gap="$2" alignItems="center" flex={1} maxWidth={searchMaxWidth}>
-      <View flex={1}>
-        {/* Catalog SearchInput (census item 6): owns the debounce and the
-            icon + field + clear anatomy this file used to re-compose. */}
+    <XStack
+      ref={rootRef as never}
+      // 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" } as Record<string, unknown>)}
+      aria-busy={isSearching || undefined}
+      {...knobProps.gap}
+      alignItems="center"
+      flex={1}
+      maxWidth={searchMaxWidth}
+    >
+      {/* 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. */}
+      <View flex={1} minWidth={0}>
         <SearchInput
           value={searchTerm}
           onChange={setSearchTerm}
@@ -106,6 +154,13 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
           debounceMs={debounceMs}
           placeholder={placeholder}
           disabled={disabled}
+          size={sz}
+          aria-label={t("Search table")}
+          inputProps={{
+            "aria-describedby": showStatus ? resultsId : undefined,
+            "aria-keyshortcuts": "/",
+            "aria-invalid": compiled.invalid || undefined,
+          }}
         />
       </View>
 
@@ -117,27 +172,35 @@ export function DataTableSearch<T = any>(props: DataTableSearchProps<T>) {
           selectedColumnCount={selectedColumnCount}
           totalColumnCount={totalColumnCount}
           disabled={disabled}
+          iconPx={iconPx}
+          optionsActive={optionsActive}
         />
       )}
 
-      {debouncedSearchTerm ? (
-        <View paddingHorizontal="$2">
-          <Text fontSize="$2" color="$color10">
-            {t("{{count}} results", {
-              count: performSearch(data, {
-                ...searchOptions,
-                searchTerm: debouncedSearchTerm,
-              }).length,
-            })}
-          </Text>
-        </View>
+      {showStatus ? (
+        <Text
+          id={resultsId}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          {...knobProps.label}
+          color={compiled.invalid ? formCommonColors.error : formCommonColors.muted}
+          flexShrink={0}
+        >
+          {compiled.invalid
+            ? t("Invalid regex")
+            : bidiIsolate(
+                t("{{shown}} of {{total}}", {
+                  shown: results.length,
+                  total: data.length,
+                }),
+              )}
+        </Text>
       ) : null}
     </XStack>
   );
 }
 
-// Search Options Popover
-
 interface SearchOptionsPopoverProps {
   searchOptions: SearchOptions;
   onOptionsChange: (options: Partial<SearchOptions>) => void;
@@ -150,6 +213,8 @@ interface SearchOptionsPopoverProps {
   selectedColumnCount: number;
   totalColumnCount: number;
   disabled: boolean;
+  iconPx: number;
+  optionsActive: boolean;
 }
 
 function SearchOptionsPopover({
@@ -159,82 +224,59 @@ function SearchOptionsPopover({
   selectedColumnCount,
   totalColumnCount,
   disabled,
+  iconPx,
+  optionsActive,
 }: SearchOptionsPopoverProps) {
   const { knobProps } = useResolvedKnobs();
-  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(() => {
-    const visibility: Record<string, boolean> = {};
-    columns.forEach((col) => {
-      const key = col.accessorKey || col.id || "";
-      visibility[key] = searchOptions.columns.includes(key);
-    });
-    return visibility;
-  });
+  const [open, setOpen] = useState(false);
 
   const handleColumnToggle = (columnKey: string, checked: boolean) => {
-    const newVisibility = { ...columnVisibility, [columnKey]: checked };
-    setColumnVisibility(newVisibility);
-
-    const selectedColumns = Object.entries(newVisibility)
-      .filter(([_, isVisible]) => isVisible)
-      .map(([key]) => key);
-
-    onOptionsChange({ columns: selectedColumns });
+    const next = checked
+      ? Array.from(new Set([...searchOptions.columns, columnKey]))
+      : searchOptions.columns.filter((key) => key !== columnKey);
+    onOptionsChange({ columns: next });
   };
 
   const handleSelectAllColumns = () => {
-    const allColumns = columns.map((col) => col.accessorKey || col.id || "");
-    setColumnVisibility(Object.fromEntries(allColumns.map((key) => [key, true])));
-    onOptionsChange({ columns: allColumns });
+    onOptionsChange({ columns: columns.map((col) => col.accessorKey || col.id || "") });
   };
 
   const handleSelectNoColumns = () => {
-    setColumnVisibility(
-      Object.fromEntries(columns.map((col) => [col.accessorKey || col.id || "", false])),
-    );
     onOptionsChange({ columns: [] });
   };
 
-  // Same size-derived cap as DataTableViewOptions; `resize` shrinks the
-  // panel further whenever the viewport offers less room than the cap.
   const sz = knobProps.sizeToken;
   const 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).
-    <Popover stayInFrame allowFlip resize>
+    <Popover open={open} onOpenChange={setOpen} stayInFrame allowFlip resize>
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
           variant="outlined"
-          icon={<GearIcon size={16} />}
+          accent={optionsActive}
+          icon={<SlidersHorizontalIcon size={iconPx} weight={optionsActive ? "fill" : "regular"} />}
           disabled={disabled}
           aria-label={t("Search options")}
-        >
-          <CaretDownIcon size={16} />
-        </Button>
+          aria-expanded={open}
+          aria-haspopup="dialog"
+        />
       </Popover.Trigger>
 
-      {/* 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. */}
       <PopoverContent padding={0} overflow="hidden" alignItems="stretch" minWidth={280}>
-        {/* LC-10: when clamped below content height the body scrolls
-            internally — rows are never sliced at the frame edge. */}
         <ScrollView flexShrink={1} maxHeight={panelMaxHeight}>
           <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-            <Text fontSize="$5" fontWeight="600">
+            <Text {...knobProps.heading} {...knobProps.label} fontWeight="600">
               {t("Search Options")}
             </Text>
 
-            {/* Search Settings */}
             <YStack {...knobProps.gap}>
-              <Text fontSize="$4" fontWeight="500">
+              <Text {...knobProps.label} fontWeight="500">
                 {t("Search Settings")}
               </Text>
 
               <Checkbox
+                compact
                 label={t("Case sensitive")}
                 checked={searchOptions.caseSensitive}
                 onCheckedChange={(checked) =>
@@ -243,18 +285,21 @@ function SearchOptionsPopover({
               />
 
               <Checkbox
+                compact
                 label={t("Whole word only")}
                 checked={searchOptions.wholeWord}
                 onCheckedChange={(checked) => onOptionsChange({ wholeWord: checked as boolean })}
               />
 
               <Checkbox
+                compact
                 label={t("Use regex")}
                 checked={searchOptions.regex}
                 onCheckedChange={(checked) => onOptionsChange({ regex: checked as boolean })}
               />
 
               <Checkbox
+                compact
                 label={t("Highlight results")}
                 checked={searchOptions.highlightResults}
                 onCheckedChange={(checked) =>
@@ -265,14 +310,12 @@ function SearchOptionsPopover({
 
             <Separator />
 
-            {/* Column Selection */}
             <YStack {...knobProps.gap}>
               <XStack justifyContent="space-between" alignItems="center">
-                <Text fontSize="$4" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="500">
                   {t("Search Columns")}
                 </Text>
-                <Text fontSize="$2" color="$color10">
-                  {/* Bidi-isolated so RTL contexts can't reorder the count run */}
+                <Text {...knobProps.label} color={formCommonColors.muted}>
                   {bidiIsolate(
                     t("{{selected}} of {{total}}", {
                       selected: selectedColumnCount,
@@ -282,25 +325,24 @@ function SearchOptionsPopover({
                 </Text>
               </XStack>
 
-              <XStack gap="$2">
-                <Button size="$2" variant="outlined" onPress={handleSelectAllColumns}>
+              <XStack {...knobProps.gap}>
+                <Button size="$2" compact variant="outlined" onPress={handleSelectAllColumns}>
                   {t("All")}
                 </Button>
-                <Button size="$2" variant="outlined" onPress={handleSelectNoColumns}>
+                <Button size="$2" compact variant="outlined" onPress={handleSelectNoColumns}>
                   {t("None")}
                 </Button>
               </XStack>
 
-              {/* One scroll region for the whole panel body (above); a nested
-                column scroller would trap wheel/drag inside 200px. */}
               <YStack gap="$1">
                 {columns.map((col) => {
                   const key = col.accessorKey || col.id || "";
                   return (
                     <Checkbox
                       key={key}
+                      compact
                       label={col.header || key}
-                      checked={columnVisibility[key] || false}
+                      checked={searchOptions.columns.includes(key)}
                       onCheckedChange={(checked) => handleColumnToggle(key, checked as boolean)}
                     />
                   );
@@ -314,46 +356,53 @@ function SearchOptionsPopover({
   );
 }
 
-// Search Utilities
-
-function performSearch<T>(data: T[], options: SearchOptions): T[] {
-  const { searchTerm, columns, caseSensitive, wholeWord, regex } = options;
+interface CompiledPattern {
+  regex: RegExp | null;
+  invalid: boolean;
+}
 
+function compileSearchPattern(
+  options: Pick<SearchOptions, "searchTerm" | "caseSensitive" | "wholeWord" | "regex">,
+): CompiledPattern {
+  const { searchTerm, caseSensitive, wholeWord, regex } = options;
   if (!searchTerm.trim()) {
-    return data;
+    return { regex: null, invalid: false };
   }
 
-  let searchPattern: RegExp;
-
+  const flags = caseSensitive ? "" : "i";
   try {
     if (regex) {
-      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
-    } else {
-      const pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
-      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
+      return { regex: new RegExp(searchTerm, flags), invalid: false };
     }
+    const pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
+    return { regex: new RegExp(pattern, flags), invalid: false };
   } catch {
-    // Invalid regex, return empty results
-    return [];
+    return { regex: null, invalid: true };
   }
+}
 
-  return data.filter((item) => {
-    return columns.some((columnKey) => {
-      const value = (item as any)[columnKey];
+function matchRows<T>(data: T[], columns: string[], searchPattern: RegExp): T[] {
+  return data.filter((item) =>
+    columns.some((columnKey) => {
+      const value = (item as Record<string, unknown>)[columnKey];
       if (value == null) return false;
+      searchPattern.lastIndex = 0;
+      return searchPattern.test(String(value));
+    }),
+  );
+}
 
-      const stringValue = String(value);
-      return searchPattern.test(stringValue);
-    });
-  });
+function performSearch<T>(data: T[], options: SearchOptions): T[] {
+  const 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: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-// Text Highlighting Utility
-
 export interface HighlightOptions {
   searchTerm: string;
   caseSensitive?: boolean;
@@ -370,64 +419,46 @@ function highlightText(text: string, options: HighlightOptions): React.ReactNode
     wholeWord = false,
     regex = false,
     highlightClassName = "search-highlight",
-    highlightStyle: _highlightStyle = {
-      backgroundColor: "var(--color-yellow3)",
-      padding: "2px 4px",
-      borderRadius: "3px",
-      fontWeight: "bold",
-    },
   } = options;
 
   if (!searchTerm.trim() || !text) {
     return text;
   }
 
-  let searchPattern: RegExp;
-
-  try {
-    if (regex) {
-      searchPattern = new RegExp(searchTerm, caseSensitive ? "g" : "gi");
-    } else {
-      const pattern = wholeWord ? `\\b${escapeRegex(searchTerm)}\\b` : escapeRegex(searchTerm);
-      searchPattern = new RegExp(pattern, caseSensitive ? "g" : "gi");
-    }
-  } catch {
-    return text;
-  }
-
-  const parts = text.split(searchPattern);
-
-  if (parts.length === 1) {
-    return text;
-  }
-
-  const matches = text.match(searchPattern) || [];
-  const result: React.ReactNode[] = [];
-
-  parts.forEach((part, index) => {
-    result.push(part);
-
-    if (index < parts.length - 1 && matches[index]) {
-      result.push(
-        <Text
-          key={`highlight-${index}`}
-          className={highlightClassName}
-          backgroundColor="$yellow3"
-          paddingHorizontal="$1"
-          borderRadius="$1"
-          fontWeight="bold"
-        >
-          {matches[index]}
-        </Text>,
-      );
-    }
+  const compiled = compileSearchPattern({
+    searchTerm,
+    caseSensitive,
+    wholeWord,
+    regex,
   });
-
-  return result;
+  if (!compiled.regex) return text;
+
+  const global = new RegExp(compiled.regex.source, compiled.regex.flags.includes("i") ? "gi" : "g");
+  const parts: React.ReactNode[] = [];
+  let last = 0;
+  let index = 0;
+  for (const match of text.matchAll(global)) {
+    const start = match.index ?? 0;
+    if (start > last) parts.push(text.slice(last, start));
+    parts.push(
+      <Text
+        key={`highlight-${index}`}
+        className={highlightClassName}
+        backgroundColor="$yellow3"
+        paddingHorizontal="$1"
+        borderRadius="$1"
+        fontWeight="bold"
+      >
+        {match[0]}
+      </Text>,
+    );
+    last = start + match[0].length;
+    index += 1;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts.length ? parts : text;
 }
 
-// Hook for Full-Text Search
-
 export interface UseFullTextSearchOptions<T = any> {
   data: T[];
   columns: Array<{
@@ -468,7 +499,6 @@ export function useFullTextSearch<T = any>({
     highlightResults: true,
   });
 
-  // Debounce search term
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedSearchTerm(searchTerm);
@@ -477,7 +507,6 @@ export function useFullTextSearch<T = any>({
     return () => clearTimeout(timer);
   }, [searchTerm, debounceMs]);
 
-  // Perform search
   const searchResults = useMemo(() => {
     if (!debouncedSearchTerm.trim()) {
       return data;