@canvas-components/pivot-table 0.1.8 → 0.2.1

package/dist/index.cjs

@@ -749,14 +749,11 @@ function matchesSearchKeyword(value, filter) {
   return filter.searchExact ? text === keyword : text.includes(keyword);
 }
 function matchesFilterConditions(value, filter) {
-  const first = filter.condition;
-  const second = filter.secondCondition;
-  const firstActive = first && first.operator !== "none";
-  const secondActive = second && second.operator !== "none";
-  if (!firstActive && !secondActive) return true;
-  if (!firstActive) return evaluateCondition(value, second);
-  if (!secondActive) return evaluateCondition(value, first);
-  return filter.conditionRelation === "or" ? evaluateCondition(value, first) || evaluateCondition(value, second) : evaluateCondition(value, first) && evaluateCondition(value, second);
+  const conditions = (filter.conditions?.length ? filter.conditions : [filter.condition, filter.secondCondition]).filter(
+    (condition) => condition != null && condition.operator !== "none"
+  );
+  if (conditions.length === 0) return true;
+  return filter.conditionRelation === "or" ? conditions.some((condition) => evaluateCondition(value, condition)) : conditions.every((condition) => evaluateCondition(value, condition));
 }
 function evaluateCondition(value, condition) {
   const text = value == null ? "" : String(value);
@@ -995,7 +992,7 @@ function computePivotScrollbarLayout(params) {
   }
   if (hasVertical) {
     const fullHeight = Math.max(
-      params.bodyHeight - VERTICAL_TOP_INSET - (hasHorizontal ? SCROLLBAR_THICKNESS : 0),
+      params.bodyHeight - VERTICAL_TOP_INSET,
       0
     );
     const buttonSize = Math.min(SCROLLBAR_THICKNESS, fullHeight / 3);
@@ -1051,6 +1048,7 @@ var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_WIDTH = 120;
 var DEFAULT_HEADER_SIZE = 40;
 var DEFAULT_ROW_DIMENSION_WIDTH2 = 140;
+var SCROLLBAR_THICKNESS2 = 10;
 function buildPivotLayoutSnapshot(params) {
   const { model, options, visibleRowNodes, visibleColumnNodes, width, height } = params;
   const indicatorLayout = options.indicatorLayout ?? "columns";
@@ -1083,8 +1081,8 @@ function buildPivotLayoutSnapshot(params) {
   const columnHeaderHeight = columnHeaderLevels * DEFAULT_HEADER_SIZE;
   const reportFilterHeight = (options.filterDimensions?.length ?? 0) * rowHeight;
   const tableHeaderHeight = reportFilterHeight + columnHeaderHeight;
-  const bodyWidth = Math.max(width - rowHeaderWidth, 0);
-  const availableBodyHeight = Math.max(height - tableHeaderHeight, 0);
+  const rawBodyWidth = Math.max(width - rowHeaderWidth, 0);
+  const rawAvailableBodyHeight = Math.max(height - tableHeaderHeight, 0);
   const rowSlots = createPivotAxisSlots({
     nodes: visibleRowNodes,
     indicators: options.indicators.map((indicator) => indicator.key),
@@ -1107,19 +1105,52 @@ function buildPivotLayoutSnapshot(params) {
   const columnOffsets = createOffsets(columnWidths);
   const totalBodyWidth = columnOffsets[columnOffsets.length - 1] ?? 0;
   const totalBodyHeight = rowSlots.length * rowHeight;
+  let hasHorizontalScrollbar = totalBodyWidth > rawBodyWidth;
+  let hasVerticalScrollbar = totalBodyHeight > rawAvailableBodyHeight;
+  for (let index = 0; index < 2; index += 1) {
+    hasHorizontalScrollbar = totalBodyWidth > Math.max(
+      rawBodyWidth - (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+      0
+    );
+    hasVerticalScrollbar = totalBodyHeight > Math.max(
+      rawAvailableBodyHeight - (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+      0
+    );
+  }
+  const bodyWidth = Math.max(
+    rawBodyWidth - (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+    0
+  );
+  const availableBodyHeight = Math.max(
+    rawAvailableBodyHeight - (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+    0
+  );
+  const frozenBottomRowRange = resolveFrozenBottomRowRange(rowSlots);
+  const frozenBottomRowCount = frozenBottomRowRange ? frozenBottomRowRange.end - frozenBottomRowRange.start : 0;
+  const frozenBottomHeight = frozenBottomRowCount * rowHeight;
+  const scrollableRowCount = frozenBottomRowRange?.start ?? rowSlots.length;
+  const totalScrollableBodyHeight = scrollableRowCount * rowHeight;
   const tableWidth = rowHeaderWidth + Math.min(bodyWidth, totalBodyWidth);
   const bodyHeight = Math.min(availableBodyHeight, totalBodyHeight);
-  const fittedHeight = tableHeaderHeight + bodyHeight;
+  const visibleFrozenBottomHeight = Math.min(frozenBottomHeight, bodyHeight);
+  const scrollableBodyHeight = Math.max(
+    bodyHeight - visibleFrozenBottomHeight,
+    0
+  );
+  const fittedHeight = tableHeaderHeight + bodyHeight + (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0);
   const maxScrollLeft = Math.max(totalBodyWidth - bodyWidth, 0);
-  const maxScrollTop = Math.max(totalBodyHeight - bodyHeight, 0);
+  const maxScrollTop = Math.max(
+    totalScrollableBodyHeight - scrollableBodyHeight,
+    0
+  );
   const scroll = {
     left: utils.clamp(params.scroll.left, 0, maxScrollLeft),
     top: utils.clamp(params.scroll.top, 0, maxScrollTop)
   };
   const visibleRowRange = resolveVisibleRange({
-    count: rowSlots.length,
+    count: scrollableRowCount,
     itemSize: rowHeight,
-    viewportSize: bodyHeight,
+    viewportSize: scrollableBodyHeight,
     offset: scroll.top,
     overscan: options.overscanRowCount ?? 1
   });
@@ -1154,6 +1185,23 @@ function buildPivotLayoutSnapshot(params) {
     dimensionCount: options.rows.length,
     indicators: options.indicators
   });
+  if (frozenBottomRowRange) {
+    rowHeaderCells.push(
+      ...buildRowHeaderCells({
+        model,
+        options,
+        slots: rowSlots,
+        range: frozenBottomRowRange,
+        rowHeight,
+        rowDimensionWidths,
+        columnHeaderHeight: tableHeaderHeight,
+        scrollTop: frozenBottomRowRange.start * rowHeight - scrollableBodyHeight,
+        expandedNodeIds: params.expandedRowNodeIds,
+        dimensionCount: options.rows.length,
+        indicators: options.indicators
+      })
+    );
+  }
   const columnHeaderCells = buildColumnHeaderCells({
     model,
     options,
@@ -1180,14 +1228,34 @@ function buildPivotLayoutSnapshot(params) {
     columnHeaderHeight: tableHeaderHeight,
     scroll
   });
+  if (frozenBottomRowRange) {
+    bodyCells.push(
+      ...buildBodyCells({
+        model,
+        rowSlots,
+        columnSlots,
+        rowRange: frozenBottomRowRange,
+        columnRange: visibleColumnRange,
+        rowHeight,
+        columnWidths,
+        columnOffsets,
+        rowHeaderWidth,
+        columnHeaderHeight: tableHeaderHeight,
+        scroll: {
+          left: scroll.left,
+          top: frozenBottomRowRange.start * rowHeight - scrollableBodyHeight
+        }
+      })
+    );
+  }
   const scrollbar = computePivotScrollbarLayout({
-    width,
+    width: tableWidth + (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
     height: fittedHeight,
     bodyTop: tableHeaderHeight,
-    bodyHeight,
+    bodyHeight: scrollableBodyHeight,
     bodyWidth,
     totalBodyWidth,
-    totalBodyHeight,
+    totalBodyHeight: totalScrollableBodyHeight,
     scrollLeft: scroll.left,
     scrollTop: scroll.top,
     maxScrollLeft,
@@ -1239,6 +1307,7 @@ function buildPivotLayoutSnapshot(params) {
     rowSlots,
     columnSlots,
     visibleRowRange,
+    frozenBottomRowRange,
     visibleColumnRange,
     reportFilterCells,
     rowFieldHeaderCells,
@@ -1373,6 +1442,13 @@ function createAxisSlot(node, indicatorKey) {
     kind: node?.kind ?? "empty"
   };
 }
+function resolveFrozenBottomRowRange(slots) {
+  let start = slots.length;
+  while (start > 0 && slots[start - 1]?.kind === "grandTotal") {
+    start -= 1;
+  }
+  return start < slots.length ? { start, end: slots.length } : null;
+}
 function buildRowHeaderCells(params) {
   const cells = [];
   for (let rowIndex = params.range.start; rowIndex < params.range.end; rowIndex += 1) {
@@ -2573,6 +2649,7 @@ function createPivotDomHost(container) {
     right: "0",
     height: "100%",
     overflow: "hidden",
+    borderRadius: "8px",
     touchAction: "none"
   });
   Object.assign(canvas.style, {
@@ -2635,8 +2712,8 @@ function resolvePivotSelectionRect(layout, selection) {
   const kind = resolvePivotSelectionKind(selection);
   const startX = kind === "row" || kind === "row-cell" ? layout.rowHeaderRect.x : layout.bodyRect.x + (layout.columnOffsets[indexes.startColumnIndex] ?? 0) - layout.scroll.left;
   const endX = layout.bodyRect.x + (layout.columnOffsets[indexes.endColumnIndex] ?? 0) + (layout.columnWidths[indexes.endColumnIndex] ?? layout.columnWidth) - layout.scroll.left;
-  const startY = kind === "column" ? layout.columnHeaderRect.y : layout.bodyRect.y + indexes.startRowIndex * layout.rowHeight - layout.scroll.top;
-  const endY = layout.bodyRect.y + (indexes.endRowIndex + 1) * layout.rowHeight - layout.scroll.top;
+  const startY = kind === "column" ? layout.columnHeaderRect.y : resolvePivotRowTop(layout, indexes.startRowIndex);
+  const endY = resolvePivotRowTop(layout, indexes.endRowIndex) + layout.rowHeight;
   const clipRect = resolvePivotSelectionClipRect(layout, selection);
   const visibleStartX = Math.max(startX, clipRect.x);
   const visibleEndX = Math.min(endX, clipRect.x + clipRect.width);
@@ -2650,6 +2727,13 @@ function resolvePivotSelectionRect(layout, selection) {
     height: visibleEndY - visibleStartY
   };
 }
+function resolvePivotRowTop(layout, rowIndex) {
+  const frozenRange = layout.frozenBottomRowRange;
+  if (frozenRange && rowIndex >= frozenRange.start && rowIndex < frozenRange.end) {
+    return layout.bodyRect.y + layout.bodyRect.height - (frozenRange.end - rowIndex) * layout.rowHeight;
+  }
+  return layout.bodyRect.y + rowIndex * layout.rowHeight - layout.scroll.top;
+}
 function resolvePivotSelectionClipRect(layout, selection) {
   const kind = resolvePivotSelectionKind(selection);
   if (kind === "row" || kind === "row-cell") {
@@ -2794,26 +2878,127 @@ var defaultPivotTableTheme = {
 };
 
 // src/rendering/draw-scrollbars.ts
-function drawPivotScrollbars(context, layout) {
+function drawPivotScrollbars(context, layout, borderColor, verticalFrame) {
   context.save();
+  if (layout.horizontal && verticalFrame) {
+    drawHorizontalScrollbarMask(
+      context,
+      layout.horizontal,
+      verticalFrame.bodyBackgroundColor
+    );
+  }
+  if (layout.vertical && verticalFrame) {
+    drawVerticalScrollbarFrame(
+      context,
+      layout.vertical,
+      verticalFrame,
+      borderColor
+    );
+  }
   if (layout.horizontal) {
-    drawAxis(context, layout.horizontal, "horizontal");
+    drawAxis(context, layout.horizontal, "horizontal", borderColor);
   }
   if (layout.vertical) {
-    drawAxis(context, layout.vertical, "vertical");
+    drawAxis(context, layout.vertical, "vertical", borderColor);
+  }
+  if (layout.horizontal) {
+    drawHorizontalScrollbarTopBorder(
+      context,
+      layout.horizontal,
+      layout.vertical,
+      borderColor
+    );
   }
   context.restore();
 }
-function drawAxis(context, layout, axis) {
-  drawTrack(context, layout.track);
+function drawHorizontalScrollbarMask(context, layout, backgroundColor) {
+  const left = layout.decreaseButton.x;
+  const right = layout.increaseButton.x + layout.increaseButton.width;
+  const top = layout.decreaseButton.y;
+  const height = layout.decreaseButton.height;
+  if (right <= left || height <= 0) return;
+  context.save();
+  context.fillStyle = backgroundColor;
+  context.fillRect(left, top, right - left, height);
+  context.restore();
+}
+function drawHorizontalScrollbarTopBorder(context, horizontal, vertical, borderColor) {
+  const left = Math.round(horizontal.decreaseButton.x) + 0.5;
+  const horizontalRight = horizontal.increaseButton.x + horizontal.increaseButton.width;
+  const verticalRight = vertical ? vertical.decreaseButton.x + vertical.decreaseButton.width : horizontalRight;
+  const right = Math.round(Math.max(horizontalRight, verticalRight)) - 0.5;
+  const top = Math.round(horizontal.decreaseButton.y) + 0.5;
+  if (right <= left) return;
+  context.save();
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(left, top);
+  context.lineTo(right, top);
+  context.stroke();
+  context.restore();
+}
+function drawAxis(context, layout, axis, borderColor) {
   drawButton(context, layout.decreaseButton, axis, "decrease");
   drawButton(context, layout.increaseButton, axis, "increase");
   drawThumb(context, layout.thumb);
+  drawTrackBorder(context, layout.track, axis, borderColor);
+}
+function drawTrackBorder(context, rect, axis, borderColor) {
+  const left = Math.round(rect.x) + 0.5;
+  const right = Math.round(rect.x + rect.width) - 0.5;
+  const top = Math.round(rect.y) + 0.5;
+  const bottom = Math.round(rect.y + rect.height) - 0.5;
+  if (right <= left || bottom <= top) return;
+  context.save();
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
+  context.beginPath();
+  if (axis === "horizontal") {
+    context.moveTo(left, top);
+    context.lineTo(right, top);
+  } else {
+    context.moveTo(left, top);
+    context.lineTo(left, bottom);
+  }
+  context.stroke();
+  context.restore();
 }
-function drawTrack(context, rect) {
-  context.fillStyle = "rgba(148, 163, 184, 0.16)";
-  roundRect(context, rect, rect.height / 2);
-  context.fill();
+function drawVerticalScrollbarFrame(context, layout, frame, borderColor) {
+  const left = Math.round(layout.decreaseButton.x) + 0.5;
+  const top = Math.round(frame.top) + 0.5;
+  const bottom = Math.round(frame.top + frame.height) - 0.5;
+  const headerBottom = Math.round(frame.headerBottom) + 0.5;
+  if (bottom <= top) return;
+  context.save();
+  context.fillStyle = frame.headerBackgroundColor;
+  context.fillRect(
+    layout.decreaseButton.x,
+    frame.top,
+    layout.decreaseButton.width,
+    Math.max(frame.headerBottom - frame.top, 0)
+  );
+  context.fillStyle = frame.bodyBackgroundColor;
+  context.fillRect(
+    layout.decreaseButton.x,
+    frame.headerBottom,
+    layout.decreaseButton.width,
+    Math.max(frame.top + frame.height - frame.headerBottom, 0)
+  );
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(left, top);
+  context.lineTo(left, bottom);
+  context.stroke();
+  if (headerBottom > top && headerBottom < bottom) {
+    const right = Math.round(layout.decreaseButton.x + layout.decreaseButton.width) - 0.5;
+    context.beginPath();
+    context.moveTo(left, headerBottom);
+    context.lineTo(right, headerBottom);
+    context.stroke();
+  }
+  context.restore();
 }
 function drawThumb(context, rect) {
   context.fillStyle = "rgba(100, 116, 139, 0.8)";
@@ -2821,28 +3006,25 @@ function drawThumb(context, rect) {
   context.fill();
 }
 function drawButton(context, rect, axis, direction) {
-  context.fillStyle = "rgba(226, 232, 240, 0.92)";
-  context.strokeStyle = "rgba(148, 163, 184, 0.65)";
-  context.lineWidth = 1;
-  roundRect(context, rect, rect.height / 2);
-  context.fill();
-  context.stroke();
   context.fillStyle = "rgba(71, 85, 105, 0.88)";
   context.beginPath();
   const centerX = rect.x + rect.width / 2;
   const centerY = rect.y + rect.height / 2;
+  const iconSize = Math.min(rect.width, rect.height) * 0.64;
+  const directionOffset = iconSize * 0.4;
+  const crossAxisOffset = iconSize / 2;
   if (axis === "horizontal") {
-    const tipX = centerX + (direction === "decrease" ? -1 : 1) * rect.width * 0.14;
-    const tailX = centerX + (direction === "decrease" ? 1 : -1) * rect.width * 0.14;
+    const tipX = centerX + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailX = centerX + (direction === "decrease" ? 1 : -1) * directionOffset;
     context.moveTo(tipX, centerY);
-    context.lineTo(tailX, centerY - rect.height * 0.22);
-    context.lineTo(tailX, centerY + rect.height * 0.22);
+    context.lineTo(tailX, centerY - crossAxisOffset);
+    context.lineTo(tailX, centerY + crossAxisOffset);
   } else {
-    const tipY = centerY + (direction === "decrease" ? -1 : 1) * rect.height * 0.14;
-    const tailY = centerY + (direction === "decrease" ? 1 : -1) * rect.height * 0.14;
+    const tipY = centerY + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailY = centerY + (direction === "decrease" ? 1 : -1) * directionOffset;
     context.moveTo(centerX, tipY);
-    context.lineTo(centerX - rect.width * 0.22, tailY);
-    context.lineTo(centerX + rect.width * 0.22, tailY);
+    context.lineTo(centerX - crossAxisOffset, tailY);
+    context.lineTo(centerX + crossAxisOffset, tailY);
   }
   context.closePath();
   context.fill();
@@ -2895,25 +3077,22 @@ function drawPivotGridRect(context, rect, color, options) {
   context.stroke();
   context.restore();
 }
-function drawPivotViewportRightBorder(context, rect, color) {
-  const x = rect.x + rect.width - 0.5;
-  context.save();
-  context.strokeStyle = color;
-  context.lineWidth = 1;
-  context.beginPath();
-  context.moveTo(x, rect.y);
-  context.lineTo(x, rect.y + rect.height);
-  context.stroke();
-  context.restore();
+function clipPivotViewport(context, rect, radius = 8) {
+  appendRoundedRectPath(context, rect, radius);
+  context.clip();
 }
-function drawPivotViewportBottomBorder(context, rect, color) {
-  const y = rect.y + rect.height - 0.5;
+function drawPivotViewportBorder(context, rect, color, radius = 8) {
+  const borderRect = {
+    x: rect.x + 0.5,
+    y: rect.y + 0.5,
+    width: Math.max(rect.width - 1, 0),
+    height: Math.max(rect.height - 1, 0)
+  };
+  if (borderRect.width <= 0 || borderRect.height <= 0) return;
   context.save();
   context.strokeStyle = color;
   context.lineWidth = 1;
-  context.beginPath();
-  context.moveTo(rect.x, y);
-  context.lineTo(rect.x + rect.width, y);
+  appendRoundedRectPath(context, borderRect, radius);
   context.stroke();
   context.restore();
 }
@@ -2931,6 +3110,21 @@ function drawPivotHeaderBoundaries(context, options, color) {
   context.stroke();
   context.restore();
 }
+function appendRoundedRectPath(context, rect, radius) {
+  const nextRadius = Math.max(
+    Math.min(radius, rect.width / 2, rect.height / 2),
+    0
+  );
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  context.beginPath();
+  context.moveTo(rect.x + nextRadius, rect.y);
+  context.arcTo(right, rect.y, right, bottom, nextRadius);
+  context.arcTo(right, bottom, rect.x, bottom, nextRadius);
+  context.arcTo(rect.x, bottom, rect.x, rect.y, nextRadius);
+  context.arcTo(rect.x, rect.y, right, rect.y, nextRadius);
+  context.closePath();
+}
 
 // src/domain/layout/sticky-row-header.ts
 function resolveStickyRowHeaderContentRect(params) {
@@ -2967,7 +3161,15 @@ function renderPivotTable(params) {
     activeNodePathKey
   );
   const areaSelection = isPivotAreaSelection(layout, params.selection);
+  const viewportWidth = resolvePivotViewportWidth(layout);
   context.clearRect(0, 0, layout.width, layout.height);
+  context.save();
+  clipPivotViewport(context, {
+    x: 0,
+    y: 0,
+    width: viewportWidth,
+    height: layout.height
+  });
   context.font = `${theme.fontSize}px ${theme.fontFamily}`;
   context.textBaseline = "middle";
   withClip(context, layout.reportFilterRect, () => {
@@ -3081,17 +3283,13 @@ function renderPivotTable(params) {
     theme.borderColor
   );
   if (options.debug) drawDebugOverlay(context, layout, theme);
-  drawPivotScrollbars(context, layout.scrollbar);
-  drawPivotViewportRightBorder(
-    context,
-    { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
-    theme.borderColor
-  );
-  drawPivotViewportBottomBorder(
-    context,
-    { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
-    theme.borderColor
-  );
+  drawPivotScrollbars(context, layout.scrollbar, theme.borderColor, {
+    top: 0,
+    height: contentHeight,
+    headerBottom: layout.bodyRect.y,
+    headerBackgroundColor: theme.columnHeaderBackgroundColor,
+    bodyBackgroundColor: theme.backgroundColor
+  });
   const selectionRect = resolvePivotSelectionRect(layout, params.selection);
   if (selectionRect) {
     const selectionClipRect = resolvePivotSelectionClipRect(
@@ -3109,11 +3307,22 @@ function renderPivotTable(params) {
   if (params.resizeGuideX != null) {
     drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
   }
+  context.restore();
+  drawPivotViewportBorder(
+    context,
+    { x: 0, y: 0, width: viewportWidth, height: contentHeight },
+    theme.borderColor
+  );
   return {
     headerCellCount: layout.reportFilterCells.length + layout.rowFieldHeaderCells.length + layout.rowHeaderCells.length + layout.columnHeaderCells.length,
     bodyCellCount: layout.bodyCells.length
   };
 }
+function resolvePivotViewportWidth(layout) {
+  const horizontalRight = layout.scrollbar.horizontal ? layout.scrollbar.horizontal.increaseButton.x + layout.scrollbar.horizontal.increaseButton.width : 0;
+  const verticalRight = layout.scrollbar.vertical ? layout.scrollbar.vertical.decreaseButton.x + layout.scrollbar.vertical.decreaseButton.width : 0;
+  return Math.max(layout.tableWidth, horizontalRight, verticalRight);
+}
 function drawPivotResizeGuide(context, x, height) {
   context.save();
   context.strokeStyle = "#1677ff";
@@ -3599,7 +3808,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const bodyCell = layout.bodyCells.find((cell) => contains(cell.rect, x, y));
+  const bodyCell = findLastContaining(layout.bodyCells, x, y);
   if (bodyCell) {
     return {
       region: "body",
@@ -3609,9 +3818,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const rowHeaderCell = layout.rowHeaderCells.find(
-    (cell) => contains(cell.rect, x, y)
-  );
+  const rowHeaderCell = findLastContaining(layout.rowHeaderCells, x, y);
   if (rowHeaderCell) {
     return {
       region: "rowHeader",
@@ -3664,6 +3871,13 @@ function isSortIconHit(cell, x) {
 function contains(rect, x, y) {
   return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
 }
+function findLastContaining(cells, x, y) {
+  for (let index = cells.length - 1; index >= 0; index -= 1) {
+    const cell = cells[index];
+    if (cell && contains(cell.rect, x, y)) return cell;
+  }
+  return void 0;
+}
 
 // src/interaction/text-selection.ts
 function resolvePivotTextOffset(params) {
@@ -3862,6 +4076,16 @@ function hitTestPivotScrollbar(layout, x, y) {
   }
   return null;
 }
+function resolvePivotScrollbarTrackScroll(params) {
+  const movableLength = Math.max(params.trackLength - params.thumbLength, 0);
+  if (movableLength === 0) return 0;
+  const thumbStart = utils.clamp(
+    params.pointerValue - params.thumbLength / 2,
+    params.trackStart,
+    params.trackStart + movableLength
+  );
+  return (thumbStart - params.trackStart) / movableLength * params.maxScroll;
+}
 function resolveRole(layout, x, y) {
   if (utils.isPointInRect(x, y, layout.thumb)) return "thumb";
   if (utils.isPointInRect(x, y, layout.decreaseButton)) return "decrease-button";
@@ -3900,6 +4124,16 @@ function createAddress(rowSlot, columnSlot, indicatorKey) {
 // src/domain/interaction/row-selection.ts
 function resolvePivotRowIndexAtY(layout, y) {
   if (layout.rowSlots.length === 0 || layout.rowHeight <= 0) return null;
+  const frozenRange = layout.frozenBottomRowRange;
+  if (frozenRange) {
+    const frozenTop = layout.bodyRect.y + layout.bodyRect.height - (frozenRange.end - frozenRange.start) * layout.rowHeight;
+    if (y >= frozenTop) {
+      return Math.min(
+        frozenRange.start + Math.floor((y - frozenTop) / layout.rowHeight),
+        frozenRange.end - 1
+      );
+    }
+  }
   const index = Math.floor(
     (y - layout.bodyRect.y + layout.scroll.top) / layout.rowHeight
   );
@@ -4018,6 +4252,8 @@ var PivotTable = class {
     __publicField(this, "wheelScrollTarget", null);
     __publicField(this, "wheelScrollFrameId", null);
     __publicField(this, "wheelScrollLastTime", 0);
+    __publicField(this, "continuousScrollTimer", null);
+    __publicField(this, "continuousScrollPointerId", null);
     __publicField(this, "resizeSession", null);
     __publicField(this, "resizeGuideX", null);
     __publicField(this, "suppressNextClick", false);
@@ -4096,6 +4332,7 @@ var PivotTable = class {
       this.scheduleRender();
     });
     __publicField(this, "handleClick", (event) => {
+      this.options.ui?.onContextMenuRequest?.(null);
       if (this.suppressNextClick) {
         this.suppressNextClick = false;
         return;
@@ -4414,6 +4651,8 @@ var PivotTable = class {
     });
     __publicField(this, "handlePointerUp", (event) => {
       if (!this.host) return;
+      const endedContinuousScroll = this.continuousScrollPointerId === event.pointerId;
+      if (endedContinuousScroll) this.stopContinuousScrollbarScroll();
       const endedCellSelection = this.cellSelectionDrag?.pointerId === event.pointerId;
       if (endedCellSelection) this.cellSelectionDrag = null;
       if (this.textSelectionDrag?.pointerId === event.pointerId) {
@@ -4432,7 +4671,7 @@ var PivotTable = class {
       if (this.scrollbarDrag?.pointerId === event.pointerId) {
         this.scrollbarDrag = null;
       }
-      if (!this.resizeSession && !this.scrollbarDrag && !endedCellSelection && !endedRowHeaderSelection && !this.host.root.hasPointerCapture(event.pointerId))
+      if (!this.resizeSession && !this.scrollbarDrag && !endedContinuousScroll && !endedCellSelection && !endedRowHeaderSelection && !this.host.root.hasPointerCapture(event.pointerId))
         return;
       if (this.host.root.hasPointerCapture(event.pointerId)) {
         this.host.root.releasePointerCapture(event.pointerId);
@@ -4605,11 +4844,16 @@ var PivotTable = class {
       (slot) => (slot.nodeId ?? "") === address.columnNodeId && (!slot.indicatorKey || slot.indicatorKey === address.indicatorKey)
     );
     if (rowIndex < 0 || columnIndex < 0) return false;
-    const top = resolveVisibleOffset({
+    const frozenRange = this.layout.frozenBottomRowRange;
+    const frozenBottomHeight = frozenRange ? (frozenRange.end - frozenRange.start) * this.layout.rowHeight : 0;
+    const top = frozenRange && rowIndex >= frozenRange.start ? this.scroll.top : resolveVisibleOffset({
       current: this.scroll.top,
       itemStart: rowIndex * this.layout.rowHeight,
       itemSize: this.layout.rowHeight,
-      viewportSize: this.layout.bodyRect.height
+      viewportSize: Math.max(
+        this.layout.bodyRect.height - frozenBottomHeight,
+        0
+      )
     });
     const left = resolveVisibleOffset({
       current: this.scroll.left,
@@ -4673,6 +4917,7 @@ var PivotTable = class {
     if (this.frameId !== null) cancelAnimationFrame(this.frameId);
     this.frameId = null;
     this.stopWheelScrollSmoothing();
+    this.stopContinuousScrollbarScroll();
     this.stopResizeObserver?.();
     this.stopResizeObserver = null;
     this.host?.root.removeEventListener("pointermove", this.handlePointerMove);
@@ -5041,17 +5286,27 @@ var PivotTable = class {
     event.preventDefault();
     this.suppressNextClick = true;
     if (hit.role === "decrease-button" || hit.role === "increase-button") {
-      this.stepScrollbar(hit.axis, hit.role === "decrease-button" ? -1 : 1);
+      this.startContinuousScrollbarScroll(
+        hit.axis,
+        hit.role === "decrease-button" ? -1 : 1,
+        event.pointerId
+      );
+      this.host.root.setPointerCapture(event.pointerId);
       return;
     }
     const rootRect = this.host.root.getBoundingClientRect();
     const pointer = hit.axis === "horizontal" ? event.clientX - rootRect.left : event.clientY - rootRect.top;
     if (hit.role === "track") {
-      const thumbStart2 = hit.axis === "horizontal" ? axisLayout.thumb.x : axisLayout.thumb.y;
-      const direction = pointer < thumbStart2 ? -1 : 1;
+      const nextScroll = resolvePivotScrollbarTrackScroll({
+        pointerValue: pointer,
+        trackStart: hit.axis === "horizontal" ? axisLayout.track.x : axisLayout.track.y,
+        trackLength: hit.axis === "horizontal" ? axisLayout.track.width : axisLayout.track.height,
+        thumbLength: hit.axis === "horizontal" ? axisLayout.thumb.width : axisLayout.thumb.height,
+        maxScroll: hit.axis === "horizontal" ? this.layout.viewport.maxScrollLeft : this.layout.viewport.maxScrollTop
+      });
       this.applyScrollPosition(
-        this.scroll.left + (hit.axis === "horizontal" ? direction * this.layout.bodyRect.width : 0),
-        this.scroll.top + (hit.axis === "vertical" ? direction * this.layout.bodyRect.height : 0)
+        hit.axis === "horizontal" ? nextScroll : this.scroll.left,
+        hit.axis === "vertical" ? nextScroll : this.scroll.top
       );
       return;
     }
@@ -5095,6 +5350,21 @@ var PivotTable = class {
       this.scroll.top + (axis === "vertical" ? direction * this.layout.rowHeight : 0)
     );
   }
+  startContinuousScrollbarScroll(axis, direction, pointerId) {
+    this.stopContinuousScrollbarScroll();
+    this.continuousScrollPointerId = pointerId;
+    this.stepScrollbar(axis, direction);
+    this.continuousScrollTimer = setInterval(() => {
+      this.stepScrollbar(axis, direction);
+    }, 80);
+  }
+  stopContinuousScrollbarScroll() {
+    if (this.continuousScrollTimer !== null) {
+      clearInterval(this.continuousScrollTimer);
+      this.continuousScrollTimer = null;
+    }
+    this.continuousScrollPointerId = null;
+  }
   applyScrollPosition(left, top) {
     if (!this.layout) return;
     const next = {