react-restyle-components 0.4.32 → 0.4.34

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

@@ -50,11 +50,11 @@ 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 = false, 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', 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, 
     // Quick callbacks
-    onSelectedRow, onUpdateItem, onPageSizeChange, onFilter, clearAllFilter, onDelete, onEdit, onView, 
+    onSelectedRow, selectedRowStyle, selectedRowClassName, onUpdateItem, onPageSizeChange, onFilter, clearAllFilter, onDelete, onEdit, onView, 
     // Dynamic configuration
     dynamicStylingFields, fieldTypeConfig, 
     // Row number
@@ -84,6 +84,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const resolvedRowSelection = isSelectRow
         ? {
             mode: 'checkbox',
+            selectedRowStyle: selectedRowStyle || rowSelection?.selectedRowStyle,
+            selectedRowClassName: selectedRowClassName || rowSelection?.selectedRowClassName,
             ...rowSelection,
             onChange: (keys, rows) => {
                 rowSelection?.onChange?.(keys, rows);
@@ -91,9 +93,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             },
         }
         : rowSelection;
-    // Default pagination config
+    // Default pagination config - users don't need to pass these
     const resolvedPaginationConfig = pagination
         ? {
+            page: 0,
             pageSize: 10,
             showSizeChanger: true,
             showQuickJumper: true,
@@ -232,10 +235,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         pagination,
         columns,
     ]);
-    // Calculate total for client-side
+    // Calculate total for pagination
     const calculatedTotal = useMemo(() => {
+        // If totalSize is explicitly provided, use it for server-side pagination
+        if (totalSize !== undefined && totalSize > 0)
+            return totalSize;
         if (remote)
-            return totalSize || data.length;
+            return data.length;
         return filterData(data, filters, columns, debouncedSearchValue).length;
     }, [data, filters, columns, debouncedSearchValue, remote, totalSize]);
     // Handle search
