@dimaan/ui 0.0.18 → 0.0.19

package/dist/index.d.cts

@@ -1468,8 +1468,16 @@ interface TableProps<T> {
     data: readonly T[];
     /** Column definitions. */
     columns: ReadonlyArray<Column<T>>;
-    /** Stable id for each row. Required for selection; recommended always. */
-    getRowId: (row: T, index: number) => string;
+    /**
+     * Stable id for each row. Required for selection; recommended always.
+     *
+     * **Optional with a default**: when omitted, Table reads `row.id` (most
+     * APIs use it) and falls back to the row index. Provide this explicitly
+     * for records that use a different identifier (`_id`, `uuid`) or any
+     * time the list can reorder — index-based ids break selection across
+     * reorders.
+     */
+    getRowId?: (row: T, index: number) => string;
     /**
      * Total row count across all pages. Pass this when the parent paginates/sorts
      * server-side — Table will skip its local sort + slice.
@@ -1576,14 +1584,40 @@ interface ListPageProps<T> {
     actions?: ReactNode;
     data: T[];
     columns: Column<T>[];
-    getRowId: (row: T) => string;
+    /**
+     * Stable id for each row. Required for row selection across re-renders and
+     * for stable React keys.
+     *
+     * Defaults to reading `row.id` when present, falling back to the row index.
+     * Provide this explicitly when your records use a different identifier
+     * (e.g. `_id`, `uuid`, a composite key) — index-based ids break selection
+     * when the data list reorders.
+     */
+    getRowId?: (row: T) => string;
     /** Show skeleton rows in the table area while data is fetching. */
     isLoading?: boolean;
     /** Number of skeleton rows rendered while loading. Defaults to the table page size. */
     loadingRowCount?: number;
     /** Keys on `T` to search. Search input only renders when this is provided. */
     searchKeys?: Array<keyof T>;
+    /**
+     * Controlled search input value. Pair with `onSearchChange` to drive the
+     * search from outside (typical for server-side filtering). When both are
+     * provided, ListPage **stops filtering `data` locally** for search —
+     * `data` is trusted to already match the query.
+     */
+    searchValue?: string;
+    /** Fires on every search input change. Pair with `searchValue` for controlled mode. */
+    onSearchChange?: (value: string) => void;
     filters?: ListPageFilter<T>[];
+    /**
+     * Controlled filter values keyed by `filter.key`. When provided alongside
+     * `onFilterChange`, ListPage **stops filtering `data` locally** — `data`
+     * is trusted to already match the active filter selections.
+     */
+    filterValues?: Record<string, string>;
+    /** Fires when any filter Select changes. Pair with `filterValues` for controlled mode. */
+    onFilterChange?: (key: string, value: string) => void;
     enableRowSelection?: boolean;
     bulkActions?: (selected: T[]) => ReactNode;
     /**
@@ -1686,7 +1720,7 @@ interface ListPageProps<T> {
  * />
  * ```
  */
-declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, filters, enableRowSelection, bulkActions, pagination, defaultPagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
+declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, searchValue: searchValueProp, onSearchChange, filters, filterValues: filterValuesProp, onFilterChange, enableRowSelection, bulkActions, pagination, defaultPagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
 
 type RadioGroupSize = 'sm' | 'md' | 'lg';
 /** Outer circle (radio button itself) — sized + bordered. */

package/dist/index.d.ts

@@ -1468,8 +1468,16 @@ interface TableProps<T> {
     data: readonly T[];
     /** Column definitions. */
     columns: ReadonlyArray<Column<T>>;
-    /** Stable id for each row. Required for selection; recommended always. */
-    getRowId: (row: T, index: number) => string;
+    /**
+     * Stable id for each row. Required for selection; recommended always.
+     *
+     * **Optional with a default**: when omitted, Table reads `row.id` (most
+     * APIs use it) and falls back to the row index. Provide this explicitly
+     * for records that use a different identifier (`_id`, `uuid`) or any
+     * time the list can reorder — index-based ids break selection across
+     * reorders.
+     */
+    getRowId?: (row: T, index: number) => string;
     /**
      * Total row count across all pages. Pass this when the parent paginates/sorts
      * server-side — Table will skip its local sort + slice.
@@ -1576,14 +1584,40 @@ interface ListPageProps<T> {
     actions?: ReactNode;
     data: T[];
     columns: Column<T>[];
-    getRowId: (row: T) => string;
+    /**
+     * Stable id for each row. Required for row selection across re-renders and
+     * for stable React keys.
+     *
+     * Defaults to reading `row.id` when present, falling back to the row index.
+     * Provide this explicitly when your records use a different identifier
+     * (e.g. `_id`, `uuid`, a composite key) — index-based ids break selection
+     * when the data list reorders.
+     */
+    getRowId?: (row: T) => string;
     /** Show skeleton rows in the table area while data is fetching. */
     isLoading?: boolean;
     /** Number of skeleton rows rendered while loading. Defaults to the table page size. */
     loadingRowCount?: number;
     /** Keys on `T` to search. Search input only renders when this is provided. */
     searchKeys?: Array<keyof T>;
+    /**
+     * Controlled search input value. Pair with `onSearchChange` to drive the
+     * search from outside (typical for server-side filtering). When both are
+     * provided, ListPage **stops filtering `data` locally** for search —
+     * `data` is trusted to already match the query.
+     */
+    searchValue?: string;
+    /** Fires on every search input change. Pair with `searchValue` for controlled mode. */
+    onSearchChange?: (value: string) => void;
     filters?: ListPageFilter<T>[];
+    /**
+     * Controlled filter values keyed by `filter.key`. When provided alongside
+     * `onFilterChange`, ListPage **stops filtering `data` locally** — `data`
+     * is trusted to already match the active filter selections.
+     */
+    filterValues?: Record<string, string>;
+    /** Fires when any filter Select changes. Pair with `filterValues` for controlled mode. */
+    onFilterChange?: (key: string, value: string) => void;
     enableRowSelection?: boolean;
     bulkActions?: (selected: T[]) => ReactNode;
     /**
@@ -1686,7 +1720,7 @@ interface ListPageProps<T> {
  * />
  * ```
  */
-declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, filters, enableRowSelection, bulkActions, pagination, defaultPagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
+declare function ListPage<T>({ title, description, bordered, actions, data, columns, getRowId, isLoading, loadingRowCount, searchKeys, searchValue: searchValueProp, onSearchChange, filters, filterValues: filterValuesProp, onFilterChange, enableRowSelection, bulkActions, pagination, defaultPagination, onPaginationChange, totalCount, pageSizeOptions, emptyState, noDataState, labels: labelsProp, className, }: ListPageProps<T>): react_jsx_runtime.JSX.Element;
 
 type RadioGroupSize = 'sm' | 'md' | 'lg';
 /** Outer circle (radio button itself) — sized + bordered. */

package/dist/index.js

@@ -2164,11 +2164,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,
@@ -2493,7 +2497,11 @@ function ListPage({
   isLoading = false,
   loadingRowCount,
   searchKeys,
+  searchValue: searchValueProp,
+  onSearchChange,
   filters,
+  filterValues: filterValuesProp,
+  onFilterChange,
   enableRowSelection,
   bulkActions,
   pagination,
@@ -2514,14 +2522,30 @@ function ListPage({
     }
     return init;
   }, [filters]);
-  const [search, setSearch] = useState("");
-  const [filterValues, setFilterValues] = useState(initialFilterValues);
+  const isSearchControlled = searchValueProp !== void 0;
+  const isFiltersControlled = filterValuesProp !== void 0;
+  const [internalSearch, setInternalSearch] = useState("");
+  const [internalFilterValues, setInternalFilterValues] = 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 = useMemo(() => {
     if (search.trim() !== "") return true;
@@ -2534,7 +2558,7 @@ function ListPage({
   }, [search, filters, filterValues]);
   const filtered = 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];
@@ -2542,16 +2566,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__ */ jsxs("div", { "data-slot": "list-page", className: cn("space-y-6", className), children: [