react-restyle-components 0.4.34 → 0.4.36

package/lib/src/core-components/src/components/Table/Table.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
 import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, SelectionIndicator, SelectionCount, } from './elements';
-import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
+import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
 import { getFilterComponent } from './filters';
 import { Tooltip } from '../Tooltip';
 // Icons
@@ -50,9 +50,9 @@ const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", st
 const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
 const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 export const Table = forwardRef(function TableComponent(props, ref) {
-    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', columnToggle = false, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
+    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
     // Quick configuration props
-    isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, isView = false, fileName, hideExcelSheet = false, 
+    isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, getNonSelectableRows, nonSelectableStyle, isView = false, fileName, hideExcelSheet = false, 
     // Quick callbacks
     onSelectedRow, selectedRowStyle, selectedRowClassName, onUpdateItem, onPageSizeChange, onFilter, clearAllFilter, onDelete, onEdit, onView, 
     // Dynamic configuration
@@ -80,6 +80,17 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Resolve aliases
     const resolvedExportable = isExport ?? exportable;
     const resolvedExportFileName = fileName ?? exportFileName;
+    // Auto-detect remote mode: if totalSize <= data.length, use client-side (remote=false)
+    const resolvedRemote = useMemo(() => {
+        // If totalSize is provided and is <= data.length, all data is loaded - use client-side
+        if (totalSize !== undefined &&
+            totalSize > 0 &&
+            totalSize <= data.length) {
+            return false;
+        }
+        // Otherwise use the prop value (default: true)
+        return remote;
+    }, [remote, totalSize, data.length]);
     // Handle isSelectRow shorthand
     const resolvedRowSelection = isSelectRow
         ? {
@@ -87,6 +98,16 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             selectedRowStyle: selectedRowStyle || rowSelection?.selectedRowStyle,
             selectedRowClassName: selectedRowClassName || rowSelection?.selectedRowClassName,
             ...rowSelection,
+            // Merge getNonSelectableRows with existing getCheckboxProps
+            getCheckboxProps: (row) => {
+                const rowKey = row[keyField];
+                const isNonSelectable = getNonSelectableRows?.includes(rowKey);
+                const existingProps = rowSelection?.getCheckboxProps?.(row);
+                return {
+                    ...existingProps,
+                    disabled: isNonSelectable || existingProps?.disabled,
+                };
+            },
             onChange: (keys, rows) => {
                 rowSelection?.onChange?.(keys, rows);
                 // Note: onSelectedRow is only called when user clicks the "X Selected" button
@@ -156,12 +177,56 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const { sort, handleSort } = useSortState(defaultSort, controlledSort);
     // Filter state
     const { filters, setFilter, clearFilters } = useFilterState(defaultFilters, controlledFilters);
-    // Debounced filters for onFilter callback
-    const debouncedFilters = useTableDebounce(filters, 500);
     // Track if onFilter should be called (only after user interaction)
     const shouldCallOnFilter = useRef(false);
     const filterTypeRef = useRef('filter');
     const onFilterRef = useRef(onFilter);
+    // Track last called values to prevent duplicate calls
+    const lastOnFilterCallRef = useRef(null);
+    // Track focused filter field to restore focus after data changes
+    const focusedFilterFieldRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    // Clear focus ref when clicking outside the table
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (tableContainerRef.current &&
+                !tableContainerRef.current.contains(event.target)) {
+                focusedFilterFieldRef.current = null;
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Restore filter focus after data changes
+    useEffect(() => {
+        const restoreFocus = () => {
+            if (focusedFilterFieldRef.current && tableContainerRef.current) {
+                const filterInput = tableContainerRef.current.querySelector(`[data-filter-field="${focusedFilterFieldRef.current}"]`);
+                if (filterInput && document.activeElement !== filterInput) {
+                    filterInput.focus();
+                    // Move cursor to end of input
+                    const len = filterInput.value?.length || 0;
+                    filterInput.setSelectionRange(len, len);
+                }
+            }
+        };
+        // Try multiple times with increasing delays to handle async renders
+        const timers = [
+            requestAnimationFrame(() => restoreFocus()),
+            setTimeout(() => restoreFocus(), 50),
+            setTimeout(() => restoreFocus(), 150),
+        ];
+        return () => {
+            timers.forEach((timer) => {
+                if (typeof timer === 'number') {
+                    cancelAnimationFrame(timer);
+                    clearTimeout(timer);
+                }
+            });
+        };
+    }, [data]);
     // Pagination state
     const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
     // Row selection
@@ -174,23 +239,48 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     useEffect(() => {
         onFilterRef.current = onFilter;
     }, [onFilter]);
-    // Call onFilter when debounced values change (debounced)
+    // Track previous values to detect actual changes
+    const prevSearchRef = useRef(debouncedSearchValue);
+    const prevFiltersRef = useRef(JSON.stringify(filters));
+    // Call onFilter when filter/search values actually change
+    // Note: filter components already debounce internally, so we use filters directly
     useEffect(() => {
         if (!shouldCallOnFilter.current)
             return;
-        const hasFilters = Object.keys(debouncedFilters).some((key) => debouncedFilters[key] !== null &&
-            debouncedFilters[key] !== undefined &&
-            debouncedFilters[key] !== '');
-        if (debouncedSearchValue || hasFilters) {
-            // For 'search' type, include srText; for 'filter' type, only pass filters
-            const filterData = filterTypeRef.current === 'search'
-                ? { ...debouncedFilters, srText: debouncedSearchValue }
-                : debouncedFilters;
-            onFilterRef.current?.(filterTypeRef.current, filterData, page, pageSize);
+        const currentFiltersStr = JSON.stringify(filters);
+        const searchChanged = prevSearchRef.current !== debouncedSearchValue;
+        const filtersChanged = prevFiltersRef.current !== currentFiltersStr;
+        // Only proceed if search or filters actually changed
+        if (!searchChanged && !filtersChanged) {
+            shouldCallOnFilter.current = false;
+            return;
+        }
+        // Update previous values
+        prevSearchRef.current = debouncedSearchValue;
+        prevFiltersRef.current = currentFiltersStr;
+        // Clean up filters - remove null, undefined, and empty string values
+        const cleanFilters = {};
+        Object.keys(filters).forEach((key) => {
+            const value = filters[key];
+            if (value !== null && value !== undefined && value !== '') {
+                cleanFilters[key] = value;
+            }
+        });
+        const hasFilters = Object.keys(cleanFilters).length > 0;
+        // Build filter data based on what type of filter changed
+        // For 'search' type, include srText if not empty; for 'filter' type, only pass filters
+        const filterData = { ...cleanFilters };
+        if (filterTypeRef.current === 'search' && debouncedSearchValue) {
+            filterData.srText = debouncedSearchValue;
         }
-        // Reset the flag after calling onFilter to prevent duplicate calls
+        // Always call onFilter when filters change (including when cleared)
+        // Case 1: Global search cleared, column filters exist → filters only
+        // Case 2: Global search cleared, no column filters → empty filters (reload all)
+        // Case 3: Specific column cleared → remaining filters
+        onFilterRef.current?.(filterTypeRef.current, filterData, page, pageSize);
+        // Reset the flag after processing to prevent duplicate calls
         shouldCallOnFilter.current = false;
-    }, [debouncedSearchValue, debouncedFilters, page, pageSize]);
+    }, [debouncedSearchValue, filters, page, pageSize]);
     // Track selection count changes for animation
     useEffect(() => {
         const currentCount = selectedKeys.size;
@@ -210,7 +300,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, [selectedKeys.size]);
     // Process data (filter, sort, paginate)
     const processedData = useMemo(() => {
-        if (remote) {
+        if (resolvedRemote) {
             // Server-side processing - data is already processed
             return data;
         }
@@ -231,7 +321,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         page,
         pageSize,
         debouncedSearchValue,
-        remote,
+        resolvedRemote,
         pagination,
         columns,
     ]);
@@ -240,10 +330,17 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // If totalSize is explicitly provided, use it for server-side pagination
         if (totalSize !== undefined && totalSize > 0)
             return totalSize;
-        if (remote)
+        if (resolvedRemote)
             return data.length;
         return filterData(data, filters, columns, debouncedSearchValue).length;
-    }, [data, filters, columns, debouncedSearchValue, remote, totalSize]);
+    }, [
+        data,
+        filters,
+        columns,
+        debouncedSearchValue,
+        resolvedRemote,
+        totalSize,
+    ]);
     // Handle search
     const handleSearchChange = useCallback((value) => {
         setInternalSearchValue(value);
@@ -279,6 +376,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         clearAllFilter?.();
         onFilterChange?.({});
         onChange?.({ type: 'filter', filters: {} });
+        // Reset the tracking ref so subsequent filters can trigger onFilter
+        lastOnFilterCallRef.current = null;
     }, [clearFilters, onClearFilters, onFilterChange, onChange]);
     // Handle page change
     const handlePageChange = useCallback((newPage) => {
@@ -288,7 +387,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // onPageSizeChange is the primary callback
         onPageSizeChange?.(displayPage, pageSize);
         onPageChange?.(displayPage, pageSize);
-        onChange?.({ type: 'pagination', pagination: { page: displayPage, pageSize } });
+        onChange?.({
+            type: 'pagination',
+            pagination: { page: displayPage, pageSize },
+        });
     }, [goToPage, pageSize, onPageSizeChange, onPageChange, onChange]);
     // Handle page size change
     const handlePageSizeChange = useCallback((newSize) => {
@@ -344,25 +446,32 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, []);
     // Handle cell edit
     const handleCellDoubleClick = useCallback((row, rowIndex, column, colIndex, e) => {
-        if (editMode === 'none')
-            return;
-        const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
-        if (!isEditable)
-            return;
-        if (editMode === 'dblclick') {
-            setEditingCell({ row: rowIndex, field: column.dataField });
-            setEditValue(getNestedValue(row, column.dataField));
+        // Call column's onDoubleClick event if defined
+        column.events?.onDoubleClick?.(e, row, rowIndex, column, colIndex);
+        // Handle cell editing
+        if (editMode !== 'none') {
+            const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
+            if (isEditable && editMode === 'dblclick') {
+                setEditingCell({ row: rowIndex, field: column.dataField });
+                setEditValue(getNestedValue(row, column.dataField));
+            }
         }
+        // Call row double click callback
         onRowDoubleClick?.(row, rowIndex, e);
     }, [editMode, onRowDoubleClick, getCellEditableInfo]);
-    const handleCellClick = useCallback((row, rowIndex, column, colIndex) => {
-        if (editMode !== 'click')
-            return;
-        const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
-        if (!isEditable)
-            return;
-        setEditingCell({ row: rowIndex, field: column.dataField });
-        setEditValue(getNestedValue(row, column.dataField));
+    const handleCellClick = useCallback((row, rowIndex, column, colIndex, e) => {
+        // Call column's onClick event if defined
+        if (e) {
+            column.events?.onClick?.(e, row, rowIndex, column, colIndex);
+        }
+        // Handle cell editing on click
+        if (editMode === 'click') {
+            const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
+            if (isEditable) {
+                setEditingCell({ row: rowIndex, field: column.dataField });
+                setEditValue(getNestedValue(row, column.dataField));
+            }
+        }
     }, [editMode, getCellEditableInfo]);
     const handleCellEditComplete = useCallback((row, rowIndex, column) => {
         if (editingCell) {
@@ -387,7 +496,11 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     };
     // Process field value based on fieldTypeConfig (matching reference implementation)
     const processFieldValue = useCallback((value, dataField, row) => {
-        const config = fieldTypeConfig?.[dataField];
+        const configOrType = fieldTypeConfig?.[dataField];
+        // Handle both object config and string shorthand (e.g., 'boolean', 'date')
+        const config = typeof configOrType === 'string'
+            ? { type: configOrType }
+            : configOrType;
         const fieldType = config?.type || 'string';
         switch (fieldType) {
             case 'array':
@@ -475,8 +588,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         }
     }, [fieldTypeConfig]);
     // Handle export
-    const handleExport = useCallback(() => {
-        const exportData = remote
+    const handleExport = useCallback(async () => {
+        const exportData = resolvedRemote
             ? data
             : filterData(data, filters, columns, debouncedSearchValue);
         // Filter columns based on hideExcelSheet array and csvExport !== false
@@ -487,7 +600,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // Also filter based on fieldTypeConfig hideFromExport or csvExport
         if (fieldTypeConfig) {
             exportColumns = exportColumns.filter((col) => {
-                const config = fieldTypeConfig[col.dataField];
+                const configOrType = fieldTypeConfig[col.dataField];
+                const config = typeof configOrType === 'string'
+                    ? { type: configOrType }
+                    : configOrType;
                 if (config?.hideFromExport)
                     return false;
                 if (config?.csvExport === false)
@@ -497,7 +613,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         }
         // Create enhanced columns with export formatters
         const enhancedColumns = exportColumns.map((col) => {
-            const config = fieldTypeConfig?.[col.dataField];
+            const configOrType = fieldTypeConfig?.[col.dataField];
+            const config = typeof configOrType === 'string'
+                ? { type: configOrType }
+                : configOrType;
             // If column already has csvFormatter, use it
             if (col.csvFormatter) {
                 return col;
@@ -515,7 +634,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             }
             return col;
         });
-        exportToCSV(exportData, enhancedColumns, resolvedExportFileName);
+        // Export based on format
+        if (exportFormat === 'excel') {
+            await exportToExcel(exportData, enhancedColumns, resolvedExportFileName);
+        }
+        else {
+            exportToCSV(exportData, enhancedColumns, resolvedExportFileName);
+        }
     }, [
         data,
         filters,
@@ -526,7 +651,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         fieldTypeConfig,
         processFieldValue,
         resolvedExportFileName,
-        remote,
+        resolvedRemote,
+        exportFormat,
     ]);
     // Handle checkbox change
     const handleCheckboxChange = useCallback((row, e) => {
@@ -631,7 +757,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         if (toolbar)
             return toolbar;
         const hasFilters = Object.keys(filters).length > 0 || searchValue;
-        return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), "Export CSV"] })), showFilterToggle && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
+        return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onFocus: () => {
+                                        // Clear column filter focus when global search is focused
+                                        focusedFilterFieldRef.current = null;
+                                    }, placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), exportFormat === 'excel' ? 'Export Excel' : 'Export CSV'] })), showFilterToggle && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
                                                         borderBottom: '1px solid #e5e7eb',
                                                         paddingBottom: 8,
                                                         marginBottom: 4,
@@ -656,8 +785,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         if (!pagination)
             return null;
         const actualTotalPages = Math.ceil(calculatedTotal / pageSize) || 1;
-        const startItem = page * pageSize + 1;
-        const endItem = Math.min((page + 1) * pageSize, calculatedTotal);
+        const startItem = calculatedTotal > 0 ? page * pageSize + 1 : 0;
+        // Use actual data length for endItem to show correct count
+        const actualDataCount = resolvedRemote
+            ? data.length
+            : processedData.length;
+        const endItem = Math.min(page * pageSize + actualDataCount, calculatedTotal);
         const showTotal = resolvedPaginationConfig?.showTotal === true
             ? `Showing ${startItem} to ${endItem} of ${calculatedTotal} Results`
             : typeof resolvedPaginationConfig?.showTotal === 'function'
@@ -704,35 +837,38 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                 resolvedRowSelection?.onChange?.(Array.from(selectedKeys), selectedRows);
                                 // Call onSelectedRow only when user clicks this button
                                 onSelectedRow?.(selectedRows);
-                            }, children: [_jsx(SelectionCount, { "$animate": selectionAnimation, children: selectedKeys.size }, selectedKeys.size), _jsx("span", { children: "Selected" })] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsx(PageSizeSelect, { value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx("option", { value: size, children: size }, size))) }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: () => handlePageChange(0), disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(page - 1), disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: () => handlePageChange(page + 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(actualTotalPages - 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper && (() => {
-                    const handleQuickJump = (input) => {
-                        const pageNum = parseInt(input.value, 10);
-                        if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= actualTotalPages) {
-                            handlePageChange(pageNum - 1); // Convert to 0-indexed
-                            input.value = '';
-                            return true;
-                        }
-                        return false;
-                    };
-                    return (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: `1-${actualTotalPages}`, onKeyDown: (e) => {
-                                    if (e.key === 'Enter') {
-                                        e.preventDefault();
+                            }, children: [_jsx(SelectionCount, { "$animate": selectionAnimation, children: selectedKeys.size }, selectedKeys.size), _jsx("span", { children: "Selected" })] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsx(PageSizeSelect, { value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx("option", { value: size, children: size }, size))) }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: () => handlePageChange(0), disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(page - 1), disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: () => handlePageChange(page + 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(actualTotalPages - 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper &&
+                    (() => {
+                        const handleQuickJump = (input) => {
+                            const pageNum = parseInt(input.value, 10);
+                            if (!isNaN(pageNum) &&
+                                pageNum >= 1 &&
+                                pageNum <= actualTotalPages) {
+                                handlePageChange(pageNum - 1); // Convert to 0-indexed
+                                input.value = '';
+                                return true;
+                            }
+                            return false;
+                        };
+                        return (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: `1-${actualTotalPages}`, onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            const target = e.target;
+                                            if (handleQuickJump(target)) {
+                                                target.blur();
+                                            }
+                                        }
+                                    }, onBlur: (e) => {
                                         const target = e.target;
-                                        if (handleQuickJump(target)) {
-                                            target.blur();
+                                        handleQuickJump(target);
+                                    } }), _jsx(PageButton, { onClick: () => {
+                                        const input = document.querySelector(`#${id} input[type="number"]`);
+                                        if (input) {
+                                            handleQuickJump(input);
+                                            input.blur();
                                         }
-                                    }
-                                }, onBlur: (e) => {
-                                    const target = e.target;
-                                    handleQuickJump(target);
-                                } }), _jsx(PageButton, { onClick: () => {
-                                    const input = document.querySelector(`#${id} input[type="number"]`);
-                                    if (input) {
-                                        handleQuickJump(input);
-                                        input.blur();
-                                    }
-                                }, style: { marginLeft: '4px', padding: '2px 8px' }, children: "Go" })] }));
-                })()] }));
+                                    }, style: { marginLeft: '4px', padding: '2px 8px' }, children: "Go" })] }));
+                    })()] }));
     };
     // Check if any columns have filters
     const hasFilterableColumns = filterable ||
