@multiplatform.one/table 6.7.0 → 7.0.0

package/dist/cjs/components/DataTableSearch/index.cjs

@@ -36,12 +36,14 @@ var import_DataTableStateContext = require("../DataTable/DataTableStateContext.c
 var import_t = require("../../shared/t.cjs");
 var import_withInterp = require("../../utils/withInterp.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const iconSizeForToken = token => (0, import_theme.sizeRecipeForToken)(token).iconSize;
 function DataTableSearch(props) {
   const ctx = (0, import_DataTableStateContext.useDataTableState)();
   const data = props.data ?? ctx?.computed.filteredData ?? [];
   const columns = props.columns ?? [];
   const {
     onSearchResults,
+    onHighlightText,
     placeholder = (0, import_t.t)("Search across all columns..."),
     debounceMs = 300,
     showAdvancedOptions = true,
@@ -53,6 +55,9 @@ function DataTableSearch(props) {
   } = (0, import_theme.useResolvedKnobs)();
   const sz = knobProps.sizeToken;
   const searchMaxWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const iconPx = iconSizeForToken(String(sz));
+  const resultsId = (0, import_react2.useId)();
+  const rootRef = (0, import_react2.useRef)(null);
   const [searchTerm, setSearchTerm] = (0, import_react2.useState)("");
   const [debouncedSearchTerm, setDebouncedSearchTerm] = (0, import_react2.useState)("");
   const [searchOptions, setSearchOptions] = (0, import_react2.useState)({
@@ -63,23 +68,42 @@ function DataTableSearch(props) {
     regex: false,
     highlightResults: true
   });
+  const compiled = (0, import_react2.useMemo)(() => compileSearchPattern({
+    ...searchOptions,
+    searchTerm: debouncedSearchTerm
+  }), [searchOptions, debouncedSearchTerm]);
+  const results = (0, import_react2.useMemo)(() => {
+    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)(() => {
-    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]);
+  (0, import_react2.useEffect)(() => {
+    if (!onHighlightText) return;
+    if (searchOptions.highlightResults && debouncedSearchTerm.trim() && !compiled.invalid) {
+      onHighlightText(debouncedSearchTerm);
     } else {
-      onSearchResults?.(data, {
-        ...searchOptions,
-        searchTerm: ""
-      });
+      onHighlightText("");
     }
-  }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
+  }, [debouncedSearchTerm, searchOptions.highlightResults, compiled.invalid, onHighlightText]);
+  (0, import_react2.useEffect)(() => {
+    if (!import_tamagui.isWeb || disabled) return;
+    const onKey = e => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return;
+      const target = e.target;
+      if (target?.closest("input, textarea, select, [contenteditable=true]")) return;
+      e.preventDefault();
+      const field = rootRef.current?.querySelector?.("[role='searchbox']");
+      field?.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [disabled]);
   const handleOptionsChange = newOptions => {
     setSearchOptions(prev => ({
       ...prev,
@@ -89,20 +113,36 @@ function DataTableSearch(props) {
   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 /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    gap: "$2",
+    ref: rootRef,
+    ...{
+      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, {
       flex: 1,
+      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,
@@ -110,19 +150,21 @@ function DataTableSearch(props) {
       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]
   });
 }
@@ -132,191 +174,200 @@ function SearchOptionsPopover({
   columns,
   selectedColumnCount,
   totalColumnCount,
-  disabled
+  disabled,
+  iconPx,
+  optionsActive
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const [columnVisibility, setColumnVisibility] = (0, import_react2.useState)(() => {
-    const visibility = {};
-    columns.forEach(col => {
-      const key = col.accessorKey || col.id || "";
-      visibility[key] = searchOptions.columns.includes(key);
-    });
-    return visibility;
-  });
+  const [open, setOpen] = (0, import_react2.useState)(false);
   const handleColumnToggle = (columnKey, checked) => {
-    const newVisibility = {
-      ...columnVisibility,
-      [columnKey]: checked
-    };
-    setColumnVisibility(newVisibility);
-    const selectedColumns = Object.entries(newVisibility).filter(([_, isVisible]) => isVisible).map(([key]) => key);
+    const next = checked ? Array.from(/* @__PURE__ */new Set([...searchOptions.columns, columnKey])) : searchOptions.columns.filter(key => key !== columnKey);
     onOptionsChange({
-      columns: selectedColumns
+      columns: next
     });
   };
   const handleSelectAllColumns = () => {
-    const allColumns = columns.map(col => col.accessorKey || col.id || "");
-    setColumnVisibility(Object.fromEntries(allColumns.map(key => [key, true])));
     onOptionsChange({
-      columns: allColumns
+      columns: columns.map(col => col.accessorKey || col.id || "")
     });
   };
   const handleSelectNoColumns = () => {
-    setColumnVisibility(Object.fromEntries(columns.map(col => [col.accessorKey || col.id || "", false])));
     onOptionsChange({
       columns: []
     });
   };
   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).
-    /* @__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
-          })
-        })
-      }), /* @__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,
+  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")
-            }), /* @__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: checked => 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: checked => 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: checked => 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: checked => 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: checked => onOptionsChange({
-                  caseSensitive: checked
-                })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Whole word only"),
-                checked: searchOptions.wholeWord,
-                onCheckedChange: checked => onOptionsChange({
-                  wholeWord: checked
-                })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Use regex"),
-                checked: searchOptions.regex,
-                onCheckedChange: checked => onOptionsChange({
-                  regex: checked
-                })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                label: (0, import_t.t)("Highlight results"),
-                checked: searchOptions.highlightResults,
-                onCheckedChange: checked => 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, {}), /* @__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: (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")
-                })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
-                children: columns.map(col => {
-                  const key = col.accessorKey || col.id || "";
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-                    label: col.header || key,
-                    checked: columnVisibility[key] || false,
-                    onCheckedChange: checked => 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(col => {
+                const 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: checked => handleColumnToggle(key, checked)
+                }, key);
+              })
             })]
-          })
+          })]
         })
-      })]
-    })
-  );
+      })
+    })]
+  });
 }
-function performSearch(data, options) {
+function compileSearchPattern(options) {
   const {
     searchTerm,
-    columns,
     caseSensitive,
     wholeWord,
     regex
   } = options;
   if (!searchTerm.trim()) {
-    return data;
+    return {
+      regex: null,
+      invalid: false
+    };
   }
-  let searchPattern;
+  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 {
-    return [];
+    return {
+      regex: null,
+      invalid: true
+    };
   }
-  return data.filter(item => {
-    return columns.some(columnKey => {
-      const value = item[columnKey];
-      if (value == null) return false;
-      const stringValue = String(value);
-      return searchPattern.test(stringValue);
-    });
-  });
+}
+function matchRows(data, columns, searchPattern) {
+  return data.filter(item => columns.some(columnKey => {
+    const value = item[columnKey];
+    if (value == null) return false;
+    searchPattern.lastIndex = 0;
+    return searchPattern.test(String(value));
+  }));
+}
+function performSearch(data, options) {
+  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) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -327,48 +378,38 @@ 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;
   }
-  let searchPattern;
-  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 = [];
-  parts.forEach((part, index) => {
-    result.push(part);
-    if (index < parts.length - 1 && matches[index]) {
-      result.push(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        className: highlightClassName,
-        backgroundColor: "$yellow3",
-        paddingHorizontal: "$1",
-        borderRadius: "$1",
-        fontWeight: "bold",
-        children: matches[index]
-      }, `highlight-${index}`));
-    }
+  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 = [];
+  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(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      className: highlightClassName,
+      backgroundColor: "$yellow3",
+      paddingHorizontal: "$1",
+      borderRadius: "$1",
+      fontWeight: "bold",
+      children: match[0]
+    }, `highlight-${index}`));
+    last = start + match[0].length;
+    index += 1;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts.length ? parts : text;
 }
 function useFullTextSearch({
   data,