@dimaan/ui 0.0.18 → 0.0.19

package/dist/index.cjs

@@ -2192,11 +2192,15 @@ function useTableState(props) {
   };
 }
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
+function defaultGetRowId(row, index) {
+  const rowId = row.id;
+  return rowId === void 0 || rowId === null ? String(index) : String(rowId);
+}
 function Table(props) {
   const {
     data,
     columns,
-    getRowId,
+    getRowId = defaultGetRowId,
     enableRowSelection = false,
     isRowSelectable,
     bulkActions,
@@ -2521,7 +2525,11 @@ function ListPage({
   isLoading = false,
   loadingRowCount,
   searchKeys,
+  searchValue: searchValueProp,
+  onSearchChange,
   filters,
+  filterValues: filterValuesProp,
+  onFilterChange,
   enableRowSelection,
   bulkActions,
   pagination,
@@ -2542,14 +2550,30 @@ function ListPage({
     }
     return init;
   }, [filters]);
-  const [search, setSearch] = react.useState("");
-  const [filterValues, setFilterValues] = react.useState(initialFilterValues);
+  const isSearchControlled = searchValueProp !== void 0;
+  const isFiltersControlled = filterValuesProp !== void 0;
+  const [internalSearch, setInternalSearch] = react.useState("");
+  const [internalFilterValues, setInternalFilterValues] = react.useState(initialFilterValues);
+  const search = isSearchControlled ? searchValueProp : internalSearch;
+  const filterValues = isFiltersControlled ? filterValuesProp : internalFilterValues;
+  const setSearch = (next) => {
+    if (!isSearchControlled) setInternalSearch(next);
+    onSearchChange?.(next);
+  };
   const setFilter = (key, value) => {
-    setFilterValues((prev) => ({ ...prev, [key]: value }));
+    if (!isFiltersControlled) {
+      setInternalFilterValues((prev) => ({ ...prev, [key]: value }));
+    }
+    onFilterChange?.(key, value);
   };
   const reset = () => {
-    setSearch("");
-    setFilterValues(initialFilterValues);
+    if (!isSearchControlled) setInternalSearch("");
+    onSearchChange?.("");
+    if (!isFiltersControlled) setInternalFilterValues(initialFilterValues);
+    for (const f of filters ?? []) {
+      const def = f.defaultValue ?? f.options[0]?.value ?? "";
+      onFilterChange?.(f.key, def);
+    }
   };
   const hasActiveFilters = react.useMemo(() => {
     if (search.trim() !== "") return true;
@@ -2562,7 +2586,7 @@ function ListPage({
   }, [search, filters, filterValues]);
   const filtered = react.useMemo(() => {
     return data.filter((row) => {
-      if (search.trim() && searchKeys && searchKeys.length > 0) {
+      if (!isSearchControlled && search.trim() && searchKeys && searchKeys.length > 0) {
         const q = search.trim().toLowerCase();
         const matches = searchKeys.some((key) => {
           const val = row[key];
@@ -2570,16 +2594,18 @@ function ListPage({
         });
         if (!matches) return false;
       }
-      for (const f of filters ?? []) {
-        const value = filterValues[f.key];
-        const def = f.defaultValue ?? f.options[0]?.value ?? "";
-        if (value !== void 0 && value !== def) {
-          if (f.accessor(row) !== value) return false;
+      if (!isFiltersControlled) {
+        for (const f of filters ?? []) {
+          const value = filterValues[f.key];
+          const def = f.defaultValue ?? f.options[0]?.value ?? "";
+          if (value !== void 0 && value !== def) {
+            if (f.accessor(row) !== value) return false;
+          }
         }
       }
       return true;
     });
-  }, [data, search, searchKeys, filters, filterValues]);
+  }, [data, search, searchKeys, filters, filterValues, isSearchControlled, isFiltersControlled]);
   const showFilterBar = Boolean(searchKeys?.length) || Boolean(filters?.length);
   const tableMode = isLoading ? "loading" : data.length === 0 && !hasActiveFilters ? "no-data" : filtered.length === 0 ? "no-results" : "rows";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [