@stella-source/stellasource-dsl 5.1.1 → 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/cjs/types/components/TextField/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { NumberInputProps } from "./types";
-declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, enableAutocomplete, isDegrees, }: NumberInputProps) => React.JSX.Element;
+declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, enableAutocomplete, isDegrees, labelPosition, }: NumberInputProps) => React.JSX.Element;
 export default NumberInput;

package/dist/cjs/types/components/TextField/NumberInput/types.d.ts

@@ -33,4 +33,5 @@ export interface NumberInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

package/dist/cjs/types/components/TextField/PasswordInput/PasswordInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PasswordInputProps } from "./types";
-declare const PasswordInput: ({ id, className, htmlProps, label, placeholder, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign, isHidden, helperTextAffectLayout, hideLabel, disabled, hasError, ariaDescribedBy, enableAutocomplete, }: PasswordInputProps) => React.JSX.Element;
+declare const PasswordInput: ({ id, className, htmlProps, label, placeholder, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign, isHidden, helperTextAffectLayout, hideLabel, disabled, hasError, ariaDescribedBy, enableAutocomplete, labelPosition, }: PasswordInputProps) => React.JSX.Element;
 export default PasswordInput;

package/dist/cjs/types/components/TextField/PasswordInput/types.d.ts

@@ -24,4 +24,5 @@ export interface PasswordInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

package/dist/cjs/types/components/TextField/TextFieldContainer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TextFieldContainerProps } from "./types";
-declare const TextFieldContainer: ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout, disabled, hideLabel, isLoading, hasError, isRequired, }: TextFieldContainerProps) => React.JSX.Element;
+declare const TextFieldContainer: ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout, disabled, hideLabel, isLoading, hasError, isRequired, labelPosition, }: TextFieldContainerProps) => React.JSX.Element;
 export default TextFieldContainer;

package/dist/cjs/types/components/TextField/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TextInputProps } from "./types";
-declare const TextInput: ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, helperTextAffectLayout, hideLabel, disabled, hasError, isLoading, ariaDescribedBy, enableAutocomplete, }: TextInputProps) => React.JSX.Element;
+declare const TextInput: ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, helperTextAffectLayout, hideLabel, disabled, hasError, isLoading, ariaDescribedBy, enableAutocomplete, labelPosition, }: TextInputProps) => React.JSX.Element;
 export default TextInput;

package/dist/cjs/types/components/TextField/TextInput/types.d.ts

@@ -26,4 +26,5 @@ export interface TextInputProps {
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;
+    labelPosition?: "top" | "left";
 }

package/dist/cjs/types/components/TextField/styles.d.ts

@@ -4,14 +4,20 @@ interface TextFieldInputProps {
     $isDisabled?: boolean;
     $isLoading?: boolean;
 }
+interface WrapperProps {
+    $labelPosition?: "top" | "left";
+}
 interface TextFieldWrapperProps {
     $isDisabled?: boolean;
     $hasError?: boolean;
     $isLoading?: boolean;
+    $labelPosition?: "top" | "left";
 }
-declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$labelPosition"> & WrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$labelPosition"> & WrapperProps, never>>> & string;
+declare const InputColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+declare const LabelAligner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof TextFieldWrapperProps> & TextFieldWrapperProps, "className"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof TextFieldWrapperProps> & TextFieldWrapperProps, "className">>> & string;
 declare const TextFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof TextFieldInputProps> & TextFieldInputProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof TextFieldInputProps> & TextFieldInputProps, never>>> & string;
 declare const Category: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export { Wrapper, TextFieldWrapper, TextFieldInput, Category, IconContainer };
+export { Wrapper, InputColumn, LabelAligner, TextFieldWrapper, TextFieldInput, Category, IconContainer, };

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

@@ -21,4 +21,5 @@ export interface TextFieldContainerProps {
     endIcon?: `${StellaIconDefinition}`;
     hasError?: boolean;
     className?: string;
+    labelPosition?: "top" | "left";
 }

package/dist/esm/index.esm.js

