@stella-source/stellasource-dsl 5.2.0 → 5.3.0

package/dist/cjs/types/components/Table/types.d.ts

@@ -44,7 +44,6 @@ export interface TableProps<T> {
     emptyTableState?: {
         header: string;
         subHeader?: string;
-        showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
     defaultFilters?: {

package/dist/cjs/types/components/Table/useTableState.d.ts

@@ -1,8 +1,9 @@
-import { ColumnSizingState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { ColumnFiltersState, ColumnSizingState, SortingState, VisibilityState } from "@tanstack/react-table";
 type PersistedTableState = {
     columnVisibility: VisibilityState;
     columnSizing: ColumnSizingState;
     sorting: SortingState;
+    columnFilters: ColumnFiltersState;
 };
 export declare function loadTableState(tableId: string): Partial<PersistedTableState>;
 export declare function usePersistTableState(tableId: string, state: Partial<PersistedTableState>, sizingDebounceMs?: number): void;

package/dist/esm/index.esm.js

@@ -21841,14 +21841,15 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
     useEffect(() => {
         latestSizing.current = state.columnSizing;
     }, [state.columnSizing]);
-    // Persist visibility and sorting immediately
+    // Persist visibility, sorting, and filters immediately
     useEffect(() => {
         saveTableState(tableId, {
             columnVisibility: state.columnVisibility,
             columnSizing: latestSizing.current,
             sorting: state.sorting,
+            columnFilters: state.columnFilters,
         });
-    }, [tableId, state.columnVisibility, state.sorting]);
+    }, [tableId, state.columnVisibility, state.sorting, state.columnFilters]);
     // Persist sizing debounced
     useEffect(() => {
         if (debounceTimer.current)
@@ -21858,6 +21859,7 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
                 columnVisibility: state.columnVisibility,
                 columnSizing: latestSizing.current,
                 sorting: state.sorting,
+                columnFilters: state.columnFilters,
             });
         }, sizingDebounceMs);
         return () => {
@@ -22521,7 +22523,9 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     }, 300);
     const displayOptions = serverSide
         ? filterOptions
-        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
+        : header.column.getCanFilter()
+            ? normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()))
+            : [];
     useEffect(() => {
         setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
@@ -22657,7 +22661,6 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [localColumns, setLocalColumns] = useState(columns);
     const [totalData, setTotalData] = useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = useState(() => loadTableState(id).sorting ?? []);
-    const [filters, setFilters] = useState({});
     const [rowState, setRowState] = useState({});
     const [columnVisibility, setColumnVisibility] = useState(() => {
         const persisted = loadTableState(id);
@@ -22671,7 +22674,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         ]));
     });
     const [columnFilters, setColumnFilters] = useState(() => {
-        const base = defaultFilters ?? [];
+        const persisted = loadTableState(id);
+        const base = persisted.columnFilters ?? defaultFilters ?? [];
         if (!staticFilters?.length)
             return base;
         const merged = [...base];
@@ -22690,6 +22694,11 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         return merged;
     });
+    const filters = useMemo$1(() => {
+        const map = {};
+        columnFilters.forEach((f) => (map[f.id] = f.value));
+        return map;
+    }, [columnFilters]);
     const [columnPinning, setColumnPinning] = useState({ left: ["select"], right: ["options"] });
     const scrollRef = useRef(null);
     const visibilityButtonRef = useRef(null);
@@ -22726,7 +22735,13 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         setLocalData(data);
         if (paginationDetails && paginationDetails.startingPage !== pageIndex)
             setPageIndex(paginationDetails?.startingPage);
-    }, [paginationDetails, data, columns]);
+    }, [
+        paginationDetails?.totalRows,
+        paginationDetails?.startingPage,
+        paginationDetails?.rowsPerPage,
+        data,
+        columns,
+    ]);
     useEffect(() => {
         if (!showVisibilityMenu)
             return;
@@ -22806,7 +22821,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         !table.getIsAllPageRowsSelected();
                     return (a__default.createElement(IndeterminateCheckbox, { isIndeterminate: isIndeterminate, isChecked: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler() }));
                 },
-                cell: ({ row }) => (a__default.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() })),
+                cell: ({ row }) => (a__default.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation() })),
                 size: 20,
             });
         }
@@ -22892,9 +22907,6 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 });
             }
             setColumnFilters(next);
-            const map = {};
-            next.forEach((f) => (map[f.id] = f.value));
-            setFilters(map);
             onFilterChange?.(next);
         },
         filterFns: {
@@ -22905,7 +22917,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             },
         },
     });
-    usePersistTableState(id, { columnVisibility, sorting });
+    usePersistTableState(id, { columnVisibility, sorting, columnFilters });
     useEffect(() => {
         if (onRowSelect) {
             const selectedData = table
@@ -22914,6 +22926,12 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             onRowSelect?.(selectedData);
         }
     }, [rowSelection]);
+    const initialColumnFilters = useRef(columnFilters);
+    useEffect(() => {
+        if (initialColumnFilters.current.length > 0) {
+            onFilterChange?.(initialColumnFilters.current);
+        }
+    }, []);
     const isMounted = useRef(false);
     useEffect(() => {
         if (!isMounted.current) {
@@ -22923,8 +22941,9 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         resetTable();
     }, [resetTrigger]);
     const resetTable = () => {
-        setColumnFilters(staticFilters ?? []);
-        setFilters({});
+        const resetFilters = staticFilters ?? [];
+        setColumnFilters(resetFilters);
+        onFilterChange?.(resetFilters);
         setSorting([]);
         setPageIndex(1);
         setPagination({
@@ -22933,6 +22952,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         table.toggleAllRowsSelected(false);
     };
+    const hasActiveFilters = Object.keys(filters).length > (staticFilters?.length ?? 0) &&
+        Object.values(filters).some((v) => v?.length);
     return (a__default.createElement(a__default.Fragment, null,
         !isLoading && (a__default.createElement(ActionBar, null,
             a__default.createElement(GlobalActionWrapper, null, globalActions?.(table)),
@@ -22997,7 +23018,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a__default.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a__default.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
+                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getCoreRowModel().rows.length === 0 &&
+                        !hasActiveFilters }, headerGroup.headers.map((header, i) => {
                     return (a__default.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -23012,14 +23034,21 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         } }));
                 }))))),
                 a__default.createElement("tbody", null,
-                    table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                    table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: hasActiveFilters
+                            ? "No results found."
+                            : emptyTableState?.header || "No data available.", subHeader: !hasActiveFilters ? emptyTableState?.subHeader : undefined, showClearFilterButton: hasActiveFilters, onClearFilters: () => {
+                            resetTable();
+                            emptyTableState?.onClearFilters?.();
+                        }, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
                     table.getRowModel().rows.map((row) => (a__default.createElement(a__default.Fragment, { key: row.id },
                         a__default.createElement(CellRow, { onClick: () => {
+                                if (showSelection)
+                                    row.toggleSelected();
                                 if (!showExpandedRowToggle &&
                                     !!renderExpandedRow?.(row))
                                     toggleRowExpanded(row.id);
                                 onRowClick?.(row.original);
-                            }, "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
+                            }, "$isClickable": !!onRowClick || showSelection }, row.getVisibleCells().map((cell) => {
                             const value = flexRender(cell.column.columnDef.cell, {
                                 ...cell.getContext(),
                                 localValue: rowState[row.id]?.[cell.column.id],