@canvas-components/list-table 0.3.20 → 0.3.22

package/dist/index.cjs

@@ -951,15 +951,23 @@ function setColumnFixed(columns, targetKey, direction, initialColumns) {
   }
   updateColumnFixed(columns, targetKey, direction, initialColumns);
 }
-function setNestedColumnWidth(columns, targetKey, newWidth) {
+function setNestedColumnWidth(columns, targetKey, newWidth, expandMaxWidth = false) {
   ensureColumnKeysInPlace(columns);
   for (const column of columns) {
     if (column.key === targetKey) {
       column.width = newWidth;
+      if (expandMaxWidth && newWidth > (column.maxWidth ?? DEFAULT_MAX_WIDTH)) {
+        column.maxWidth = newWidth;
+      }
       return;
     }
     if (column.children?.length) {
-      setNestedColumnWidth(column.children, targetKey, newWidth);
+      setNestedColumnWidth(
+        column.children,
+        targetKey,
+        newWidth,
+        expandMaxWidth
+      );
     }
   }
 }
@@ -1506,6 +1514,7 @@ var ListTableDomHost = class {
     wrapper.style.display = "flex";
     wrapper.style.flexDirection = "column";
     wrapper.style.minWidth = "0";
+    wrapper.style.maxWidth = "100%";
     wrapper.style.boxSizing = "border-box";
     wrapper.style.overflow = "visible";
     const contentLayer = document.createElement("div");
@@ -8359,7 +8368,7 @@ function resolveHeaderTextLayout(params) {
       Math.min(baseX - textLeft, textRight - baseX) * 2,
       0
     );
-    if (centeredWidth >= 12) {
+    if (centeredWidth >= Math.max(params.contentWidth ?? 0, 12)) {
       return {
         align,
         x: baseX,
@@ -9135,7 +9144,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
   const fontSize = style?.fontSize ?? theme.fontSize;
   const paddingInline = style?.paddingInline ?? 12;
   const paddingBlock = style?.paddingBlock ?? 0;
-  const textY = style?.verticalAlign === "top" ? rect.y + paddingBlock + fontSize / 2 : style?.verticalAlign === "bottom" ? rect.y + rect.height - paddingBlock - fontSize / 2 : rect.y + rect.height / 2;
+  const centerY = style?.verticalAlign === "top" ? rect.y + paddingBlock + fontSize / 2 : style?.verticalAlign === "bottom" ? rect.y + rect.height - paddingBlock - fontSize / 2 : rect.y + rect.height / 2;
   if (!cellClip) {
     ctx.restore();
     return;
@@ -9160,7 +9169,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
     ctx.clip();
     ctx.fillStyle = style?.color ?? theme.headerTextColor;
     ctx.font = `${style?.fontWeight ?? "600"} ${fontSize}px ${style?.fontFamily ?? theme.fontFamily}`;
-    ctx.textBaseline = "middle";
+    ctx.textBaseline = "alphabetic";
     const align = style?.textAlign ?? column.align ?? "left";
     ctx.textAlign = align;
     const contentInsetStart = column.key === inlineContentInset?.columnKey ? inlineContentInset.width : 0;
@@ -9181,9 +9190,15 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       visibleRect,
       padding: paddingInline
     });
-    const textWidth = ctx.measureText(displayText).width;
+    const bounds = measureTextBounds(ctx, displayText);
+    const textY = resolveCenteredTextBaselineY({
+      centerY,
+      ascent: bounds.ascent,
+      descent: bounds.descent
+    });
+    const textWidth = bounds.width;
     const textOriginX = textX - (align === "right" ? textWidth : align === "center" ? textWidth / 2 : 0);
-    const textTop = textY - fontSize / 2;
+    const textTop = textY - bounds.ascent;
     const fragmentKey = `summary:${column.key}`;
     drawSelectableTextSelectionBackground({
       ctx,
@@ -9191,7 +9206,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       textSelection,
       textOriginX,
       textTop,
-      textHeight: fontSize,
+      textHeight: bounds.height,
       rowIndex: Number.MAX_SAFE_INTEGER,
       columnKey: column.key,
       contentIndex: 0,
@@ -9211,7 +9226,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
           x: textOriginX,
           y: textTop,
           width: textWidth,
-          height: fontSize
+          height: bounds.height
         },
         cellClip
       ) ?? void 0,
@@ -11325,12 +11340,24 @@ function drawBodyTagContent(params) {
   const textColor = resolveTagTextColor(content, palette.textColor);
   const textIndent = resolveContentTextIndent(content);
   const paddingInline = content.paddingInline ?? TAG_HORIZONTAL_PADDING;
+  const drawLeft = Math.round(cursorX);
+  const drawTop = Math.round(top);
+  const drawWidth = Math.max(Math.round(cursorX + width) - drawLeft, 1);
+  const drawHeight = Math.max(Math.round(top + height) - drawTop, 1);
   ctx.save();
   ctx.globalAlpha *= resolveContentOpacity(content);
-  drawRoundedRectPath2(ctx, cursorX, top, width, height, radius);
+  drawRoundedRectPath2(ctx, drawLeft, drawTop, drawWidth, drawHeight, radius);
   ctx.fillStyle = content.style?.backgroundColor ?? palette.backgroundColor;
   ctx.fill();
   if (bordered) {
+    drawRoundedRectPath2(
+      ctx,
+      drawLeft + 0.5,
+      drawTop + 0.5,
+      Math.max(drawWidth - 1, 0),
+      Math.max(drawHeight - 1, 0),
+      Math.max(radius - 0.5, 0)
+    );
     ctx.strokeStyle = palette.borderColor;
     ctx.lineWidth = 1;
     ctx.stroke();
@@ -26080,18 +26107,58 @@ function autoFitListTableColumnWidths(params) {
       );
     }
     const nextWidth = Math.ceil(
-      utils.clamp(measuredWidth, column.minWidth, column.maxWidth)
+      params.fillContainerWidth == null ? utils.clamp(measuredWidth, column.minWidth, column.maxWidth) : Math.max(measuredWidth, column.minWidth)
     );
     column.width = nextWidth;
-    setNestedColumnWidth(options.columns, column.key, nextWidth);
+    if (params.fillContainerWidth != null) {
+      column.maxWidth = Math.max(column.maxWidth, nextWidth);
+    }
+    setNestedColumnWidth(
+      options.columns,
+      column.key,
+      nextWidth,
+      params.fillContainerWidth != null
+    );
     fitted = true;
   });
+  if (fitted && params.fillContainerWidth != null) {
+    const hostWidth = params.hostWidth;
+    const measuredTotalWidth = leafColumns.reduce(
+      (sum, column) => sum + column.width,
+      0
+    );
+    const shouldPreserveOverflow = hostWidth != null && measuredTotalWidth > params.fillContainerWidth && measuredTotalWidth <= hostWidth;
+    fillAutoFitColumnWidths(leafColumns, params.fillContainerWidth);
+    if (shouldPreserveOverflow && hostWidth != null) {
+      fillAutoFitColumnWidths(leafColumns, Math.ceil(hostWidth) + 1);
+    }
+    leafColumns.forEach((column) => {
+      if (!isSystemColumnKey(column.key)) {
+        setNestedColumnWidth(options.columns, column.key, column.width, true);
+      }
+    });
+  }
   ctx.restore();
   if (fitted) {
     options.stretchColumns = false;
   }
   return fitted;
 }
+function fillAutoFitColumnWidths(columns, containerWidth) {
+  let remaining = Math.max(
+    Math.round(
+      containerWidth - columns.reduce((sum, column) => sum + column.width, 0)
+    ),
+    0
+  );
+  const candidates = columns.filter((column) => !isSystemColumnKey(column.key));
+  candidates.forEach((column, index) => {
+    const extra = Math.ceil(remaining / (candidates.length - index));
+    column.width += extra;
+    column.maxWidth = Math.max(column.maxWidth, column.width);
+    remaining -= extra;
+  });
+}
 function resolveAutoFitMeasureRows(rows, range = {}) {
   if (rows.length === 0) {
     return [];
@@ -26308,6 +26375,10 @@ function createListTableContextMenuActions(params) {
       params.hideMenu();
       params.onAutoFitAllColumns?.();
     } : void 0,
+    onAutoFitFillContainer: params.onAutoFitFillContainer ? () => {
+      params.hideMenu();
+      params.onAutoFitFillContainer?.();
+    } : void 0,
     onToggleGroupingBar: params.onToggleGroupingBar ? () => {
       params.hideMenu();
       params.onToggleGroupingBar?.();
@@ -26537,6 +26608,7 @@ function buildListTableContextMenuConfig(params) {
     onResetDataFormat: enableReset && isTableSettingsArea ? actions.onResetDataFormat : void 0,
     onAutoFitCurrentColumn: enableColumnWidth && isHeaderArea && !isSelectionColumn && actions.onAutoFitCurrentColumn ? () => actions.onAutoFitCurrentColumn?.(columnKey) : void 0,
     onAutoFitAllColumns: enableColumnWidth && isTableSettingsArea && !isSelectionColumn && actions.onAutoFitAllColumns ? actions.onAutoFitAllColumns : void 0,
+    onAutoFitFillContainer: enableColumnWidth && isTableSettingsArea && !isSelectionColumn && actions.onAutoFitFillContainer ? actions.onAutoFitFillContainer : void 0,
     groupingBarVisible,
     onToggleGroupingBar: enableGrouping && (isTableSettingsArea || groupingBarArea) ? actions.onToggleGroupingBar : void 0,
     onChangeDensity: enableDensity ? actions.onChangeDensity : void 0,
@@ -26745,6 +26817,7 @@ function showHeaderContextMenu(params) {
     onResetDataFormat,
     onAutoFitCurrentColumn,
     onAutoFitAllColumns,
+    onAutoFitFillContainer,
     groupingBarVisible,
     groupingBarArea,
     onToggleGroupingBar,
@@ -26858,6 +26931,7 @@ function showHeaderContextMenu(params) {
         onResetDataFormat,
         onAutoFitCurrentColumn,
         onAutoFitAllColumns,
+        onAutoFitFillContainer,
         onToggleGroupingBar,
         onChangeDensity,
         onChangeZoom,
@@ -26941,9 +27015,9 @@ function updateHeaderActionTooltip(params) {
   tooltip.show(tooltipPoint.x, tooltipPoint.y, text);
 }
 function showDragTooltip(params) {
-  const { tooltip, toViewportPoint, x, y, text } = params;
+  const { tooltip, toViewportPoint, x, y, text, variant } = params;
   const point = toViewportPoint(x, y + 16);
-  tooltip.show(point.x, point.y, text);
+  tooltip.show(point.x, point.y, text, variant);
 }
 
 // src/shared/utils/hit-result.ts
@@ -28635,6 +28709,9 @@ var ListTableEventController = class {
         onAutoFitAllColumns: () => {
           this.autoFitColumnWidths();
         },
+        onAutoFitFillContainer: () => {
+          this.autoFitColumnWidths(void 0, true);
+        },
         groupingBarVisible: this.host.groupBarVisible,
         groupingBarArea,
         onToggleGroupingBar: () => {
@@ -29138,7 +29215,8 @@ var ListTableEventController = class {
             toViewportPoint: (x, y) => this.host.toViewportPoint(x, y),
             x: dragPos.x,
             y: dragPos.y,
-            text: `${resizeResult.column.title}: ${resizeResult.nextWidth}px`
+            text: `${resizeResult.column.title}: ${resizeResult.nextWidth}px`,
+            variant: "resize"
           });
         }
         this.host.scheduleRender();
@@ -29854,7 +29932,7 @@ var ListTableEventController = class {
     } catch {
     }
   }
-  async autoFitColumnWidths(columnKey) {
+  async autoFitColumnWidths(columnKey, fillContainer = false) {
     const ctx = this.host.canvasElement?.getContext("2d");
     if (!ctx) {
       return;
@@ -29893,7 +29971,9 @@ var ListTableEventController = class {
       columnKeys,
       rowStartIndex: startIndex,
       rowEndIndex: endIndex,
-      summaryValues
+      summaryValues,
+      fillContainerWidth: fillContainer ? snapshot?.viewport.width ?? this.host.canvasElement?.clientWidth : void 0,
+      hostWidth: fillContainer ? this.host.canvasElement?.clientWidth || snapshot?.viewport.width : void 0
     });
     if (!changed) {
       return;