@@ -18157,12 +18157,24 @@ const IconButton = forwardRef(({ iconName, onClick, disabled, variant = "primary
 
 const Wrapper = styled.div `
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ $labelPosition }) => $labelPosition === "left" ? "row" : "column"};
+  align-items: ${({ $labelPosition }) => $labelPosition === "left" ? "flex-start" : "stretch"};
+  gap: ${({ $labelPosition }) => ($labelPosition === "left" ? "10px" : "0")};
   min-width: 60px;
   max-width: 400px;
   position: relative;
   width: 100%;
 `;
+const InputColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const LabelAligner = styled.div `
+  height: 32px;
+  display: flex;
+  align-items: center;
+`;
 const TextFieldWrapper = styled.div.attrs({
     className: "DSL-stella-textfield",
 }) `
@@ -18174,7 +18186,7 @@ const TextFieldWrapper = styled.div.attrs({
   border: 1px solid ${Styles.color.grey.medium};
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: ${({ $labelPosition }) => $labelPosition === "left" ? "0" : "3px"};
   background-color: ${({ $isDisabled }) => $isDisabled ? Styles.color.grey.pale : "white"};
   outline: ${({ $hasError }) => $hasError && `${Styles.color.states.error} auto 1px`};
   cursor: ${({ $isDisabled, $isLoading }) => {
@@ -18233,10 +18245,9 @@ const IconContainer = styled.div `
   margin-right: 5px;
 `;
 
-const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, }) => {
-    return (a__default.createElement(Wrapper, { "data-testid": dataTestId, className: className },
-        a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
-        a__default.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
+const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, labelPosition = "top", }) => {
+    const inputAndHelper = (a__default.createElement(a__default.Fragment, null,
+        a__default.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "$labelPosition": labelPosition, "data-testid": "text-input-wrapper" },
             leftCategory && a__default.createElement(Category, null, leftCategory),
             children,
             isLoading && (a__default.createElement(IconContainer, null,
@@ -18245,9 +18256,13 @@ const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, classNa
                 a__default.createElement(StellaIcon, { dataTestId: "end-icon", iconName: endIcon }))),
             rightCategory && a__default.createElement(Category, null, rightCategory)),
         helperText && (a__default.createElement(HelperText, { id: `${id}-helper-text`, text: helperText, affectLayout: helperTextAffectLayout, type: hasError ? "error" : "info" }))));
+    return (a__default.createElement(Wrapper, { "data-testid": dataTestId, className: className, "$labelPosition": labelPosition },
+        labelPosition === "left" ? (a__default.createElement(LabelAligner, null,
+            a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }))) : (a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` })),
+        labelPosition === "left" ? (a__default.createElement(InputColumn, null, inputAndHelper)) : (inputAndHelper)));
 };
 
-const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18263,6 +18278,7 @@ const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus,
         endIcon,
         disabled,
         isLoading,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const valueToUse = value ?? inputValue;
@@ -18279,7 +18295,7 @@ const CustomIconButton$2 = styled(IconButton) `
   margin-right: 2px;
 `;
 
-const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18293,6 +18309,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         leftCategory: undefined,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const [show, setShow] = useState(!isHidden);
@@ -18331,7 +18348,7 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
         : "";
 };
 
-const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, }) => {
+const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18347,6 +18364,7 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         leftCategory,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = useState("");
     const [placeholderText, setPlaceholderText] = useState(placeholder);
@@ -21823,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)
@@ -21840,6 +21859,7 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
                 columnVisibility: state.columnVisibility,
                 columnSizing: latestSizing.current,
                 sorting: state.sorting,
+                columnFilters: state.columnFilters,
             });
         }, sizingDebounceMs);
         return () => {
@@ -22503,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]);
@@ -22639,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);
@@ -22653,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];
@@ -22672,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);
@@ -22708,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;
@@ -22788,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,
             });
         }
@@ -22874,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: {
@@ -22887,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
@@ -22896,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) {
@@ -22905,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({
@@ -22915,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)),
@@ -22979,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,
@@ -22994,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],