ikoncomponents 1.7.2 → 1.7.3

package/dist/ikoncomponents/table/index.js

@@ -10,7 +10,7 @@ import { DataTablePageSize } from "./DataTablePageSize";
 import { Button } from "../../shadcn/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
 export function DataTableLayout({ data, columns, extraTools, }) {
-    const { keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, themeColor, onLoadMore, hasMore, onFilterChange, } = extraTools !== null && extraTools !== void 0 ? extraTools : {};
+    const { keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, themeColor, onLoadMore, hasMore, onFilterChange, unfilteredData, } = extraTools !== null && extraTools !== void 0 ? extraTools : {};
     const [viewMode, setViewMode] = useState("list");
     const observerTarget = useRef(null);
     useEffect(() => {
@@ -38,20 +38,19 @@ export function DataTableLayout({ data, columns, extraTools, }) {
         setVisibleColumns(prev => prev.includes(header) ? prev.filter(h => h !== header) : [...prev, header]);
     };
     const handleToggleFilterValue = (column, value) => {
-        setTableFilters(prev => {
-            const currentValues = prev[column] || [];
-            const nextValues = currentValues.includes(value)
-                ? currentValues.filter(v => v !== value)
-                : [...currentValues, value];
-            const next = Object.assign({}, prev);
-            if (nextValues.length === 0) {
-                delete next[column];
-            }
-            else {
-                next[column] = nextValues;
-            }
-            return next;
-        });
+        const currentValues = tableFilters[column] || [];
+        const nextValues = currentValues.includes(value)
+            ? currentValues.filter(v => v !== value)
+            : [...currentValues, value];
+        const nextFilters = Object.assign({}, tableFilters);
+        if (nextValues.length === 0) {
+            delete nextFilters[column];
+        }
+        else {
+            nextFilters[column] = nextValues;
+        }
+        setTableFilters(nextFilters);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
     };
     const removeActiveFilterColumn = (column) => {
         const nextActiveColumns = activeFilterColumns.filter(c => c !== column);
@@ -68,7 +67,8 @@ export function DataTableLayout({ data, columns, extraTools, }) {
         const col = columns.find(c => c.header === header);
         if (!col || !col.accessorKey)
             return [];
-        const values = data.map(row => String(row[col.accessorKey] || ""));
+        const sourceData = unfilteredData || data;
+        const values = sourceData.map(row => String(row[col.accessorKey] || ""));
         return Array.from(new Set(values)).filter(Boolean).sort();
     };
     const handleToggleGroup = (columnHeader) => {
@@ -149,7 +149,12 @@ export function DataTableLayout({ data, columns, extraTools, }) {
                                             }, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setColumnSearchQueries(prev => (Object.assign(Object.assign({}, prev), { [colHeader]: e.target.value }))), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map(val => {
                                                 const isSelected = (tableFilters[colHeader] || []).includes(val);
                                                 return (_jsxs("button", { onClick: () => handleToggleFilterValue(colHeader, val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: val })] }, val));
-                                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), (tableFilters[colHeader] || []).length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => setTableFilters(prev => { const next = Object.assign({}, prev); delete next[colHeader]; return next; }), children: "Clear Selections" }) }))] })] }, colHeader));
+                                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), (tableFilters[colHeader] || []).length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => {
+                                                const nextFilters = Object.assign({}, tableFilters);
+                                                delete nextFilters[colHeader];
+                                                setTableFilters(nextFilters);
+                                                onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
+                                            }, children: "Clear Selections" }) }))] })] }, colHeader));
                 }) })), _jsxs("div", { className: "w-full flex items-center gap-2 p-2 border border-dashed border-border rounded-lg bg-muted/20 min-h-[48px] transition-all hover:bg-muted/40 group shadow-sm", onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
                     e.preventDefault();
                     const columnHeader = e.dataTransfer.getData("columnHeader");

package/dist/ikoncomponents/table/type.d.ts

@@ -30,4 +30,5 @@ export type ExtraPrams<T> = {
     onLoadMore?: () => void;
     hasMore?: boolean;
     onFilterChange?: (filters: Record<string, string[]>) => void;
+    unfilteredData?: T[];
 };