@lensui/lens-table 0.1.74 → 0.1.76

package/dist/index.cjs

@@ -335,11 +335,15 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
   const editorRef = (0, import_react2.useRef)(null);
   const popupRef = (0, import_react2.useRef)(null);
+  const activeOptionRef = (0, import_react2.useRef)(null);
   const originalValueRef = (0, import_react2.useRef)(value);
   const listboxId = (0, import_react2.useId)();
   const originalValue = originalValueRef.current;
   const [inputValue, setInputValue] = (0, import_react2.useState)(value);
-  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(() => {
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  });
   const [popupStyle, setPopupStyle] = (0, import_react2.useState)({});
   const filteredOptions = (0, import_react2.useMemo)(() => {
     const query = inputValue.trim().toLocaleLowerCase();
@@ -378,6 +382,9 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       window.removeEventListener("scroll", positionPopup, true);
     };
   }, [maxDropdownHeight]);
+  (0, import_react2.useLayoutEffect)(() => {
+    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [activeIndex, filteredOptions, popupStyle]);
   (0, import_react2.useEffect)(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -432,6 +439,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: popupRef, id: listboxId, role: "listbox", className: "rvg-choice-content rvg-searchable-choice-content", style: popupStyle, children: filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
+        ref: index === activeIndex ? activeOptionRef : void 0,
         type: "button",
         role: "option",
         "aria-selected": option.value === originalValue,
@@ -1106,6 +1114,7 @@ function paintGrid(options) {
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
+  const resolveColor = options.resolveColor ?? ((color) => color);
   const getAxisSelectionFill = (rowIndex, columnKey) => selectedColumnKeys.has(columnKey) && striped && rowIndex % 2 === 1 ? colors.axisSelectionStripeFill : colors.axisSelectionFill;
   const bodyTop = options.bodyTop ?? headerHeight;
   const getCellSpan = (rowIndex, columnIndex) => options.cellSpans.get(getCellCoordKey(rowIndex, columnIndex));
@@ -1169,8 +1178,9 @@ function paintGrid(options) {
       const trailingRowStyle = options.rowStyle?.(row, rowIndex);
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
       const paintTrailingLayer = (fill) => {
-        if (!fill) return;
-        ctx.fillStyle = fill;
+        const resolvedFill = resolveColor(fill);
+        if (!resolvedFill) return;
+        ctx.fillStyle = resolvedFill;
         ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
       };
       if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
@@ -1213,8 +1223,11 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         if (rowStyle?.backgroundColor) {
-          ctx.fillStyle = rowStyle.backgroundColor;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const rowBackground = resolveColor(rowStyle.backgroundColor);
+          if (rowBackground) {
+            ctx.fillStyle = rowBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (isAxisSelected) {
           ctx.fillStyle = getAxisSelectionFill(rowIndex, column.key);
@@ -1233,8 +1246,11 @@ function paintGrid(options) {
         const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
         const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
         if (!isSelectedCell && !isRangeCell && cellStyle?.backgroundColor) {
-          ctx.fillStyle = cellStyle.backgroundColor;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const cellBackground = resolveColor(cellStyle.backgroundColor);
+          if (cellBackground) {
+            ctx.fillStyle = cellBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (highlightEditedCells && !insertedRowKeys.has(rowKey) && !isSelectedCell && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`)) {
           ctx.fillStyle = colors.editedFill;
@@ -1245,8 +1261,11 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         if (annotation?.type === "background") {
-          ctx.fillStyle = annotation.color;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const annotationBackground = resolveColor(annotation.color);
+          if (annotationBackground) {
+            ctx.fillStyle = annotationBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (isColumnDropTarget) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
@@ -1262,14 +1281,14 @@ function paintGrid(options) {
         }
         if (rowSpan > 1) {
           const mergedFill = isColumnDropTarget ? isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
-          ctx.fillStyle = mergedFill;
+          ctx.fillStyle = resolveColor(mergedFill) ?? colors.background;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
           const mergedFill = isColumnDropTarget ? isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
-          ctx.fillStyle = mergedFill;
+          ctx.fillStyle = resolveColor(mergedFill) ?? colors.background;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
             offsetLeft += metrics[columnIndex + offset - 1]?.width ?? 0;
@@ -1365,7 +1384,8 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            const textColor = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : resolveColor(cellStyle?.color ?? rowStyle?.color) ?? colors.text;
+            ctx.fillStyle = textColor;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1375,7 +1395,7 @@ function paintGrid(options) {
         }
         if (annotation?.type === "corner") {
           const cornerTop = y - 1;
-          ctx.fillStyle = annotation.color;
+          ctx.fillStyle = resolveColor(annotation.color) ?? colors.text;
           ctx.beginPath();
           ctx.moveTo(x + cellWidth - 10, cornerTop);
           ctx.lineTo(x + cellWidth, cornerTop);
@@ -1761,6 +1781,18 @@ function readThemePixel(styles, name, fallback) {
   const value = Number.parseFloat(styles.getPropertyValue(name));
   return Number.isFinite(value) && value > 0 ? value : fallback;
 }
+function resolveCanvasColor(styles, color) {
+  if (!color) return void 0;
+  let resolved = color.trim();
+  for (let depth = 0; depth < 8; depth += 1) {
+    const variable = resolved.match(/^var\(\s*(--[^,\s)]+)\s*(?:,\s*(.+))?\)$/);
+    if (!variable) return resolved || void 0;
+    const value = styles.getPropertyValue(variable[1]).trim();
+    resolved = value || variable[2]?.trim() || "";
+    if (!resolved) return void 0;
+  }
+  return void 0;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -1997,6 +2029,7 @@ function TableInner({
   const rootRef = (0, import_react8.useRef)(null);
   const frameRef = (0, import_react8.useRef)(null);
   const textFrameRef = (0, import_react8.useRef)(null);
+  const textLayoutScrollTopRef = (0, import_react8.useRef)(0);
   const toastTimerRef = (0, import_react8.useRef)(null);
   const headerTooltipTimerRef = (0, import_react8.useRef)(null);
   const cellTooltipTimerRef = (0, import_react8.useRef)(null);
@@ -2581,7 +2614,7 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, resolveColor: (color) => resolveCanvasColor(themeStyles, color), colors: themeColors });
   }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react8.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
@@ -3034,6 +3067,13 @@ function TableInner({
     horizontalScrollbarDragRef.current = null;
     showCustomScrollbar("horizontal");
   }, [showCustomScrollbar]);
+  (0, import_react8.useLayoutEffect)(() => {
+    textLayoutScrollTopRef.current = scrollPosition.top;
+    const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+    clips?.forEach((clip) => {
+      clip.style.transform = "";
+    });
+  }, [scrollPosition.top]);
   const handleScroll = (0, import_react8.useCallback)(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -3041,6 +3081,13 @@ function TableInner({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    const textDeltaY = element.scrollTop - textLayoutScrollTopRef.current;
+    if (textDeltaY !== 0) {
+      const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+      clips?.forEach((clip) => {
+        clip.style.transform = `translate3d(0, ${-textDeltaY}px, 0)`;
+      });
+    }
     syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {

package/dist/index.css

@@ -183,6 +183,7 @@
   bottom: 0;
   overflow: hidden;
   pointer-events: none;
+  will-change: transform;
 }
 .rvg-text-scroll-clip {
   position: absolute;

package/dist/index.js

@@ -305,11 +305,15 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
   const editorRef = useRef(null);
   const popupRef = useRef(null);
+  const activeOptionRef = useRef(null);
   const originalValueRef = useRef(value);
   const listboxId = useId2();
   const originalValue = originalValueRef.current;
   const [inputValue, setInputValue] = useState(value);
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  });
   const [popupStyle, setPopupStyle] = useState({});
   const filteredOptions = useMemo(() => {
     const query = inputValue.trim().toLocaleLowerCase();
@@ -348,6 +352,9 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       window.removeEventListener("scroll", positionPopup, true);
     };
   }, [maxDropdownHeight]);
+  useLayoutEffect(() => {
+    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [activeIndex, filteredOptions, popupStyle]);
   useEffect(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -402,6 +409,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3("div", { ref: popupRef, id: listboxId, role: "listbox", className: "rvg-choice-content rvg-searchable-choice-content", style: popupStyle, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxs3(
       "button",
       {
+        ref: index === activeIndex ? activeOptionRef : void 0,
         type: "button",
         role: "option",
         "aria-selected": option.value === originalValue,
@@ -1076,6 +1084,7 @@ function paintGrid(options) {
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
+  const resolveColor = options.resolveColor ?? ((color) => color);
   const getAxisSelectionFill = (rowIndex, columnKey) => selectedColumnKeys.has(columnKey) && striped && rowIndex % 2 === 1 ? colors.axisSelectionStripeFill : colors.axisSelectionFill;
   const bodyTop = options.bodyTop ?? headerHeight;
   const getCellSpan = (rowIndex, columnIndex) => options.cellSpans.get(getCellCoordKey(rowIndex, columnIndex));
@@ -1139,8 +1148,9 @@ function paintGrid(options) {
       const trailingRowStyle = options.rowStyle?.(row, rowIndex);
       const y = bodyTop + rowIndex * rowHeight - scrollTop + getRowDragOffset(rowIndex);
       const paintTrailingLayer = (fill) => {
-        if (!fill) return;
-        ctx.fillStyle = fill;
+        const resolvedFill = resolveColor(fill);
+        if (!resolvedFill) return;
+        ctx.fillStyle = resolvedFill;
         ctx.fillRect(trailingBlankStart, y, width - trailingBlankStart, rowHeight);
       };
       if (striped && rowIndex % 2 === 1) paintTrailingLayer(colors.stripe);
@@ -1183,8 +1193,11 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         if (rowStyle?.backgroundColor) {
-          ctx.fillStyle = rowStyle.backgroundColor;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const rowBackground = resolveColor(rowStyle.backgroundColor);
+          if (rowBackground) {
+            ctx.fillStyle = rowBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (isAxisSelected) {
           ctx.fillStyle = getAxisSelectionFill(rowIndex, column.key);
@@ -1203,8 +1216,11 @@ function paintGrid(options) {
         const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
         const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
         if (!isSelectedCell && !isRangeCell && cellStyle?.backgroundColor) {
-          ctx.fillStyle = cellStyle.backgroundColor;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const cellBackground = resolveColor(cellStyle.backgroundColor);
+          if (cellBackground) {
+            ctx.fillStyle = cellBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (highlightEditedCells && !insertedRowKeys.has(rowKey) && !isSelectedCell && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`)) {
           ctx.fillStyle = colors.editedFill;
@@ -1215,8 +1231,11 @@ function paintGrid(options) {
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
         if (annotation?.type === "background") {
-          ctx.fillStyle = annotation.color;
-          ctx.fillRect(x, y, cellWidth, cellHeight);
+          const annotationBackground = resolveColor(annotation.color);
+          if (annotationBackground) {
+            ctx.fillStyle = annotationBackground;
+            ctx.fillRect(x, y, cellWidth, cellHeight);
+          }
         }
         if (isColumnDropTarget) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
@@ -1232,14 +1251,14 @@ function paintGrid(options) {
         }
         if (rowSpan > 1) {
           const mergedFill = isColumnDropTarget ? isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
-          ctx.fillStyle = mergedFill;
+          ctx.fillStyle = resolveColor(mergedFill) ?? colors.background;
           for (let offset = 1; offset < rowSpan; offset += 1) {
             ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
           }
         }
         if (colSpan > 1 && !verticalBorderless) {
           const mergedFill = isColumnDropTarget ? isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
-          ctx.fillStyle = mergedFill;
+          ctx.fillStyle = resolveColor(mergedFill) ?? colors.background;
           let offsetLeft = 0;
           for (let offset = 1; offset < colSpan; offset += 1) {
             offsetLeft += metrics[columnIndex + offset - 1]?.width ?? 0;
@@ -1335,7 +1354,8 @@ function paintGrid(options) {
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            const textColor = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : resolveColor(cellStyle?.color ?? rowStyle?.color) ?? colors.text;
+            ctx.fillStyle = textColor;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -1345,7 +1365,7 @@ function paintGrid(options) {
         }
         if (annotation?.type === "corner") {
           const cornerTop = y - 1;
-          ctx.fillStyle = annotation.color;
+          ctx.fillStyle = resolveColor(annotation.color) ?? colors.text;
           ctx.beginPath();
           ctx.moveTo(x + cellWidth - 10, cornerTop);
           ctx.lineTo(x + cellWidth, cornerTop);
@@ -1731,6 +1751,18 @@ function readThemePixel(styles, name, fallback) {
   const value = Number.parseFloat(styles.getPropertyValue(name));
   return Number.isFinite(value) && value > 0 ? value : fallback;
 }
+function resolveCanvasColor(styles, color) {
+  if (!color) return void 0;
+  let resolved = color.trim();
+  for (let depth = 0; depth < 8; depth += 1) {
+    const variable = resolved.match(/^var\(\s*(--[^,\s)]+)\s*(?:,\s*(.+))?\)$/);
+    if (!variable) return resolved || void 0;
+    const value = styles.getPropertyValue(variable[1]).trim();
+    resolved = value || variable[2]?.trim() || "";
+    if (!resolved) return void 0;
+  }
+  return void 0;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -1967,6 +1999,7 @@ function TableInner({
   const rootRef = useRef4(null);
   const frameRef = useRef4(null);
   const textFrameRef = useRef4(null);
+  const textLayoutScrollTopRef = useRef4(0);
   const toastTimerRef = useRef4(null);
   const headerTooltipTimerRef = useRef4(null);
   const cellTooltipTimerRef = useRef4(null);
@@ -2551,7 +2584,7 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, resolveColor: (color) => resolveCanvasColor(themeStyles, color), colors: themeColors });
   }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
@@ -3004,6 +3037,13 @@ function TableInner({
     horizontalScrollbarDragRef.current = null;
     showCustomScrollbar("horizontal");
   }, [showCustomScrollbar]);
+  useLayoutEffect3(() => {
+    textLayoutScrollTopRef.current = scrollPosition.top;
+    const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+    clips?.forEach((clip) => {
+      clip.style.transform = "";
+    });
+  }, [scrollPosition.top]);
   const handleScroll = useCallback2(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -3011,6 +3051,13 @@ function TableInner({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    const textDeltaY = element.scrollTop - textLayoutScrollTopRef.current;
+    if (textDeltaY !== 0) {
+      const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
+      clips?.forEach((clip) => {
+        clip.style.transform = `translate3d(0, ${-textDeltaY}px, 0)`;
+      });
+    }
     syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",