react-glide-table 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -43,10 +43,12 @@ __export(src_exports, {
   hasCellSelectionEdges: () => hasCellSelectionEdges,
   isCellInSelection: () => isCellInSelection,
   isColumnEditable: () => isColumnEditable,
+  measureMergedSpanRowHeights: () => measureMergedSpanRowHeights,
   parseCellEditValue: () => parseCellEditValue,
   resolveDataTableLabels: () => resolveDataTableLabels,
   resolveRowSelection: () => resolveRowSelection,
   resolveRowSpanAt: () => resolveRowSpanAt,
+  rowRangeToHeightRatios: () => rowRangeToHeightRatios,
   toggleExpandedRowId: () => toggleExpandedRowId,
   useCellEdit: () => useCellEdit,
   useCellSelection: () => useCellSelection,
@@ -241,10 +243,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
+  if (rowSpan <= 1) return void 0;
+  const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
+  if (!tbody) return void 0;
+  const rows = tbody.querySelectorAll(":scope > tr");
+  if (rows.length < rowIndex + rowSpan) return void 0;
+  const heights = [];
+  for (let i = 0; i < rowSpan; i++) {
+    const row = rows[rowIndex + i];
+    const height = row?.getBoundingClientRect().height ?? 0;
+    if (height <= 0) return void 0;
+    heights.push(height);
+  }
+  return heights;
+}
 function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   if (rowSpan <= 1) return rowIndex;
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
+  const heights = measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement);
+  if (heights && heights.length === rowSpan) {
+    let accrued = 0;
+    for (let i = 0; i < rowSpan; i++) {
+      accrued += heights[i];
+      if (relativeY < accrued) {
+        return rowIndex + i;
+      }
+    }
+    return rowIndex + rowSpan - 1;
+  }
   const rowHeight = rect.height / rowSpan;
   const offset = Math.min(
     Math.max(Math.floor(relativeY / rowHeight), 0),
@@ -266,7 +294,35 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
 var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
-function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+function rowRangeToHeightRatios(rowIndex, span, fromRow, toRowExclusive, rowHeights) {
+  const clampedFrom = Math.max(fromRow, rowIndex);
+  const clampedTo = Math.min(toRowExclusive, rowIndex + span);
+  if (clampedTo <= clampedFrom) {
+    return { offsetRatio: 0, lengthRatio: 0 };
+  }
+  if (!rowHeights || rowHeights.length !== span) {
+    return {
+      offsetRatio: (clampedFrom - rowIndex) / span,
+      lengthRatio: (clampedTo - clampedFrom) / span
+    };
+  }
+  const total = rowHeights.reduce((sum, height) => sum + height, 0) || 1;
+  let offsetPx = 0;
+  for (let i = 0; i < clampedFrom - rowIndex; i++) {
+    offsetPx += rowHeights[i] ?? 0;
+  }
+  let lengthPx = 0;
+  for (let i = clampedFrom - rowIndex; i < clampedTo - rowIndex; i++) {
+    lengthPx += rowHeights[i] ?? 0;
+  }
+  return {
+    offsetRatio: offsetPx / total,
+    lengthRatio: lengthPx / total,
+    offsetPx,
+    lengthPx
+  };
+}
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt, rowHeights) {
   const cellEndRow = rowIndex + rowSpan - 1;
   const span = cellEndRow - rowIndex + 1;
   if (span <= 1) return [];
@@ -285,20 +341,30 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
         continue;
       }
       if (runStart !== null) {
-        edges.push({
-          side,
-          offsetRatio: (runStart - rowIndex) / span,
-          heightRatio: (row - runStart) / span
-        });
+        const ratios = rowRangeToHeightRatios(
+          rowIndex,
+          span,
+          runStart,
+          row,
+          rowHeights
+        );
+        if (ratios.lengthRatio > 0) {
+          edges.push({ side, ...ratios });
+        }
         runStart = null;
       }
     }
     if (runStart !== null) {
-      edges.push({
-        side,
-        offsetRatio: (runStart - rowIndex) / span,
-        heightRatio: (toRowExclusive - runStart) / span
-      });
+      const ratios = rowRangeToHeightRatios(
+        rowIndex,
+        span,
+        runStart,
+        toRowExclusive,
+        rowHeights
+      );
+      if (ratios.lengthRatio > 0) {
+        edges.push({ side, ...ratios });
+      }
     }
   };
   const collectSide = (side, neighborCol) => {
@@ -327,14 +393,17 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
   }
   return edges;
 }
