@lensui/lens-table 0.1.75 → 0.1.77

package/dist/index.cjs

@@ -335,12 +335,21 @@ 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 popupReadyRef = (0, import_react2.useRef)(false);
+  const navigationSourceRef = (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 [popupStyle, setPopupStyle] = (0, import_react2.useState)({});
+  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)({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = (0, import_react2.useMemo)(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -358,7 +367,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
           bottom: window.innerHeight - rect.top + 4,
           left: rect.left,
           width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
@@ -367,7 +377,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         top: rect.bottom + 4,
         left: rect.left,
         width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -378,6 +389,23 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       window.removeEventListener("scroll", positionPopup, true);
     };
   }, [maxDropdownHeight]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   (0, import_react2.useEffect)(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -397,10 +425,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -423,6 +453,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -432,12 +463,16 @@ 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,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label }),
@@ -1106,6 +1141,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 +1205,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 +1250,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 +1273,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 +1288,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 +1308,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 +1411,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 +1422,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 +1808,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;
@@ -2582,7 +2641,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);

package/dist/index.js

@@ -305,12 +305,21 @@ 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 popupReadyRef = useRef(false);
+  const navigationSourceRef = useRef(null);
   const originalValueRef = useRef(value);
   const listboxId = useId2();
   const originalValue = originalValueRef.current;
   const [inputValue, setInputValue] = useState(value);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [popupStyle, setPopupStyle] = useState({});
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  });
+  const [popupStyle, setPopupStyle] = useState({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = useMemo(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -328,7 +337,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
           bottom: window.innerHeight - rect.top + 4,
           left: rect.left,
           width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
@@ -337,7 +347,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         top: rect.bottom + 4,
         left: rect.left,
         width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -348,6 +359,23 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       window.removeEventListener("scroll", positionPopup, true);
     };
   }, [maxDropdownHeight]);
+  useLayoutEffect(() => {
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  useLayoutEffect(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   useEffect(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -367,10 +395,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -393,6 +423,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -402,12 +433,16 @@ 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,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ jsx3("span", { children: option.label }),
@@ -1076,6 +1111,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 +1175,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 +1220,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 +1243,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 +1258,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 +1278,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 +1381,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 +1392,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 +1778,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;
@@ -2552,7 +2611,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);

package/package.json

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