@stella-source/stellasource-dsl 5.2.0 → 5.3.0

package/README.md

@@ -48,6 +48,19 @@ To get started with the **Stella Source Design System**, visit our [documentatio
 
 ---
 
+# NPM Commands
+
+| Command | Description |
+|---|---|
+| `npm run start` | Start Storybook dev server on port 6006 |
+| `npm run build` | Build Storybook for production |
+| `npm run package` | Build the component library with Rollup |
+| `npm test` | Run tests in watch mode (Vitest) |
+| `npm run test:coverage` | Run tests with coverage report |
+| `npm run ngrok` | Expose local Storybook via ngrok (port 6006) |
+
+---
+
 # Contributing to the DSL
 
 Contributing Guide: https://dev.azure.com/stellasource/Stella%20Source/_wiki/wikis/SecturaSoft.wiki/543/Contributing-To-The-DSL

package/dist/cjs/index.js

@@ -21861,14 +21861,15 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
     a$n.useEffect(() => {
         latestSizing.current = state.columnSizing;
     }, [state.columnSizing]);
-    // Persist visibility and sorting immediately
+    // Persist visibility, sorting, and filters immediately
     a$n.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
     a$n.useEffect(() => {
         if (debounceTimer.current)
@@ -21878,6 +21879,7 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
                 columnVisibility: state.columnVisibility,
                 columnSizing: latestSizing.current,
                 sorting: state.sorting,
+                columnFilters: state.columnFilters,
             });
         }, sizingDebounceMs);
         return () => {
@@ -22541,7 +22543,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()))
+            : [];
     a$n.useEffect(() => {
         setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
@@ -22677,7 +22681,6 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [localColumns, setLocalColumns] = a$n.useState(columns);
     const [totalData, setTotalData] = a$n.useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = a$n.useState(() => loadTableState(id).sorting ?? []);
-    const [filters, setFilters] = a$n.useState({});
     const [rowState, setRowState] = a$n.useState({});
     const [columnVisibility, setColumnVisibility] = a$n.useState(() => {
         const persisted = loadTableState(id);
@@ -22691,7 +22694,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         ]));
     });
     const [columnFilters, setColumnFilters] = a$n.useState(() => {
-        const base = defaultFilters ?? [];
+        const persisted = loadTableState(id);
+        const base = persisted.columnFilters ?? defaultFilters ?? [];
         if (!staticFilters?.length)
             return base;
         const merged = [...base];
@@ -22710,6 +22714,11 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         return merged;
     });
+    const filters = a$n.useMemo(() => {
+        const map = {};
+        columnFilters.forEach((f) => (map[f.id] = f.value));
+        return map;
+    }, [columnFilters]);
     const [columnPinning, setColumnPinning] = a$n.useState({ left: ["select"], right: ["options"] });
     const scrollRef = a$n.useRef(null);
     const visibilityButtonRef = a$n.useRef(null);
@@ -22746,7 +22755,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,
+    ]);
     a$n.useEffect(() => {
         if (!showVisibilityMenu)
             return;
@@ -22826,7 +22841,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         !table.getIsAllPageRowsSelected();
                     return (a$n.createElement(IndeterminateCheckbox, { isIndeterminate: isIndeterminate, isChecked: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler() }));
                 },
-                cell: ({ row }) => (a$n.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() })),
+                cell: ({ row }) => (a$n.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation() })),
                 size: 20,
             });
         }
@@ -22912,9 +22927,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: {
@@ -22925,7 +22937,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             },
         },
     });
-    usePersistTableState(id, { columnVisibility, sorting });
+    usePersistTableState(id, { columnVisibility, sorting, columnFilters });
     a$n.useEffect(() => {
         if (onRowSelect) {
             const selectedData = table
@@ -22934,6 +22946,12 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             onRowSelect?.(selectedData);
         }
     }, [rowSelection]);
+    const initialColumnFilters = a$n.useRef(columnFilters);
+    a$n.useEffect(() => {
+        if (initialColumnFilters.current.length > 0) {
+            onFilterChange?.(initialColumnFilters.current);
+        }
+    }, []);
     const isMounted = a$n.useRef(false);
     a$n.useEffect(() => {
         if (!isMounted.current) {
@@ -22943,8 +22961,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({
@@ -22953,6 +22972,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$n.createElement(a$n.Fragment, null,
         !isLoading && (a$n.createElement(ActionBar, null,
             a$n.createElement(GlobalActionWrapper, null, globalActions?.(table)),
@@ -23017,7 +23038,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a$n.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a$n.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
+                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getCoreRowModel().rows.length === 0 &&
+                        !hasActiveFilters }, headerGroup.headers.map((header, i) => {
                     return (a$n.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -23032,14 +23054,21 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         } }));
                 }))))),
                 a$n.createElement("tbody", null,
-                    table.getRowModel().rows.length === 0 && (a$n.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$n.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$n.createElement(a$n.Fragment, { key: row.id },
                         a$n.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],