@multiplatform.one/table 6.0.4 → 6.3.0

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

@@ -23,17 +23,18 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var DataTableSearch_exports = {};
 __export(DataTableSearch_exports, {
   DataTableSearch: () => DataTableSearch,
-  highlightText: () => highlightText,
-  performSearch: () => performSearch,
   useFullTextSearch: () => useFullTextSearch
 });
 module.exports = __toCommonJS(DataTableSearch_exports);
 var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
+var import_components = require("@multiplatform.one/components");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_t = require("../../shared/t.cjs");
+var import_withInterp = require("../../utils/withInterp.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableSearch(props) {
   const ctx = (0, import_DataTableStateContext.useDataTableState)();
@@ -41,7 +42,7 @@ function DataTableSearch(props) {
   const columns = props.columns ?? [];
   const {
     onSearchResults,
-    placeholder = "Search across all columns...",
+    placeholder = (0, import_t.t)("Search across all columns..."),
     debounceMs = 300,
     showAdvancedOptions = true,
     defaultSearchColumns,
@@ -62,12 +63,6 @@ function DataTableSearch(props) {
     regex: false,
     highlightResults: true
   });
-  (0, import_react2.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
-    }, debounceMs);
-    return () => clearTimeout(timer);
-  }, [searchTerm, debounceMs]);
   (0, import_react2.useEffect)(() => {
     if (debouncedSearchTerm.trim()) {
       const results = performSearch(data, {
@@ -85,13 +80,6 @@ function DataTableSearch(props) {
       });
     }
   }, [debouncedSearchTerm, data, searchOptions, onSearchResults]);
-  const handleSearchChange = value => {
-    setSearchTerm(value);
-  };
-  const handleClearSearch = () => {
-    setSearchTerm("");
-    setDebouncedSearchTerm("");
-  };
   const handleOptionsChange = newOptions => {
     setSearchOptions(prev => ({
       ...prev,
@@ -108,30 +96,13 @@ function DataTableSearch(props) {
     maxWidth: searchMaxWidth,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
         value: searchTerm,
-        onChangeText: handleSearchChange,
+        onChange: setSearchTerm,
+        onSearch: setDebouncedSearchTerm,
+        debounceMs,
         placeholder,
-        disabled,
-        leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
-          size: 16
-        }),
-        rightIcon: searchTerm ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          padding: "$1",
-          borderRadius: "$2",
-          cursor: "pointer",
-          hoverStyle: {
-            backgroundColor: "$color4"
-          },
-          pressStyle: {
-            backgroundColor: "$color5"
-          },
-          onPress: handleClearSearch,
-          "aria-label": "Clear search",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-            size: 14
-          })
-        }) : void 0
+        disabled
       })
     }), showAdvancedOptions && /* @__PURE__ */(0, import_jsx_runtime.jsx)(SearchOptionsPopover, {
       searchOptions,
@@ -140,17 +111,19 @@ function DataTableSearch(props) {
       selectedColumnCount,
       totalColumnCount,
       disabled
-    }), debouncedSearchTerm && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    }), debouncedSearchTerm ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingHorizontal: "$2",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$2",
         color: "$color10",
-        children: [performSearch(data, {
-          ...searchOptions,
-          searchTerm: debouncedSearchTerm
-        }).length, " ", "results"]
+        children: (0, import_t.t)("{{count}} results", {
+          count: performSearch(data, {
+            ...searchOptions,
+            searchTerm: debouncedSearchTerm
+          }).length
+        })
       })
-    })]
+    }) : null]
   });
 }
 function SearchOptionsPopover({
@@ -196,119 +169,123 @@ function SearchOptionsPopover({
       columns: []
     });
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    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": "Search options",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-          size: 16
+  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_tamagui.Popover.Content, {
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      enterStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      exitStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      minWidth: 280,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.panelPadding,
-        ...knobProps.gapLg,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$5",
-          fontWeight: "600",
-          children: "Search Options"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Search Settings"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-            label: "Case sensitive",
-            checked: searchOptions.caseSensitive,
-            onCheckedChange: checked => onOptionsChange({
-              caseSensitive: checked
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-            label: "Whole word only",
-            checked: searchOptions.wholeWord,
-            onCheckedChange: checked => onOptionsChange({
-              wholeWord: checked
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-            label: "Use regex",
-            checked: searchOptions.regex,
-            onCheckedChange: checked => onOptionsChange({
-              regex: checked
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
-            label: "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",
+      }), /* @__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, {
-              fontSize: "$4",
-              fontWeight: "500",
-              children: "Search Columns"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              fontSize: "$2",
-              color: "$color10",
-              children: [selectedColumnCount, " of ", totalColumnCount]
+              fontSize: "$5",
+              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: "$4",
+                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
+                })
+              })]
+            }), /* @__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",
+                  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);
+                })
+              })]
             })]
-          }), /* @__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: "All"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              size: "$2",
-              variant: "outlined",
-              onPress: handleSelectNoColumns,
-              children: "None"
-            })]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-            maxHeight: 200,
-            children: /* @__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);
-              })
-            })
-          })]
-        })]
-      })
-    })]
-  });
+          })
+        })
+      })]
+    })
+  );
 }
 function performSearch(data, options) {
   const {