react-restyle-components 0.4.41 → 0.4.43

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

@@ -209,6 +209,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, [showFilterRow, isFilterVisibilityControlled, onShowFiltersChange]);
     const [editingCell, setEditingCell] = useState(null);
     const [editValue, setEditValue] = useState(null);
+    // Cache custom editor render to avoid repeated renders while editing the same cell
+    const editorRendererCacheRef = useRef(new Map());
+    useEffect(() => {
+        // Clear cache when editing target changes
+        editorRendererCacheRef.current.clear();
+    }, [editingCell]);
     const searchValue = controlledSearchValue ?? internalSearchValue;
     const debouncedSearchValue = useTableDebounce(searchValue, searchDebounce);
     // Sort state
@@ -330,7 +336,8 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // 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);
+        // Note: page is 0-indexed internally, but onFilter expects 1-indexed page
+        onFilterRef.current?.(filterTypeRef.current, filterData, page + 1, pageSize);
         // Reset the flag after processing to prevent duplicate calls
         shouldCallOnFilter.current = false;
     }, [debouncedSearchValue, filters, page, pageSize]);
@@ -458,6 +465,11 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, [changePageSize, onPageSizeChange, onPageChange, onChange]);
     // Handle row click
     const handleRowClick = useCallback((row, rowIndex, e) => {
+        // Prevent clicks on disabled rows
+        const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
+        if (checkboxProps?.disabled) {
+            return;
+        }
         // Selection handling - only for 'single' mode (checkbox mode uses checkbox click only)
         if (resolvedRowSelection?.mode === 'single') {
             const result = toggleRow(row);
@@ -473,7 +485,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             }
         }
         onRowClick?.(row, rowIndex, e);
-    }, [rowSelection, expandable, toggleRow, toggleExpand, onRowClick]);
+    }, [rowSelection, expandable, toggleRow, toggleExpand, onRowClick, resolvedRowSelection]);
     // Helper to check if cell is editable and get custom editor
     const getCellEditableInfo = useCallback((column, row, rowIndex, colIndex) => {
         // If editorRenderer is provided, column is editable by default (unless editable explicitly returns false)
@@ -499,33 +511,85 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, []);
     // Handle cell edit
     const handleCellDoubleClick = useCallback((row, rowIndex, column, colIndex, e) => {
+        // Check if row is disabled
+        const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
+        const isRowDisabled = !!checkboxProps?.disabled;
+        // Check if allowRows is provided
+        const hasAllowRows = resolvedRowSelection?.allowRows && resolvedRowSelection.allowRows.length > 0;
+        // If row is disabled and allowRows is NOT provided, block all clicks
+        if (isRowDisabled && !hasAllowRows) {
+            return;
+        }
+        // If row is disabled and allowRows IS provided, only allow clicks on columns in allowRows
+        if (isRowDisabled && hasAllowRows) {
+            const isInAllowRows = resolvedRowSelection.allowRows.includes(column.dataField);
+            if (!isInAllowRows) {
+                return;
+            }
+        }
+        // Check if column is editable
+        const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
         // 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') {
+            // If allowRows is provided, only allow editing for columns in allowRows
+            // Otherwise, allow editing for all editable columns
+            if (hasAllowRows) {
+                const isInAllowRows = resolvedRowSelection.allowRows.includes(column.dataField);
+                if (isInAllowRows && editMode === 'dblclick') {
+                    setEditingCell({ row: rowIndex, field: column.dataField });
+                    setEditValue(getNestedValue(row, column.dataField));
+                }
+            }
+            else 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]);
+    }, [editMode, onRowDoubleClick, getCellEditableInfo, resolvedRowSelection]);
     const handleCellClick = useCallback((row, rowIndex, column, colIndex, e) => {
+        // Check if row is disabled
+        const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
+        const isRowDisabled = !!checkboxProps?.disabled;
+        // Check if allowRows is provided
+        const hasAllowRows = resolvedRowSelection?.allowRows && resolvedRowSelection.allowRows.length > 0;
+        // If row is disabled and allowRows is NOT provided, block all clicks
+        if (isRowDisabled && !hasAllowRows) {
+            return;
+        }
+        // If row is disabled and allowRows IS provided, only allow clicks on columns in allowRows
+        if (isRowDisabled && hasAllowRows) {
+            const isInAllowRows = resolvedRowSelection.allowRows.includes(column.dataField);
+            if (!isInAllowRows) {
+                return;
+            }
+        }
+        // Check if column is editable
+        const { isEditable } = getCellEditableInfo(column, row, rowIndex, colIndex);
         // 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) {
+            // If allowRows is provided, only allow editing for columns in allowRows
+            // Otherwise, allow editing for all editable columns
+            if (hasAllowRows) {
+                const isInAllowRows = resolvedRowSelection.allowRows.includes(column.dataField);
+                if (isInAllowRows) {
+                    setEditingCell({ row: rowIndex, field: column.dataField });
+                    setEditValue(getNestedValue(row, column.dataField));
+                }
+            }
+            else if (isEditable) {
                 setEditingCell({ row: rowIndex, field: column.dataField });
                 setEditValue(getNestedValue(row, column.dataField));
             }
         }
-    }, [editMode, getCellEditableInfo]);
+    }, [editMode, getCellEditableInfo, resolvedRowSelection]);
     const handleCellEditComplete = useCallback((row, rowIndex, column) => {
         if (editingCell) {
             // Validate
@@ -724,10 +788,15 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, [toggleAll, isAllSelected, resolvedRowSelection]);
     // Handle expand toggle
     const handleExpandClick = useCallback((row, e) => {
+        // Prevent expand on disabled rows
+        const checkboxProps = resolvedRowSelection?.getCheckboxProps?.(row);
+        if (checkboxProps?.disabled) {
+            return;
+        }
         e.stopPropagation();
         const result = toggleExpand(row);
         expandable?.onExpandChange?.(result.expandedKeys, result.expanded, row);
-    }, [toggleExpand, expandable]);
+    }, [toggleExpand, expandable, resolvedRowSelection]);
     // Filtered column list for toggle panel - use reorderedColumns to preserve reorder state
     const filteredToggleColumns = useMemo(() => {
         return reorderedColumns.filter((c) => c.dataField !== keyField &&
@@ -744,35 +813,39 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             // Check for custom editorRenderer
             if (column.editorRenderer) {
                 const rowId = row[keyField];
-                const editorProps = {
-                    value: editValue,
-                    onUpdate: (newValue) => {
-                        setEditValue(newValue);
-                        // Call onUpdateItem directly for custom editors
-                        onUpdateItem?.(newValue, column.dataField, rowId);
-                        setEditingCell(null);
-                    },
-                    onCancel: () => setEditingCell(null),
-                    onBlur: () => {
-                        // Only complete if value changed
-                        if (editValue !== value) {
-                            onUpdateItem?.(editValue, column.dataField, rowId);
-                        }
-                        setEditingCell(null);
-                    },
-                    row,
-                    column,
-                    rowIndex,
-                    columnIndex: colIndex,
-                    // Additional helpers for direct update
-                    rowId,
-                    dataField: column.dataField,
-                    onUpdateItem: (newValue) => {
-                        onUpdateItem?.(newValue, column.dataField, rowId);
-                        setEditingCell(null);
-                    },
-                };
-                return column.editorRenderer(editorProps, editValue, row, column, rowIndex, colIndex);
+                const cacheKey = `${rowId ?? rowIndex}-${column.dataField}`;
+                if (!editorRendererCacheRef.current.has(cacheKey)) {
+                    const editorProps = {
+                        value: editValue,
+                        onUpdate: (newValue) => {
+                            setEditValue(newValue);
+                            // Call onUpdateItem directly for custom editors
+                            onUpdateItem?.(newValue, column.dataField, rowId);
+                            setEditingCell(null);
+                        },
+                        onCancel: () => setEditingCell(null),
+                        onBlur: () => {
+                            // Only complete if value changed
+                            if (editValue !== value) {
+                                onUpdateItem?.(editValue, column.dataField, rowId);
+                            }
+                            setEditingCell(null);
+                        },
+                        row,
+                        column,
+                        rowIndex,
+                        columnIndex: colIndex,
+                        // Additional helpers for direct update
+                        rowId,
+                        dataField: column.dataField,
+                        onUpdateItem: (newValue) => {
+                            onUpdateItem?.(newValue, column.dataField, rowId);
+                            setEditingCell(null);
+                        },
+                    };
+                    editorRendererCacheRef.current.set(cacheKey, column.editorRenderer(editorProps, editValue, row, column, rowIndex, colIndex));
+                }
+                return editorRendererCacheRef.current.get(cacheKey);
             }
             // Default editor
             return (_jsx(CellEditor, { type: column.editorType === 'number' ? 'number' : 'text', value: editValue ?? '', onChange: (e) => setEditValue(e.target.value), onBlur: () => handleCellEditComplete(row, rowIndex, column), onKeyDown: (e) => {
@@ -1297,14 +1370,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                 ...selectedStyle,
                                                 ...disabledStyle,
                                             }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => {
+                                                // Prevent double clicks on disabled rows
+                                                if (checkboxProps?.disabled) {
+                                                    return;
+                                                }
                                                 // 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({
+                                            }, role: "row", "aria-selected": rowSelected, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, "$disabled": !!checkboxProps?.disabled, 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, "$disabled": !!checkboxProps?.disabled, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
                                                             expanded: rowExpanded,
                                                             row,
                                                             onExpand: () => toggleExpand(row),
-                                                        })) : (_jsx(ExpandIcon, {})) })) })), showRowNumber && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, style: {
+                                                        })) : (_jsx(ExpandIcon, {})) })) })), showRowNumber && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, "$disabled": !!checkboxProps?.disabled, style: {
                                                         width: rowNumberWidth,
                                                         color: '#6b7280',
                                                         fontWeight: 500,
@@ -1321,7 +1398,29 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                     const cellResizeStyle = resizable
                                                         ? getColumnStyle(column, columnWidths, resizable, isResizing)
                                                         : {};
-                                                    return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, "$hasCustomClass": !!cellClass, className: cellClass || classNames.cell, style: {
+                                                    // Check if column is editable (needed for disabled row handling)
+                                                    const editInfo = getCellEditableInfo(column, row, rowIndex, colIndex);
+                                                    // Check if allowRows is provided
+                                                    const hasAllowRows = resolvedRowSelection?.allowRows && resolvedRowSelection.allowRows.length > 0;
+                                                    // Check if column is in allowRows (allowed to edit even when row is disabled)
+                                                    const isInAllowRows = !!(hasAllowRows && resolvedRowSelection.allowRows.includes(column.dataField));
+                                                    // Determine if column is effectively editable:
+                                                    // - If row is disabled and allowRows is NOT provided: NOT editable (even if marked as editable)
+                                                    // - If row is disabled and allowRows IS provided: editable only if in allowRows
+                                                    // - If row is NOT disabled: editable if marked as editable
+                                                    const isRowDisabled = !!checkboxProps?.disabled;
+                                                    let isEffectivelyEditable = editInfo.isEditable;
+                                                    if (isRowDisabled) {
+                                                        if (!hasAllowRows) {
+                                                            // No allowRows provided: disable all columns
+                                                            isEffectivelyEditable = false;
+                                                        }
+                                                        else {
+                                                            // allowRows provided: only columns in allowRows are editable
+                                                            isEffectivelyEditable = isInAllowRows;
+                                                        }
+                                                    }
+                                                    return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, "$hasCustomClass": !!cellClass, "$disabled": !!checkboxProps?.disabled, "$isEditable": isEffectivelyEditable, "$isInAllowRows": isInAllowRows, className: cellClass || classNames.cell, style: {
                                                             ...styles.cell,
                                                             ...cellStyle,
                                                             ...cellResizeStyle,
@@ -1329,8 +1428,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                             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 &&
+                                                            if (isEffectivelyEditable &&
                                                                 editMode !== 'none') {
                                                                 // Check for custom editor
                                                                 if (editInfo.customEditor) {

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

@@ -62,6 +62,9 @@ export declare const TableCell: import("styled-components/dist/types").IStyledCo
     $pinned?: false | "left" | "right" | undefined;
     $padding?: string | undefined;
     $hasCustomClass?: boolean | undefined;
+    $disabled?: boolean | undefined;
+    $isEditable?: boolean | undefined;
+    $isInAllowRows?: boolean | undefined;
 }>> & string;
 export declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;

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

@@ -412,6 +412,7 @@ export const TableRow = styled.tr `
       opacity: 0.5;
       background: ${tokens.surface || '#e5e7eb'} !important;
       color: ${tokens.onSurface || '#1f2937'};
+      cursor: not-allowed;
 
       &:hover {
         background: ${tokens.surface || '#e5e7eb'} !important;
@@ -446,6 +447,61 @@ export const TableCell = styled.td `
     css `
       border-left: 2px solid #d1d5db;
     `}
+
+  /* Ensure formatter content displays properly */
+  /* Make direct children inline-block by default (for Icon components, etc.) */
+  /* But preserve flex/grid/block layouts when explicitly set */
+  > * {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  /* Preserve flex layouts - these take precedence */
+  > [class*="flex"],
+  > [style*="display: flex"],
+  > [style*="display:flex"],
+  > div[class*="flex"],
+  > div[style*="display: flex"],
+  > div[style*="display:flex"] {
+    display: flex !important;
+  }
+
+  /* Preserve grid layouts */
+  > [class*="grid"],
+  > [style*="display: grid"],
+  > [style*="display:grid"] {
+    display: grid !important;
+  }
+
+  /* Preserve block layouts */
+  > [class*="block"],
+  > [style*="display: block"],
+  > [style*="display:block"] {
+    display: block !important;
+  }
+
+  /* Disabled state - prevent clicks and show not-allowed cursor */
+  /* Only apply pointer-events: none if row is disabled AND column is NOT effectively editable */
+  ${({ $disabled, $isEditable }) => $disabled &&
+    !$isEditable &&
+    css `
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+  
+  /* If row is disabled but column is effectively editable, show default cursor */
+  ${({ $disabled, $isEditable }) => $disabled &&
+    $isEditable &&
+    css `
+      cursor: default;
+    `}
+  
+  /* Remove opacity for columns in allowRows when row is disabled */
+  ${({ $disabled, $isInAllowRows }) => $disabled &&
+    $isInAllowRows &&
+    css `
+      opacity: 1 !important;
+    `}
 `;
 export const Checkbox = styled.input.attrs({ type: 'checkbox' }) `
   width: 16px;

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

@@ -229,6 +229,8 @@ export interface TableSelectionConfig<T = any> {
     columnWidth?: number | string;
     /** Column title */
     columnTitle?: React.ReactNode;
+    /** Array of column dataField values that should remain editable and without opacity when row is disabled */
+    allowRows?: string[];
 }
 /** Row expand config */
 export interface TableExpandConfig<T = any> {