-function buildPartialVerticalGradient(edge) {
+function buildPartialEdgeGradient(edge) {
+  const usePx = edge.offsetPx != null && edge.lengthPx != null;
   const startPct = edge.offsetRatio * 100;
-  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
-  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
-  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
-  const isBottomProtrusion = edge.offsetRatio > 0;
-  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
-  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const endPct = (edge.offsetRatio + edge.lengthRatio) * 100;
+  const startPx = edge.offsetPx ?? 0;
+  const endPx = (edge.offsetPx ?? 0) + (edge.lengthPx ?? 0);
+  const overlapPx = SELECTION_EDGE_WIDTH_PX;
+  const isTopProtrusion = (usePx ? startPx === 0 : edge.offsetRatio === 0) && edge.lengthRatio < 1;
+  const isBottomProtrusion = usePx ? startPx > 0 : edge.offsetRatio > 0;
+  const startStop = usePx ? isBottomProtrusion ? `${Math.max(0, startPx - overlapPx)}px` : `${startPx}px` : isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = usePx ? isTopProtrusion ? `${endPx + overlapPx}px` : `${endPx}px` : isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
   const xPos = edge.side === "left" ? "0" : "100%";
   const layers = [
     {
@@ -344,7 +413,7 @@ function buildPartialVerticalGradient(edge) {
     }
   ];
   if (isTopProtrusion || isBottomProtrusion) {
-    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    const capTop = usePx ? isTopProtrusion ? `${Math.max(0, endPx - SELECTION_EDGE_WIDTH_PX)}px` : `${Math.max(0, startPx - SELECTION_EDGE_WIDTH_PX)}px` : isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
     layers.push({
       image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
       size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
@@ -353,7 +422,7 @@ function buildPartialVerticalGradient(edge) {
   }
   return layers;
 }
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt, rowHeights) {
   if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
     return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
@@ -362,39 +431,47 @@ function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVi
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
   const selectionContinuesBelow = cellEndRow < bounds.endRow;
-  const shadows = [];
-  if (isTopEdge) {
-    shadows.push(
-      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isBottomEdge) {
-    shadows.push(
-      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isLeftEdge) {
-    shadows.push(
-      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isRightEdge) {
-    shadows.push(
-      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
   const stepEdges = getMergedCellStepEdges(
     rowIndex,
     colIndex,
     bounds,
     rowSpan,
-    isVisuallySelectedAt
+    isVisuallySelectedAt,
+    rowHeights
   );
+  const shadows = [];
+  const hasFullPerimeter = isTopEdge && isBottomEdge && isLeftEdge && isRightEdge && stepEdges.length === 0;
+  if (hasFullPerimeter) {
+    shadows.push(
+      `inset 0 0 0 ${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_COLOR}`
+    );
+  } else {
+    if (isTopEdge) {
+      shadows.push(
+        `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isBottomEdge) {
+      shadows.push(
+        `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isLeftEdge) {
+      shadows.push(
+        `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isRightEdge) {
+      shadows.push(
+        `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+  }
   const gradients = [];
   const sizes = [];
   const positions = [];
   for (const edge of stepEdges) {
-    for (const partial of buildPartialVerticalGradient(edge)) {
+    for (const partial of buildPartialEdgeGradient(edge)) {
       gradients.push(partial.image);
       sizes.push(partial.size);
       positions.push(partial.position);
@@ -1485,9 +1562,10 @@ function DataTableRow({
           }
         }
         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
+        const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
+        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -1500,12 +1578,14 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const spanRowHeights = enableCellSelection && activeSelectionBounds && isCellDragSelected && cellRowSpan > 1 ? measureMergedSpanRowHeights(rowIndex, cellRowSpan) : void 0;
         const selectionEdgeStyle = getCellSelectionEdgeStyle(
           rowIndex,
           cellIndex,
           activeSelectionBounds,
           cellRowSpan,
-          isVisuallySelectedAt
+          isVisuallySelectedAt,
+          spanRowHeights
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
@@ -1515,6 +1595,7 @@ function DataTableRow({
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
             "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
@@ -1559,7 +1640,8 @@ function DataTableRow({
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
-              isMerged && cellIndex > 0 && "is-merged",
+              isMerged && "is-merged",
+              isMerged && cellIndex === 0 && showMergedRightEdge && "is-merged-row-first",
               showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
@@ -2065,10 +2147,26 @@ function parseTableChildren(children) {
   }
   return slots;
 }
+function flattenColumnElements(children) {
+  const result = [];
+  for (const child of import_react9.Children.toArray(children)) {
+    if (isTableColumnElement(child)) {
+      result.push(child);
+      continue;
+    }
+    if ((0, import_react9.isValidElement)(child)) {
+      const nested = child.props.children;
+      if (nested != null) {
+        result.push(...flattenColumnElements(nested));
+      }
+    }
+  }
+  return result;
+}
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return import_react9.Children.toArray(children).filter(isTableColumnElement);
+  return flattenColumnElements(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -2281,10 +2379,12 @@ var Table = Object.assign(TableRoot, {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  measureMergedSpanRowHeights,
   parseCellEditValue,
   resolveDataTableLabels,
   resolveRowSelection,
   resolveRowSpanAt,
+  rowRangeToHeightRatios,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableLabels, c as DataTableProps, d as DataTableSlots, R as RowSelectionMode, T as TableColumnProps, e as TableProps, r as resolveDataTableLabels } from './types-BfthylVR.cjs';
-export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable } from './core.cjs';
+export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, measureMergedSpanRowHeights, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { D as DEFAULT_DATA_TABLE_LABELS, a as DataTableClassNames, b as DataTableLabels, c as DataTableProps, d as DataTableSlots, R as RowSelectionMode, T as TableColumnProps, e as TableProps, r as resolveDataTableLabels } from './types-BfthylVR.js';
-export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable } from './core.js';
+export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, measureMergedSpanRowHeights, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 import 'react';

package/dist/index.js

@@ -195,10 +195,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
+  if (rowSpan <= 1) return void 0;
+  const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
+  if (!tbody) return void 0;
+  const rows = tbody.querySelectorAll(":scope > tr");
+  if (rows.length < rowIndex + rowSpan) return void 0;
+  const heights = [];
+  for (let i = 0; i < rowSpan; i++) {
+    const row = rows[rowIndex + i];
+    const height = row?.getBoundingClientRect().height ?? 0;
+    if (height <= 0) return void 0;
+    heights.push(height);
+  }
+  return heights;
+}
 function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   if (rowSpan <= 1) return rowIndex;
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
+  const heights = measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement);
+  if (heights && heights.length === rowSpan) {
+    let accrued = 0;
+    for (let i = 0; i < rowSpan; i++) {
+      accrued += heights[i];
+      if (relativeY < accrued) {
+        return rowIndex + i;
+      }
+    }
+    return rowIndex + rowSpan - 1;
+  }
   const rowHeight = rect.height / rowSpan;
   const offset = Math.min(
     Math.max(Math.floor(relativeY / rowHeight), 0),
@@ -220,7 +246,35 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
 var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
-function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+function rowRangeToHeightRatios(rowIndex, span, fromRow, toRowExclusive, rowHeights) {
+  const clampedFrom = Math.max(fromRow, rowIndex);
+  const clampedTo = Math.min(toRowExclusive, rowIndex + span);
+  if (clampedTo <= clampedFrom) {
+    return { offsetRatio: 0, lengthRatio: 0 };
+  }
+  if (!rowHeights || rowHeights.length !== span) {
+    return {
+      offsetRatio: (clampedFrom - rowIndex) / span,
+      lengthRatio: (clampedTo - clampedFrom) / span
+    };
+  }
+  const total = rowHeights.reduce((sum, height) => sum + height, 0) || 1;
+  let offsetPx = 0;
+  for (let i = 0; i < clampedFrom - rowIndex; i++) {
+    offsetPx += rowHeights[i] ?? 0;
+  }
+  let lengthPx = 0;
+  for (let i = clampedFrom - rowIndex; i < clampedTo - rowIndex; i++) {
+    lengthPx += rowHeights[i] ?? 0;
+  }
+  return {
+    offsetRatio: offsetPx / total,
+    lengthRatio: lengthPx / total,
+    offsetPx,
+    lengthPx
+  };
+}
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt, rowHeights) {
   const cellEndRow = rowIndex + rowSpan - 1;
   const span = cellEndRow - rowIndex + 1;
   if (span <= 1) return [];
@@ -239,20 +293,30 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
         continue;
       }
       if (runStart !== null) {
-        edges.push({
-          side,
-          offsetRatio: (runStart - rowIndex) / span,
-          heightRatio: (row - runStart) / span
-        });
+        const ratios = rowRangeToHeightRatios(
+          rowIndex,
+          span,
+          runStart,
+          row,
+          rowHeights
+        );
+        if (ratios.lengthRatio > 0) {
+          edges.push({ side, ...ratios });
+        }
         runStart = null;
       }
     }
     if (runStart !== null) {
-      edges.push({
-        side,
-        offsetRatio: (runStart - rowIndex) / span,
-        heightRatio: (toRowExclusive - runStart) / span
-      });
+      const ratios = rowRangeToHeightRatios(
+        rowIndex,
+        span,
+        runStart,
+        toRowExclusive,
+        rowHeights
+      );
+      if (ratios.lengthRatio > 0) {
+        edges.push({ side, ...ratios });
+      }
     }
   };
   const collectSide = (side, neighborCol) => {
@@ -281,14 +345,17 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
   }
   return edges;
 }
-function buildPartialVerticalGradient(edge) {
+function buildPartialEdgeGradient(edge) {
+  const usePx = edge.offsetPx != null && edge.lengthPx != null;
   const startPct = edge.offsetRatio * 100;
-  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
-  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
-  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
-  const isBottomProtrusion = edge.offsetRatio > 0;
-  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
-  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const endPct = (edge.offsetRatio + edge.lengthRatio) * 100;
+  const startPx = edge.offsetPx ?? 0;
+  const endPx = (edge.offsetPx ?? 0) + (edge.lengthPx ?? 0);
+  const overlapPx = SELECTION_EDGE_WIDTH_PX;
+  const isTopProtrusion = (usePx ? startPx === 0 : edge.offsetRatio === 0) && edge.lengthRatio < 1;
+  const isBottomProtrusion = usePx ? startPx > 0 : edge.offsetRatio > 0;
+  const startStop = usePx ? isBottomProtrusion ? `${Math.max(0, startPx - overlapPx)}px` : `${startPx}px` : isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = usePx ? isTopProtrusion ? `${endPx + overlapPx}px` : `${endPx}px` : isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
   const xPos = edge.side === "left" ? "0" : "100%";
   const layers = [
     {
@@ -298,7 +365,7 @@ function buildPartialVerticalGradient(edge) {
     }
   ];
   if (isTopProtrusion || isBottomProtrusion) {
-    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    const capTop = usePx ? isTopProtrusion ? `${Math.max(0, endPx - SELECTION_EDGE_WIDTH_PX)}px` : `${Math.max(0, startPx - SELECTION_EDGE_WIDTH_PX)}px` : isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
     layers.push({
       image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
       size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
@@ -307,7 +374,7 @@ function buildPartialVerticalGradient(edge) {
   }
   return layers;
 }
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt, rowHeights) {
   if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
     return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
@@ -316,39 +383,47 @@ function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVi
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
   const selectionContinuesBelow = cellEndRow < bounds.endRow;
-  const shadows = [];
-  if (isTopEdge) {
-    shadows.push(
-      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isBottomEdge) {
-    shadows.push(
-      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isLeftEdge) {
-    shadows.push(
-      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isRightEdge) {
-    shadows.push(
-      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
   const stepEdges = getMergedCellStepEdges(
     rowIndex,
     colIndex,
     bounds,
     rowSpan,
-    isVisuallySelectedAt
+    isVisuallySelectedAt,
+    rowHeights
   );
+  const shadows = [];
+  const hasFullPerimeter = isTopEdge && isBottomEdge && isLeftEdge && isRightEdge && stepEdges.length === 0;
+  if (hasFullPerimeter) {
+    shadows.push(
+      `inset 0 0 0 ${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_COLOR}`
+    );
+  } else {
+    if (isTopEdge) {
+      shadows.push(
+        `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isBottomEdge) {
+      shadows.push(
+        `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isLeftEdge) {
+      shadows.push(
+        `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isRightEdge) {
+      shadows.push(
+        `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+  }
   const gradients = [];
   const sizes = [];
   const positions = [];
   for (const edge of stepEdges) {
-    for (const partial of buildPartialVerticalGradient(edge)) {
+    for (const partial of buildPartialEdgeGradient(edge)) {
       gradients.push(partial.image);
       sizes.push(partial.size);
       positions.push(partial.position);
@@ -1439,9 +1514,10 @@ function DataTableRow({
           }
         }
         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
+        const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
+        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -1454,12 +1530,14 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const spanRowHeights = enableCellSelection && activeSelectionBounds && isCellDragSelected && cellRowSpan > 1 ? measureMergedSpanRowHeights(rowIndex, cellRowSpan) : void 0;
         const selectionEdgeStyle = getCellSelectionEdgeStyle(
           rowIndex,
           cellIndex,
           activeSelectionBounds,
           cellRowSpan,
-          isVisuallySelectedAt
+          isVisuallySelectedAt,
+          spanRowHeights
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
@@ -1469,6 +1547,7 @@ function DataTableRow({
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
             "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
@@ -1513,7 +1592,8 @@ function DataTableRow({
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
-              isMerged && cellIndex > 0 && "is-merged",
+              isMerged && "is-merged",
+              isMerged && cellIndex === 0 && showMergedRightEdge && "is-merged-row-first",
               showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
@@ -1970,7 +2050,7 @@ function buildColumnDef(props, sort, onSort) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-import { Children } from "react";
+import { Children, isValidElement as isValidElement2 } from "react";
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
 import { isValidElement } from "react";
@@ -2019,10 +2099,26 @@ function parseTableChildren(children) {
   }
   return slots;
 }
+function flattenColumnElements(children) {
+  const result = [];
+  for (const child of Children.toArray(children)) {
+    if (isTableColumnElement(child)) {
+      result.push(child);
+      continue;
+    }
+    if (isValidElement2(child)) {
+      const nested = child.props.children;
+      if (nested != null) {
+        result.push(...flattenColumnElements(nested));
+      }
+    }
+  }
+  return result;
+}
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return Children.toArray(children).filter(isTableColumnElement);
+  return flattenColumnElements(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -2234,10 +2330,12 @@ export {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  measureMergedSpanRowHeights,
   parseCellEditValue,
   resolveDataTableLabels,
   resolveRowSelection,
   resolveRowSpanAt,
+  rowRangeToHeightRatios,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"