@@ -277,24 +283,28 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Handle page change
     const handlePageChange = useCallback((newPage) => {
         goToPage(newPage);
-        onPageChange?.(newPage, pageSize);
-        onPageSizeChange?.(newPage, pageSize);
-        onChange?.({ type: 'pagination', pagination: { page: newPage, pageSize } });
-    }, [goToPage, pageSize, onPageChange, onPageSizeChange, onChange]);
+        // Pass 1-indexed page number to callbacks (user-friendly)
+        const displayPage = newPage + 1;
+        // onPageSizeChange is the primary callback
+        onPageSizeChange?.(displayPage, pageSize);
+        onPageChange?.(displayPage, pageSize);
+        onChange?.({ type: 'pagination', pagination: { page: displayPage, pageSize } });
+    }, [goToPage, pageSize, onPageSizeChange, onPageChange, onChange]);
     // Handle page size change
     const handlePageSizeChange = useCallback((newSize) => {
         changePageSize(newSize);
-        onPageChange?.(0, newSize);
-        onPageSizeChange?.(0, newSize);
+        // Pass 1-indexed page number to callbacks (page 1 after size change)
+        onPageSizeChange?.(1, newSize);
+        onPageChange?.(1, newSize);
         onChange?.({
             type: 'pagination',
-            pagination: { page: 0, pageSize: newSize },
+            pagination: { page: 1, pageSize: newSize },
         });
-    }, [changePageSize, onPageChange, onChange]);
+    }, [changePageSize, onPageSizeChange, onPageChange, onChange]);
     // Handle row click
     const handleRowClick = useCallback((row, rowIndex, e) => {
-        // Selection handling
-        if (resolvedRowSelection?.mode && resolvedRowSelection.mode !== 'none') {
+        // Selection handling - only for 'single' mode (checkbox mode uses checkbox click only)
+        if (resolvedRowSelection?.mode === 'single') {
             const result = toggleRow(row);
             if (result) {
                 resolvedRowSelection?.onChange?.(result.selectedKeys, result.selectedRows);
@@ -651,7 +661,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         const showTotal = resolvedPaginationConfig?.showTotal === true
             ? `Showing ${startItem} to ${endItem} of ${calculatedTotal} Results`
             : typeof resolvedPaginationConfig?.showTotal === 'function'
-                ? resolvedPaginationConfig.showTotal(calculatedTotal, [startItem, endItem])
+                ? resolvedPaginationConfig.showTotal(calculatedTotal, [
+                    startItem,
+                    endItem,
+                ])
                 : null;
         // Generate page numbers
         const getPageNumbers = () => {
@@ -685,21 +698,41 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             }
             return pages;
         };
-        return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [(resolvedRowSelection?.mode === 'checkbox' || isSelectRow) && selectedKeys.size > 0 && (_jsxs(SelectionIndicator, { onClick: () => {
+        return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [(resolvedRowSelection?.mode === 'checkbox' || isSelectRow) &&
+                            selectedKeys.size > 0 && (_jsxs(SelectionIndicator, { onClick: () => {
                                 const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
                                 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: goToFirstPage, disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: goToPrevPage, 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: goToNextPage, disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: goToLastPage, disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper && (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: "#", onKeyDown: (e) => {
-                                if (e.key === 'Enter') {
+                            }, 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;
-                                    const pageNum = parseInt(target.value, 10) - 1;
-                                    if (pageNum >= 0 && pageNum < actualTotalPages) {
-                                        handlePageChange(pageNum);
-                                        target.value = '';
+                                    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" })] }));
+                })()] }));
     };
     // Check if any columns have filters
     const hasFilterableColumns = filterable ||
@@ -752,6 +785,34 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                     FilterComponent;
                                                 // isHeaderSort: show sort icon (default true)
                                                 const showSort = column.isHeaderSort !== false && column.sort;
+                                                // If no filter, show title and sort on single line
+                                                if (!showFilter) {
+                                                    return (_jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: column.headerAlign || column.align || 'left',
+                                                            gap: 6,
+                                                            width: '100%',
+                                                            cursor: showSort ? 'pointer' : 'default',
+                                                        }, onClick: () => showSort && handleSortClick(column), children: [showTitle && (_jsx("span", { style: {
+                                                                    color: 'white',
+                                                                    fontWeight: 600,
+                                                                    fontSize: 12,
+                                                                    whiteSpace: 'nowrap',
+                                                                }, children: column.headerFormatter
+                                                                    ? column.headerFormatter(column, colIndex)
+                                                                    : column.headerText || column.text })), showSort && (_jsx("div", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'center',
+                                                                    flexShrink: 0,
+                                                                }, children: column.sortCaret ? (column.sortCaret(sort.field === column.dataField
+                                                                    ? sort.order
+                                                                    : null, column)) : (_jsx(DefaultSortCaret, { order: sort.field === column.dataField
+                                                                        ? sort.order
+                                                                        : null, column: column })) }))] }));
+                                                }
+                                                // With filter: two-row layout
                                                 return (_jsxs("div", { style: {
                                                         display: 'flex',
                                                         flexDirection: 'column',
@@ -765,21 +826,21 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                 cursor: showSort ? 'pointer' : 'default',
                                                             }, onClick: () => showSort && handleSortClick(column), children: column.headerFormatter
                                                                 ? column.headerFormatter(column, colIndex)
-                                                                : column.headerText || column.text })), (showFilter || showSort) && (_jsxs("div", { style: {
+                                                                : column.headerText || column.text })), _jsxs("div", { style: {
                                                                 display: 'flex',
                                                                 alignItems: 'center',
                                                                 justifyContent: 'center',
                                                                 gap: 6,
                                                                 width: '100%',
                                                                 minHeight: 24,
-                                                            }, children: [showFilter && (_jsx("div", { style: {
+                                                            }, children: [_jsx("div", { style: {
                                                                         width: showSort ? '80%' : '100%',
                                                                         minWidth: 0,
                                                                         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: {
-                                                                        width: showFilter ? '20%' : '100%',
+                                                                    }, 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: {
+                                                                        width: '20%',
                                                                         minWidth: 24,
                                                                         height: 24,
                                                                         display: 'flex',
@@ -791,7 +852,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                         ? sort.order
                                                                         : null, column)) : (_jsx(DefaultSortCaret, { order: sort.field === column.dataField
                                                                             ? sort.order
-                                                                            : null, column: column })) }))] }))] }));
+                                                                            : null, column: column })) }))] })] }));
                                             })() }, column.dataField));
                                     })] }) }), _jsx(TableBody, { className: classNames.body, style: styles.body, children: processedData.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length +
                                         (resolvedRowSelection?.mode === 'checkbox' ? 1 : 0) +
@@ -809,13 +870,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                     ? rowStyle(row, rowIndex)
                                     : rowStyle;
                                 const selectedStyle = rowSelected
-                                    ? typeof resolvedRowSelection?.selectedRowStyle === 'function'
+                                    ? typeof resolvedRowSelection?.selectedRowStyle ===
+                                        'function'
                                         ? resolvedRowSelection.selectedRowStyle(row)
                                         : resolvedRowSelection?.selectedRowStyle
                                     : undefined;
+                                // Check if custom selected style has a background color
+                                const hasCustomBgColor = rowSelected &&
+                                    selectedStyle &&
+                                    (selectedStyle.backgroundColor || selectedStyle.background);
                                 return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$selected": rowSelected, "$clickable": !!onRowClick ||
                                                 resolvedRowSelection?.mode === 'single' ||
-                                                expandable?.expandRowByClick === true, "$disabled": !!checkboxProps?.disabled, className: `${classNames.row || ''} ${rowClass || ''} ${rowSelected
+                                                expandable?.expandRowByClick === true, "$disabled": !!checkboxProps?.disabled, "$hasCustomSelectedStyle": !!hasCustomBgColor, "data-custom-selected": hasCustomBgColor ? 'true' : undefined, className: `${classNames.row || ''} ${rowClass || ''} ${rowSelected
                                                 ? typeof resolvedRowSelection?.selectedRowClassName ===
                                                     'function'
                                                     ? resolvedRowSelection.selectedRowClassName(row)
@@ -851,7 +917,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                             return renderCellContent(row, column, rowIndex, colIndex);
                                                         })() }, column.dataField));
                                                 })] }), expandable && rowExpanded && isExpandable && (_jsx(ExpandedRow, { children: _jsx(ExpandedCell, { colSpan: visibleColumns.length +
-                                                    (resolvedRowSelection?.mode === 'checkbox' ? 1 : 0) +
+                                                    (resolvedRowSelection?.mode === 'checkbox'
+                                                        ? 1
+                                                        : 0) +
                                                     (expandable ? 1 : 0) +
                                                     (showRowNumber ? 1 : 0), children: expandable.expandedRowRender?.(row, rowIndex, rowExpanded) }) }))] }, rowKey));
                             })) }), showFooter && (_jsx(TableFooter, { className: classNames.footer, style: styles.footer, children: _jsxs(FooterRow, { className: classNames.footerRow, style: styles.footerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), expandable && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), showRowNumber && (_jsx(FooterCell, { "$align": "center", "$compact": compact })), visibleColumns.map((column) => (_jsx(FooterCell, { "$align": column.align || 'left', "$compact": compact, className: classNames.footerCell, style: styles.footerCell, children: typeof column.footer === 'function'

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

@@ -54,6 +54,7 @@ export declare const TableRow: import("styled-components/dist/types").IStyledCom
     $selected: boolean;
     $clickable: boolean;
     $disabled: boolean;
+    $hasCustomSelectedStyle?: boolean | undefined;
 }>> & string;
 export declare const TableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
     $align: string;