@canvas-components/list-table 0.3.2 → 0.3.3

package/dist/index.cjs

@@ -335,6 +335,30 @@ function stretchColumnWidths(columns, containerWidth) {
     stretchableColumns[stretchableColumns.length - 1].width += remain;
   }
 }
+function shrinkColumnWidthsToFit(columns, containerWidth) {
+  let remaining = Math.max(
+    Math.ceil(computeColumnWidths(columns) - containerWidth),
+    0
+  );
+  let shrinkableColumns = columns.filter(
+    (column) => column.width > column.minWidth
+  );
+  while (remaining > 0 && shrinkableColumns.length > 0) {
+    const share = Math.max(Math.floor(remaining / shrinkableColumns.length), 1);
+    shrinkableColumns.forEach((column) => {
+      if (remaining <= 0) {
+        return;
+      }
+      const shrink = Math.min(column.width - column.minWidth, share, remaining);
+      column.width -= shrink;
+      remaining -= shrink;
+    });
+    shrinkableColumns = shrinkableColumns.filter(
+      (column) => column.width > column.minWidth
+    );
+  }
+  return remaining === 0;
+}
 
 // src/domain/columns/flatten-leaf-columns.ts
 function flattenLeafColumns(columns) {
@@ -3218,7 +3242,7 @@ function drawBodyButtonContent(params) {
   const top = rect.y + (rect.height - height) / 2;
   const palette = resolveButtonPalette(content);
   const textIndent = resolveContentTextIndent(content);
-  const paddingInline = BUTTON_PADDING_INLINE_MAP[size];
+  const paddingInline = resolveButtonPaddingInline(content, size);
   const radius = BUTTON_RADIUS_MAP[size];
   ctx.save();
   ctx.globalAlpha *= resolveContentOpacity(content);
@@ -3326,9 +3350,12 @@ function measureButtonContentWidth(ctx, content, theme) {
   const intrinsicWidth = Math.max(
     ctx.measureText(content.text).width + resolveContentTextIndent(content),
     0
-  ) + BUTTON_PADDING_INLINE_MAP[size] * 2;
+  ) + resolveButtonPaddingInline(content, size) * 2;
   return resolveContentLayoutWidth(content, intrinsicWidth);
 }
+function resolveButtonPaddingInline(content, size) {
+  return content.buttonType === "link" || content.buttonType === "text" ? 4 : BUTTON_PADDING_INLINE_MAP[size];
+}
 function measureButtonContentHeight(content) {
   return BUTTON_HEIGHT_MAP[resolveButtonSize(content.size)];
 }
@@ -6855,7 +6882,7 @@ function expandBodyContents(contents) {
     expanded.push({
       content,
       contentIndex,
-      gapBefore: expanded.length === 0 || textOnly ? 0 : previousContent?.type === "link" && content.type === "link" ? LINK_CONTENT_GAP : CONTENT_GAP
+      gapBefore: expanded.length === 0 || textOnly ? 0 : resolveInlineContentGap(previousContent, content)
     });
     if ((content.type === "checkbox" || content.type === "radio") && content.label) {
       const textLabelContent = {
@@ -6874,6 +6901,12 @@ function expandBodyContents(contents) {
   });
   return expanded;
 }
+function resolveInlineContentGap(previous, current) {
+  return isInlineActionContent(previous) && isInlineActionContent(current) ? LINK_CONTENT_GAP : CONTENT_GAP;
+}
+function isInlineActionContent(content) {
+  return content?.type === "link" || content?.type === "button" && (content.buttonType === "link" || content.buttonType === "text");
+}
 function buildSingleLineLayout(ctx, contents, availableWidth, theme) {
   const line = {
     items: [],
@@ -10463,7 +10496,7 @@ var ListTableCarouselController = class {
 var SUMMARY_ASYNC_BATCH_SIZE = 2e3;
 var SUMMARY_ASYNC_FRAME_BUDGET = 8;
 async function computeSummaryValuesAsync(params) {
-  const { rows, columns, signal } = params;
+  const { rows, columns, mergeCell, signal } = params;
   const summaryValues = /* @__PURE__ */ new Map();
   const accumulators = [];
   columns.forEach((column) => {
@@ -10516,8 +10549,14 @@ async function computeSummaryValuesAsync(params) {
     }
     startIndex = endIndex;
   }
+  const mergedRowCount = accumulators.some(
+    (item) => item.type === "mergedRowCount"
+  ) ? countMergedRows(rows, columns, mergeCell) : null;
   accumulators.forEach((item) => {
-    summaryValues.set(item.column.key, finalizeSummaryValue(item, rows));
+    summaryValues.set(
+      item.column.key,
+      finalizeSummaryValue(item, rows, mergedRowCount)
+    );
   });
   return summaryValues;
 }
@@ -10572,7 +10611,7 @@ function updateSummaryAccumulator(item, record) {
     item.max = numericValue;
   }
 }
-function finalizeSummaryValue(item, rows) {
+function finalizeSummaryValue(item, rows, mergedRowCount) {
   if (item.column.summaryTitle != null) {
     return item.column.summaryTitle;
   }
@@ -10580,7 +10619,11 @@ function finalizeSummaryValue(item, rows) {
     return formatSummaryOutput(item, String(rows.length), rows);
   }
   if (item.type === "mergedRowCount") {
-    return formatSummaryOutput(item, String(countMergedRows(rows)), rows);
+    return formatSummaryOutput(
+      item,
+      String(mergedRowCount ?? rows.length),
+      rows
+    );
   }
   if (item.type === "count") {
     return formatSummaryOutput(item, String(item.valueCount), rows);
@@ -10671,7 +10714,76 @@ function formatSummaryOutput(item, value, rows) {
   }
   return value;
 }
-function countMergedRows(rows) {
+function countMergedRows(rows, columns, mergeCell) {
+  const coveredRowIndexes = /* @__PURE__ */ new Set();
+  const explicitRowSpans = /* @__PURE__ */ new Map();
+  columns.forEach((column) => {
+    if (!column.onCell) {
+      return;
+    }
+    rows.forEach((record, rowIndex) => {
+      const value = utils.getValueByDataIndex(record, column.dataIndex);
+      const span = column.onCell?.(value, record, rowIndex, column);
+      if (!span || !Object.prototype.hasOwnProperty.call(span, "rowSpan")) {
+        return;
+      }
+      const rowSpan = span.rowSpan ?? 1;
+      explicitRowSpans.set(`${rowIndex}::${column.key}`, rowSpan);
+      if (rowSpan === 0) {
+        coveredRowIndexes.add(rowIndex);
+        return;
+      }
+      if (!Number.isFinite(rowSpan) || rowSpan <= 1) {
+        return;
+      }
+      const spanEnd = Math.min(
+        rows.length,
+        rowIndex + Math.floor(rowSpan)
+      );
+      for (let index = rowIndex + 1; index < spanEnd; index += 1) {
+        coveredRowIndexes.add(index);
+      }
+    });
+  });
+  const rowMergeRule = mergeCell?.row;
+  const targetDataIndexes = rowMergeRule?.columns?.length ? rowMergeRule.columns : rowMergeRule?.keys;
+  const targetMergeColumns = columns.filter(
+    (column) => targetDataIndexes?.some(
+      (dataIndex) => utils.isSameDataIndex(column.dataIndex, dataIndex)
+    )
+  );
+  if (rowMergeRule?.keys.length && targetMergeColumns.length) {
+    targetMergeColumns.forEach((column) => {
+      let rowIndex = 0;
+      while (rowIndex < rows.length) {
+        if (explicitRowSpans.has(`${rowIndex}::${column.key}`)) {
+          rowIndex += 1;
+          continue;
+        }
+        const currentGroupKey = getMergeGroupKey(
+          rows[rowIndex],
+          rowMergeRule.keys
+        );
+        let rowSpan = 1;
+        for (let index = rowIndex + 1; index < rows.length; index += 1) {
+          if (explicitRowSpans.has(`${index}::${column.key}`)) {
+            break;
+          }
+          if (getMergeGroupKey(rows[index], rowMergeRule.keys) !== currentGroupKey) {
+            break;
+          }
+          rowSpan += 1;
+        }
+        for (let index = rowIndex + 1; index < rowIndex + rowSpan; index += 1) {
+          coveredRowIndexes.add(index);
+        }
+        rowIndex += rowSpan;
+      }
+    });
+  }
+  if (coveredRowIndexes.size > 0) {
+    return rows.length - coveredRowIndexes.size;
+  }
   return rows.reduce((count, record) => {
     if (record == null || typeof record !== "object") {
       return count + 1;
@@ -10683,6 +10795,20 @@ function countMergedRows(rows) {
     return rowSpan > 0 ? count + 1 : count;
   }, 0);
 }
+function getMergeGroupKey(record, keys) {
+  return keys.map(
+    (dataIndex) => normalizeMergeValue(utils.getValueByDataIndex(record, dataIndex))
+  ).join("|");
+}
+function normalizeMergeValue(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value) ?? "";
+}
 function yieldToMainThread() {
   return new Promise((resolve) => {
     if (typeof requestAnimationFrame === "function") {
@@ -20191,6 +20317,10 @@ function buildListTableRenderSnapshot(params) {
     groupedColumnKeys
   );
   const leafColumns = flattenLeafColumns(normalizedColumns);
+  const totalColumnWidth = computeColumnWidths(leafColumns);
+  if (width > 0 && totalColumnWidth > width && totalColumnWidth <= hostWidth) {
+    shrinkColumnWidthsToFit(leafColumns, width);
+  }
   if (options.stretchColumns !== false && width > 0 && !draggingResize) {
     stretchColumnWidths(leafColumns, width);
   }
@@ -20734,8 +20864,8 @@ function updateListTableRenderSnapshotScroll(params) {
   } : snapshot.frozenRows;
   return {
     ...snapshot,
-    width,
-    height,
+    width: snapshot.width,
+    height: snapshot.height,
     columnSegments,
     headerRows,
     scrollbarLayout,
@@ -21120,13 +21250,8 @@ function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, inte
       verticalFrame.bodyBackgroundColor
     );
   }
-  if (layout.vertical && verticalFrame) {
-    drawVerticalScrollbarFrame(
-      ctx,
-      layout.vertical,
-      verticalFrame,
-      borderColor
-    );
+  if (verticalFrame) {
+    drawVerticalScrollbarFrame(ctx, verticalFrame, borderColor);
   }
   if (layout.horizontal) {
     drawAxisScrollbar(
@@ -21244,28 +21369,28 @@ function drawTrackBorder(ctx, rect, axis, borderColor) {
   ctx.stroke();
   ctx.restore();
 }
-function drawVerticalScrollbarFrame(ctx, layout, frame, borderColor) {
-  const left = Math.round(layout.decreaseButton.x) + 0.5;
-  const right = Math.round(layout.decreaseButton.x + layout.decreaseButton.width) - 0.5;
+function drawVerticalScrollbarFrame(ctx, frame, borderColor) {
+  const left = Math.round(frame.x) + 0.5;
+  const right = Math.round(frame.x + frame.width) - 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 (right <= left || bottom <= top) {
+  if (frame.width <= 0 || right <= left || bottom <= top) {
     return;
   }
   ctx.save();
   ctx.fillStyle = frame.headerBackgroundColor;
   ctx.fillRect(
-    layout.decreaseButton.x,
+    frame.x,
     frame.top,
-    layout.decreaseButton.width,
+    frame.width,
     Math.max(frame.headerBottom - frame.top, 0)
   );
   ctx.fillStyle = frame.bodyBackgroundColor;
   ctx.fillRect(
-    layout.decreaseButton.x,
+    frame.x,
     frame.headerBottom,
-    layout.decreaseButton.width,
+    frame.width,
     Math.max(frame.top + frame.height - frame.headerBottom, 0)
   );
   ctx.strokeStyle = borderColor;
@@ -22111,7 +22236,7 @@ function buildAutoRowSpanMap(rows, columns, rule, spanConfigMap, sourceRowIndexM
         rowIndex += 1;
         continue;
       }
-      const currentGroupKey = getMergeGroupKey(rows[rowIndex], groupKeys);
+      const currentGroupKey = getMergeGroupKey2(rows[rowIndex], groupKeys);
       let rowSpan = 1;
       for (let index = rowIndex + 1; index < rows.length; index += 1) {
         if (sourceRowIndexMap[index] !== (sourceRowIndexMap[index - 1] ?? index - 1) + 1) {
@@ -22121,7 +22246,7 @@ function buildAutoRowSpanMap(rows, columns, rule, spanConfigMap, sourceRowIndexM
         if (hasExplicitSpan(spanConfigMap.get(nextCellKey), "rowSpan")) {
           break;
         }
-        if (getMergeGroupKey(rows[index], groupKeys) !== currentGroupKey) {
+        if (getMergeGroupKey2(rows[index], groupKeys) !== currentGroupKey) {
           break;
         }
         rowSpan += 1;
@@ -22224,13 +22349,13 @@ function clampSpan(span, max) {
   }
   return Math.max(1, Math.min(Math.floor(span), max));
 }
-function getMergeGroupKey(record, keys) {
+function getMergeGroupKey2(record, keys) {
   if (!keys?.length) {
     return "";
   }
-  return keys.map((key) => normalizeMergeValue(utils.getValueByDataIndex(record, key))).join("|");
+  return keys.map((key) => normalizeMergeValue2(utils.getValueByDataIndex(record, key))).join("|");
 }
-function normalizeMergeValue(value) {
+function normalizeMergeValue2(value) {
   if (value == null) {
     return "";
   }
@@ -22240,7 +22365,7 @@ function normalizeMergeValue(value) {
   return JSON.stringify(value) ?? "";
 }
 function isSameMergeValue(left, right) {
-  return normalizeMergeValue(left) === normalizeMergeValue(right);
+  return normalizeMergeValue2(left) === normalizeMergeValue2(right);
 }
 function getMergedCellWidth(columns, startIndex, colSpan) {
   let width = 0;
@@ -24503,6 +24628,11 @@ function executeListTableRenderPipeline(params) {
     scrollbarOpacity,
     isScrollbarInteractive,
     {
+      x: width,
+      width: options.scrollbar?.visible === false ? 0 : Math.max(
+        options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
+        6
+      ),
       top: 0,
       height,
       headerBottom: headerHeight,
@@ -26004,6 +26134,7 @@ var ListTableSummaryController = class {
     const summaryTask = computeSummaryValuesAsync({
       rows: snapshot.displayRows,
       columns: snapshot.leafColumns,
+      mergeCell: this.options.getOptions().query?.mergeCell,
       signal
     }).then((summaryValues) => {
       if (signal.aborted || taskId !== this.summaryTaskId) {