@@ -741,7 +877,17 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             c.filter === true);
     // Should show filter row - check if there are filterable columns AND filters are visible
     const shouldShowFilterRow = hasFilterableColumns && showFilterRow;
-    return (_jsxs(TableRoot, { ref: ref, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
+    return (_jsxs(TableRoot, { ref: (node) => {
+            // Handle forwarded ref
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            // Also store in our container ref
+            tableContainerRef.current = node;
+        }, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
                                                 if (el)
                                                     el.indeterminate = isIndeterminate;
                                             }, onChange: handleSelectAllChange })) })), expandable && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": expandable.columnWidth || 40 })), showRowNumber && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowNumberWidth, children: rowNumberTitle })), visibleColumns.map((column, colIndex) => {
@@ -839,7 +985,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                         flexShrink: 1,
                                                                         display: 'flex',
                                                                         alignItems: 'center',
-                                                                    }, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) })) }), showSort && (_jsx("div", { style: {
+                                                                    }, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx("div", { onFocusCapture: () => {
+                                                                            focusedFilterFieldRef.current =
+                                                                                column.dataField;
+                                                                        }, "data-filter-wrapper": column.dataField, children: _jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
                                                                         width: '20%',
                                                                         minWidth: 24,
                                                                         height: 24,
@@ -879,6 +1028,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                 const hasCustomBgColor = rowSelected &&
                                     selectedStyle &&
                                     (selectedStyle.backgroundColor || selectedStyle.background);
+                                // Apply non-selectable style if row is disabled
+                                const disabledStyle = checkboxProps?.disabled
+                                    ? nonSelectableStyle || {
+                                        backgroundColor: '#f3f4f6',
+                                        opacity: 0.7,
+                                    }
+                                    : undefined;
                                 return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$selected": rowSelected, "$clickable": !!onRowClick ||
                                                 resolvedRowSelection?.mode === 'single' ||
                                                 expandable?.expandRowByClick === true, "$disabled": !!checkboxProps?.disabled, "$hasCustomSelectedStyle": !!hasCustomBgColor, "data-custom-selected": hasCustomBgColor ? 'true' : undefined, className: `${classNames.row || ''} ${rowClass || ''} ${rowSelected
@@ -886,7 +1042,16 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                     'function'
                                                     ? resolvedRowSelection.selectedRowClassName(row)
                                                     : resolvedRowSelection?.selectedRowClassName || ''
-                                                : ''}`, style: { ...styles.row, ...rowStyles, ...selectedStyle }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, visibleColumns[0], 0, e), role: "row", "aria-selected": rowSelected, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
+                                                : ''}`, style: {
+                                                ...styles.row,
+                                                ...rowStyles,
+                                                ...selectedStyle,
+                                                ...disabledStyle,
+                                            }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => {
+                                                // Only trigger row-level double click if not handled by a cell
+                                                // Cells handle their own double-clicks for editing
+                                                onRowDoubleClick?.(row, rowIndex, e);
+                                            }, role: "row", "aria-selected": rowSelected, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
                                                             expanded: rowExpanded,
                                                             row,
                                                             onExpand: () => toggleExpand(row),
@@ -903,7 +1068,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                     const cellStyle = typeof column.style === 'function'
                                                         ? column.style(getNestedValue(row, column.dataField), row, rowIndex, colIndex)
                                                         : column.style;
-                                                    return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, "$hasCustomClass": !!cellClass, className: cellClass || classNames.cell, style: { ...styles.cell, ...cellStyle }, onClick: () => handleCellClick(row, rowIndex, column, colIndex), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, column, colIndex, e), role: "gridcell", children: (() => {
+                                                    return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, "$hasCustomClass": !!cellClass, className: cellClass || classNames.cell, style: { ...styles.cell, ...cellStyle }, onClick: (e) => handleCellClick(row, rowIndex, column, colIndex, e), onDoubleClick: (e) => {
+                                                            e.stopPropagation(); // Prevent row-level double-click from interfering
+                                                            handleCellDoubleClick(row, rowIndex, column, colIndex, e);
+                                                        }, role: "gridcell", children: (() => {
                                                             const editInfo = getCellEditableInfo(column, row, rowIndex, colIndex);
                                                             if (editInfo.isEditable &&
                                                                 editMode !== 'none') {

package/lib/src/core-components/src/components/Table/filters.js

@@ -145,6 +145,8 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
     const inputRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const onFilterRef = useRef(onFilter);
+    // Track if the last change was from user input (internal) vs external (e.g., clear all)
+    const lastInternalValueRef = useRef(internalValue);
     // Keep refs in sync
     useEffect(() => {
         internalValueRef.current = internalValue;
@@ -153,10 +155,23 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
         onChangeRef.current = onChange;
         onFilterRef.current = onFilter;
     }, [onChange, onFilter]);
+    // Sync internal value when external value changes (e.g., from clear all filters)
+    // Only sync when external value differs from what we last sent to parent
+    useEffect(() => {
+        const externalValue = value || '';
+        // Only sync if external value is different from what we last propagated
+        // This prevents overwriting user input while they're typing
+        if (externalValue !== lastInternalValueRef.current) {
+            setInternalValue(externalValue);
+            lastInternalValueRef.current = externalValue;
+        }
+    }, [value]);
     // Debounce the internal value
     const [debouncedValue] = useDebouncedValue(internalValue, { wait: delay });
     // Propagate debounced value to parent
     useEffect(() => {
+        // Update the ref to track what we're sending to parent
+        lastInternalValueRef.current = debouncedValue || '';
         onChangeRef.current(debouncedValue || null);
         onFilterRef.current?.(debouncedValue);
     }, [debouncedValue]);
@@ -181,23 +196,43 @@ const TextFilterComponent = ({ column, value, onChange, options }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
+    // Track if input should be focused (user is actively typing)
+    const hasFocusRef = useRef(false);
     // Simple change handler - just update local state
     const handleChange = useCallback((e) => {
         setInternalValue(e.target.value);
     }, []);
+    // Track focus state
+    const handleFocus = useCallback(() => {
+        hasFocusRef.current = true;
+    }, []);
+    const handleBlur = useCallback(() => {
+        hasFocusRef.current = false;
+    }, []);
+    // Restore focus after re-renders if it was focused
+    useEffect(() => {
+        if (hasFocusRef.current && inputRef.current) {
+            // Use requestAnimationFrame to ensure DOM is ready
+            requestAnimationFrame(() => {
+                if (hasFocusRef.current && inputRef.current) {
+                    inputRef.current.focus();
+                }
+            });
+        }
+    });
     const inputStyle = {
         fontWeight: 400,
         ...style,
     };
     // If custom className is provided, use plain input to allow full CSS control
     if (className) {
-        return (_jsx("input", { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
+        return (_jsx("input", { ref: inputRef, type: "text", id: id, "data-filter-field": column.dataField, value: internalValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
                 width: '100%',
                 fontWeight: 400,
                 ...style,
             }, disabled: disabled }));
     }
-    return (_jsx(FilterInputBase, { ref: inputRef, type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: inputStyle, disabled: disabled }));
+    return (_jsx(FilterInputBase, { ref: inputRef, type: "text", id: id, "data-filter-field": column.dataField, value: internalValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: inputStyle, disabled: disabled }));
 };
 export function TextFilter(optionsOrProps) {
     // Check if it's being used as a factory function (options object without column/value/onChange)
@@ -227,6 +262,9 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
     const inputRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const onFilterRef = useRef(onFilter);
+    // Track last value sent to parent to prevent sync loops
+    const lastNumberRef = useRef(number);
+    const lastComparatorRef = useRef(comparator);
     // Keep refs in sync with state
     useEffect(() => {
         numberRef.current = number;
@@ -236,10 +274,27 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
         onChangeRef.current = onChange;
         onFilterRef.current = onFilter;
     }, [onChange, onFilter]);
+    // Sync internal value when external value changes (e.g., from clear all filters)
+    useEffect(() => {
+        const externalNumber = value?.number || '';
+        const externalComparator = value?.comparator || defaultComparator;
+        // Only sync if different from what we last sent to parent
+        if (externalNumber !== lastNumberRef.current) {
+            setNumber(externalNumber);
+            lastNumberRef.current = externalNumber;
+        }
+        if (externalComparator !== lastComparatorRef.current) {
+            setComparator(externalComparator);
+            lastComparatorRef.current = externalComparator;
+        }
+    }, [value, defaultComparator]);
     // Debounce the number value
     const [debouncedNumber] = useDebouncedValue(number, { wait: delay });
     // Propagate debounced value to parent
     useEffect(() => {
+        // Update refs to track what we're sending to parent
+        lastNumberRef.current = debouncedNumber || '';
+        lastComparatorRef.current = comparatorRef.current;
         const newValue = debouncedNumber
             ? { number: debouncedNumber, comparator: comparatorRef.current }
             : null;
@@ -278,6 +333,25 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getFilter]);
+    // Track if input should be focused
+    const hasFocusRef = useRef(false);
+    // Track focus state
+    const handleFocus = useCallback(() => {
+        hasFocusRef.current = true;
+    }, []);
+    const handleBlur = useCallback(() => {
+        hasFocusRef.current = false;
+    }, []);
+    // Restore focus after re-renders if it was focused
+    useEffect(() => {
+        if (hasFocusRef.current && inputRef.current) {
+            requestAnimationFrame(() => {
+                if (hasFocusRef.current && inputRef.current) {
+                    inputRef.current.focus();
+                }
+            });
+        }
+    });
     // Handle comparator change - trigger immediate filter update
     const handleComparatorChange = useCallback((newComparator) => {
         setComparator(newComparator);
@@ -303,6 +377,7 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
     const inputProps = {
         type: 'text',
         id,
+        'data-filter-field': column.dataField,
         value: number,
         onChange: (e) => {
             const val = e.target.value;
@@ -311,6 +386,8 @@ const NumberFilterComponent = ({ column, value, onChange, options }) => {
                 setNumber(val);
             }
         },
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         placeholder: placeholder || column.filterPlaceholder || 'Number...',
         disabled,
     };
@@ -341,6 +418,13 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
     const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
     const onChangeRef = useRef(onChange);
     const onFilterRef = useRef(onFilter);
+    // Track last values sent to parent to prevent sync loops
+    const lastValuesRef = useRef({
+        startDate,
+        endDate,
+        diffFlag,
+        comparator,
+    });
     // Keep refs in sync with state
     useEffect(() => {
         stateRef.current = { startDate, endDate, diffFlag, comparator };
@@ -349,11 +433,42 @@ const DateFilterComponent = ({ column, value, onChange, options }) => {
         onChangeRef.current = onChange;
         onFilterRef.current = onFilter;
     }, [onChange, onFilter]);
+    // Sync internal value when external value changes (e.g., from clear all filters)
+    useEffect(() => {
+        const externalStartDate = value?.startDate || '';
+        const externalEndDate = value?.endDate || '';
+        const externalDiffFlag = value?.diffFlag ?? defaultRangeMode;
+        const externalComparator = value?.comparator || defaultComparator;
+        // Only sync if different from what we last sent to parent
+        if (externalStartDate !== lastValuesRef.current.startDate) {
+            setStartDate(externalStartDate);
+            lastValuesRef.current.startDate = externalStartDate;
+        }
+        if (externalEndDate !== lastValuesRef.current.endDate) {
+            setEndDate(externalEndDate);
+            lastValuesRef.current.endDate = externalEndDate;
+        }
+        if (externalDiffFlag !== lastValuesRef.current.diffFlag) {
+            setDiffFlag(externalDiffFlag);
+            lastValuesRef.current.diffFlag = externalDiffFlag;
+        }
+        if (externalComparator !== lastValuesRef.current.comparator) {
+            setComparator(externalComparator);
+            lastValuesRef.current.comparator = externalComparator;
+        }
+    }, [value, defaultRangeMode, defaultComparator]);
     // Debounce the date values
     const [debouncedStartDate] = useDebouncedValue(startDate, { wait: 500 });
     const [debouncedEndDate] = useDebouncedValue(endDate, { wait: 500 });
     // Propagate debounced value to parent
     useEffect(() => {
+        // Update refs to track what we're sending to parent
+        lastValuesRef.current = {
+            startDate: debouncedStartDate,
+            endDate: debouncedEndDate,
+            diffFlag,
+            comparator,
+        };
         const newValue = debouncedStartDate || debouncedEndDate
             ? {
                 startDate: debouncedStartDate,
@@ -440,6 +555,8 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
     const selectedValueRef = useRef(selectedValue);
     const onChangeRef = useRef(onChange);
     const onFilterRef = useRef(onFilter);
+    // Track last value sent to parent to prevent sync loops
+    const lastValueRef = useRef(selectedValue);
     // Keep refs in sync with state
     useEffect(() => {
         selectedValueRef.current = selectedValue;
@@ -448,10 +565,21 @@ const SelectFilterComponent = ({ column, value, onChange, options }) => {
         onChangeRef.current = onChange;
         onFilterRef.current = onFilter;
     }, [onChange, onFilter]);
+    // Sync internal value when external value changes (e.g., from clear all filters)
+    useEffect(() => {
+        const externalValue = value || '';
+        // Only sync if different from what we last sent to parent
+        if (externalValue !== lastValueRef.current) {
+            setSelectedValue(externalValue);
+            lastValueRef.current = externalValue;
+        }
+    }, [value]);
     // Debounce the selected value
     const [debouncedValue] = useDebouncedValue(selectedValue, { wait: delay });
     // Propagate debounced value to parent
     useEffect(() => {
+        // Update ref to track what we're sending to parent
+        lastValueRef.current = debouncedValue || '';
         onChangeRef.current(debouncedValue || null);
         onFilterRef.current?.(debouncedValue || null);
     }, [debouncedValue]);

package/lib/src/core-components/src/components/Table/hooks.d.ts

@@ -104,4 +104,20 @@ export declare function getNestedValue(obj: any, path: string): any;
  * Export data to CSV
  */
 export declare function exportToCSV<T>(data: T[], columns: TableColumn<T>[], fileName: string): void;
+/**
+ * Export data to Excel (.xlsx) - loads ExcelJS dynamically from CDN
+ */
+export declare function exportToExcel<T>(data: T[], columns: TableColumn<T>[], fileName: string, options?: {
+    sheetName?: string;
+    headerStyle?: {
+        font?: {
+            bold?: boolean;
+            color?: string;
+            size?: number;
+        };
+        fill?: {
+            color?: string;
+        };
+    };
+}): Promise<void>;
 //# sourceMappingURL=hooks.d.ts.map

package/lib/src/core-components/src/components/Table/hooks.js

@@ -424,11 +424,11 @@ export function exportToCSV(data, columns, fileName) {
     // Header row
     const header = exportColumns.map((c) => `"${c.text}"`).join(',');
     // Data rows
-    const rows = data.map((row) => {
+    const rows = data.map((row, rowIndex) => {
         return exportColumns
             .map((col) => {
             const value = col.csvFormatter
-                ? col.csvFormatter(getNestedValue(row, col.dataField), row)
+                ? col.csvFormatter(getNestedValue(row, col.dataField), row, rowIndex)
                 : getNestedValue(row, col.dataField);
             if (value === null || value === undefined)
                 return '""';
@@ -449,3 +449,88 @@ export function exportToCSV(data, columns, fileName) {
     link.click();
     URL.revokeObjectURL(url);
 }
+/**
+ * Dynamically load ExcelJS from CDN (no bundle impact)
+ */
+async function loadExcelJS() {
+    // Check if already loaded
+    if (window.ExcelJS) {
+        return window.ExcelJS;
+    }
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src =
+            'https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js';
+        script.async = true;
+        script.onload = () => resolve(window.ExcelJS);
+        script.onerror = () => reject(new Error('Failed to load ExcelJS from CDN'));
+        document.head.appendChild(script);
+    });
+}
+/**
+ * Export data to Excel (.xlsx) - loads ExcelJS dynamically from CDN
+ */
+export async function exportToExcel(data, columns, fileName, options) {
+    try {
+        const ExcelJS = await loadExcelJS();
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet(options?.sheetName || 'Sheet1');
+        const exportColumns = columns.filter((c) => c.csvExport !== false);
+        // Set up columns with headers
+        worksheet.columns = exportColumns.map((col) => ({
+            header: col.text,
+            key: col.dataField,
+            width: Math.max(col.text.length + 5, 15),
+        }));
+        // Style header row
+        const headerRow = worksheet.getRow(1);
+        headerRow.font = {
+            bold: options?.headerStyle?.font?.bold ?? true,
+            size: options?.headerStyle?.font?.size ?? 12,
+        };
+        if (options?.headerStyle?.fill?.color) {
+            headerRow.fill = {
+                type: 'pattern',
+                pattern: 'solid',
+                fgColor: { argb: options.headerStyle.fill.color.replace('#', '') },
+            };
+        }
+        headerRow.commit();
+        // Add data rows
+        data.forEach((row, rowIndex) => {
+            const rowData = {};
+            exportColumns.forEach((col) => {
+                const value = col.csvFormatter
+                    ? col.csvFormatter(getNestedValue(row, col.dataField), row, rowIndex)
+                    : getNestedValue(row, col.dataField);
+                if (value === null || value === undefined) {
+                    rowData[col.dataField] = '';
+                }
+                else if (typeof value === 'object') {
+                    rowData[col.dataField] = JSON.stringify(value);
+                }
+                else {
+                    rowData[col.dataField] = value;
+                }
+            });
+            worksheet.addRow(rowData);
+        });
+        // Generate and download
+        const buffer = await workbook.xlsx.writeBuffer();
+        const blob = new Blob([buffer], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${fileName}_${new Date().toISOString().slice(0, 10)}.xlsx`;
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    catch (error) {
+        console.error('Excel export failed:', error);
+        // Fallback to CSV if Excel export fails
+        console.warn('Falling back to CSV export');
+        exportToCSV(data, columns, fileName);
+    }
+}

package/lib/src/core-components/src/components/Table/index.d.ts

@@ -1,6 +1,6 @@
 export { Table, default } from './Table';
 export * from './types';
-export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
+export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
 export { TextFilter, NumberFilter, DateFilter, SelectFilter, getFilterComponent, } from './filters';
 export type { TextFilterOptions, TextFilterInstance, NumberFilterOptions, NumberFilterInstance, SelectFilterOptions, SelectFilterInstance, DateFilterOptions, DateFilterInstance, } from './filters';
 //# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Table/index.js

@@ -1,4 +1,4 @@
 export { Table, default } from './Table';
 export * from './types';
-export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
+export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
 export { TextFilter, NumberFilter, DateFilter, SelectFilter, getFilterComponent, } from './filters';

package/lib/src/core-components/src/components/Table/types.d.ts

@@ -116,7 +116,7 @@ export interface TableColumn<T = any> {
     /** Custom footer renderer */
     footerFormatter?: (column: TableColumn<T>, data: T[]) => React.ReactNode;
     /** CSV export formatter */
-    csvFormatter?: (cell: any, row: T) => string;
+    csvFormatter?: (cell: any, row: T, rowIndex: number) => string;
     /** Whether to include in CSV export */
     csvExport?: boolean;
     /** Header CSS class */
@@ -145,8 +145,8 @@ export interface TableColumn<T = any> {
     footer?: string | ((column: TableColumn<T>, data: T[]) => React.ReactNode);
     /** Events */
     events?: {
-        onClick?: (e: React.MouseEvent, cell: any, row: T, rowIndex: number) => void;
-        onDoubleClick?: (e: React.MouseEvent, cell: any, row: T, rowIndex: number) => void;
+        onClick?: (e: React.MouseEvent, row: T, rowIndex: number, column: TableColumn<T>, columnIndex: number) => void;
+        onDoubleClick?: (e: React.MouseEvent, row: T, rowIndex: number, column: TableColumn<T>, columnIndex: number) => void;
     };
 }
 /** Filter props passed to custom filter components */
@@ -334,7 +334,8 @@ export interface TableProps<T = any> {
     paginationConfig?: Partial<TablePaginationConfig>;
     /** Total records (for server-side) */
     totalSize?: number;
-    /** Server-side mode (default: true) - data is fetched from server via onPageSizeChange */
+    /** Server-side mode (default: true) - data is fetched from server via onPageSizeChange.
+     * Auto-detection: If totalSize <= data.length, automatically uses client-side mode (remote=false) */
     remote?: boolean;
     /** Default sort */
     defaultSort?: TableSortState;
@@ -376,10 +377,12 @@ export interface TableProps<T = any> {
     showEditIcon?: boolean;
     /** On cell edit */
     onCellEdit?: (value: any, dataField: string, row: T, rowIndex: number) => void;
-    /** Enable CSV export */
+    /** Enable export button */
     exportable?: boolean;
     /** Export file name */
     exportFileName?: string;
+    /** Export format: 'csv' (default) or 'excel' */
+    exportFormat?: 'csv' | 'excel';
     /** Enable column toggle */
     columnToggle?: boolean;
     /** Enable column reorder */
@@ -465,6 +468,10 @@ export interface TableProps<T = any> {
     onView?: (row: T, rowIndex: number) => void;
     /** Enable row selection (shorthand) */
     isSelectRow?: boolean;
+    /** Array of row IDs (keyField values) that cannot be selected */
+    getNonSelectableRows?: string[];
+    /** Style for non-selectable rows */
+    nonSelectableStyle?: CSSProperties;
     /** Export file name (alias for exportFileName) */
     fileName?: string;
     /** Hide export sheet button or array of fields to exclude from export */

package/lib/src/core-components/src/tc.global.css

@@ -199,6 +199,21 @@
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.filter,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.4.34",
+  "version": "0.4.36",
   "private": false,
   "description": "Easy use restyle components",
   "author": {