@ceed/cds 1.27.2 → 1.28.1

package/dist/index.js

@@ -1965,6 +1965,36 @@ import React25, {
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 
+// src/libs/text-measurer.ts
+var TextMeasurer = class {
+  constructor(font) {
+    const canvas = document.createElement("canvas");
+    this.ctx = canvas.getContext("2d");
+    if (this.ctx && font) this.ctx.font = font;
+  }
+  setFont(font) {
+    if (this.ctx) this.ctx.font = font;
+    return this;
+  }
+  setFontFromElement(el) {
+    if (this.ctx) this.ctx.font = getComputedStyle(el).font;
+    return this;
+  }
+  measureText(text) {
+    if (!this.ctx) return 0;
+    return this.ctx.measureText(text).width;
+  }
+  measureMaxWidth(values) {
+    if (!this.ctx) return 0;
+    let max = 0;
+    for (let i = 0; i < values.length; i++) {
+      const w = this.ctx.measureText(values[i]).width;
+      if (w > max) max = w;
+    }
+    return max;
+  }
+};
+
 // src/components/DataTable/utils.ts
 function extractFieldsFromGroupingModel(items) {
   const fields = /* @__PURE__ */ new Set();
@@ -2082,10 +2112,84 @@ function calculateColumnGroups(columnGroupingModel, columns, visibleFields) {
   const correctedMaxLevel = filteredGroupsByLevel.length > 0 ? filteredGroupsByLevel.length - 1 : -1;
   return { groups: filteredGroupsByLevel, maxLevel: correctedMaxLevel, fieldsInGroupingModel };
 }
+function parsePxValue(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (trimmed.endsWith("px")) {
+    const num = parseFloat(trimmed);
+    return isNaN(num) ? null : num;
+  }
+  return null;
+}
 function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+function computeHeaderWidth(headerEl) {
+  const thStyle = getComputedStyle(headerEl);
+  const paddingX = parseFloat(thStyle.paddingLeft) + parseFloat(thStyle.paddingRight);
+  const borderX = parseFloat(thStyle.borderLeftWidth) + parseFloat(thStyle.borderRightWidth);
+  const stack = headerEl.firstElementChild;
+  if (!stack) return paddingX;
+  const stackStyle = getComputedStyle(stack);
+  const gap = parseFloat(stackStyle.gap) || parseFloat(stackStyle.columnGap) || 0;
+  let totalChildWidth = 0;
+  let visibleChildCount = 0;
+  for (const child of Array.from(stack.children)) {
+    const el = child;
+    if (!el.offsetWidth && !el.offsetHeight) continue;
+    visibleChildCount++;
+    const textEl = el.querySelector?.('[data-slot="header-text"]') || (el.dataset?.slot === "header-text" ? el : null);
+    if (textEl) {
+      const htmlEl = textEl;
+      const isMultiLine = getComputedStyle(htmlEl).display === "-webkit-box";
+      if (isMultiLine) {
+        const measurer = new TextMeasurer();
+        measurer.setFontFromElement(htmlEl);
+        totalChildWidth += measurer.measureText(htmlEl.textContent || "");
+      } else {
+        totalChildWidth += htmlEl.scrollWidth;
+      }
+    } else {
+      totalChildWidth += el.offsetWidth;
+    }
+  }
+  const totalGaps = visibleChildCount > 1 ? (visibleChildCount - 1) * gap : 0;
+  return totalChildWidth + totalGaps + paddingX + borderX;
+}
+function computeBodyWidth(headerEl, table, field, dataInPage) {
+  const headId = headerEl.id;
+  const sampleTd = headId ? table.querySelector(`tbody td[headers="${CSS.escape(headId)}"]`) : null;
+  const styleSource = sampleTd || headerEl;
+  const tdStyle = getComputedStyle(styleSource);
+  const bodyPaddingX = parseFloat(tdStyle.paddingLeft) + parseFloat(tdStyle.paddingRight);
+  const bodyBorderX = parseFloat(tdStyle.borderLeftWidth) + parseFloat(tdStyle.borderRightWidth);
+  const measurer = new TextMeasurer();
+  measurer.setFont(tdStyle.font);
+  const texts = [];
+  for (let i = 0; i < dataInPage.length; i++) {
+    const val = dataInPage[i][field];
+    texts.push(val == null ? "" : String(val));
+  }
+  const maxTextWidth = measurer.measureMaxWidth(texts);
+  return maxTextWidth + bodyPaddingX + bodyBorderX;
+}
+function computeAutoFitWidth(params) {
+  const { headerEl, field, dataInPage } = params;
+  const table = headerEl.closest("table");
+  if (!table) return null;
+  const headerWidth = computeHeaderWidth(headerEl);
+  const bodyWidth = computeBodyWidth(headerEl, table, field, dataInPage);
+  let finalWidth = Math.ceil(Math.max(headerWidth, bodyWidth));
+  const thStyle = getComputedStyle(headerEl);
+  const resolvedMin = thStyle.minWidth;
+  const resolvedMax = thStyle.maxWidth;
+  const minPx = resolvedMin !== "none" ? parseFloat(resolvedMin) : NaN;
+  const maxPx = resolvedMax !== "none" ? parseFloat(resolvedMax) : NaN;
+  if (!isNaN(minPx) && minPx > 0) finalWidth = Math.max(finalWidth, minPx);
+  if (!isNaN(maxPx) && maxPx > 0) finalWidth = Math.min(finalWidth, maxPx);
+  return finalWidth;
+}
 
 // src/components/DataTable/styled.tsx
 import React17 from "react";
@@ -2196,7 +2300,7 @@ var StyledTd = styled8("td")(({ theme }) => ({
 var MotionSortIcon = motion17(SortIcon);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
 var DefaultNoRowsOverlay = () => /* @__PURE__ */ React17.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
-var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ React17.createElement(
+var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
     sx: {
@@ -2204,24 +2308,67 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ Rea
       top: 0,
       right: 0,
       bottom: 0,
-      width: "4px",
-      cursor: "col-resize"
+      width: "7px",
+      cursor: "col-resize",
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: "2px",
+        bgcolor: "transparent",
+        transition: "background-color 150ms ease"
+      },
+      "&:hover::after": {
+        bgcolor: "primary.300"
+      },
+      "&[data-resizing]::after": {
+        bgcolor: "primary.500"
+      }
     },
     onClick: (e) => e.stopPropagation(),
+    onDoubleClick: (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onAutoFit?.();
+    },
     onMouseDown: (e) => {
+      if (e.detail >= 2) return;
+      const resizerEl = e.currentTarget;
+      resizerEl.dataset.resizing = "";
       const initialX = e.clientX;
       const initialWidth = ref.current?.getBoundingClientRect().width;
-      onResizeStateChange?.(true);
+      let activated = false;
+      const DRAG_THRESHOLD = 3;
+      const thStyle = ref.current ? getComputedStyle(ref.current) : null;
+      const minW = thStyle ? parseFloat(thStyle.minWidth) : NaN;
+      const maxW = thStyle ? parseFloat(thStyle.maxWidth) : NaN;
       const onMouseMove = (e2) => {
-        if (initialWidth && initialX) {
-          ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
-          targetRef.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+        if (!initialWidth) return;
+        const delta = e2.clientX - initialX;
+        if (!activated) {
+          if (Math.abs(delta) < DRAG_THRESHOLD) return;
+          activated = true;
+          onResizeStateChange?.(true);
+        }
+        if (!ref.current || !targetRef.current) {
+          onMouseUp();
+          return;
         }
+        let newWidth = initialWidth + delta;
+        if (!isNaN(minW) && minW > 0) newWidth = Math.max(newWidth, minW);
+        if (!isNaN(maxW) && maxW > 0) newWidth = Math.min(newWidth, maxW);
+        ref.current.style.width = `${newWidth}px`;
+        targetRef.current.style.width = `${newWidth}px`;
       };
       const onMouseUp = () => {
+        resizerEl.removeAttribute("data-resizing");
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
-        requestAnimationFrame(() => onResizeStateChange?.(false));
+        if (activated) {
+          requestAnimationFrame(() => onResizeStateChange?.(false));
+        }
       };
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
@@ -2803,7 +2950,11 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/components.tsx
-var TextEllipsis = ({ children, lineClamp }) => {
+var TextEllipsis = ({
+  children,
+  lineClamp,
+  ...rest
+}) => {
   const textRef = useRef5(null);
   const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
@@ -2818,7 +2969,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp, ...rest }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef5(null);
@@ -2870,7 +3021,8 @@ var HeadCell = (props) => {
     headerRef,
     tableColRef,
     headerClassName,
-    headerLineClamp
+    headerLineClamp,
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -2887,10 +3039,15 @@ var HeadCell = (props) => {
   );
   const isResizingRef = useRef5(false);
   const resizer = useMemo8(
-    () => resizable ?? true ? Resizer(ref, colRef, (isResizing) => {
-      isResizingRef.current = isResizing;
-    }) : null,
-    [resizable, ref, colRef]
+    () => resizable ?? true ? Resizer(
+      ref,
+      colRef,
+      (isResizing) => {
+        isResizingRef.current = isResizing;
+      },
+      onAutoFit ? () => onAutoFit(field) : void 0
+    ) : null,
+    [resizable, ref, colRef, onAutoFit, field]
   );
   const style = useMemo8(
     () => ({
@@ -2978,7 +3135,7 @@ var HeadCell = (props) => {
       initial: "initial",
       className: computedHeaderClassName
     },
-    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center", sx: { minWidth: 0 } }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, { lineClamp: headerLineClamp }, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
+    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center", sx: { minWidth: 0 } }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, { lineClamp: headerLineClamp, "data-slot": "header-text" }, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };
@@ -3272,7 +3429,8 @@ function useDataTableRenderer({
   isRowSelectable,
   columnGroupingModel,
   columnVisibilityModel,
-  onColumnVisibilityModelChange
+  onColumnVisibilityModelChange,
+  checkboxSelection
 }) {
   if (pinnedColumns && columnGroupingModel) {
     throw new Error(
@@ -3305,6 +3463,14 @@ function useDataTableRenderer({
     [reorderedColumns, visibilityModel]
   );
   const visibleFieldSet = useMemo9(() => new Set(visibleColumns.map((c) => c.field)), [visibleColumns]);
+  const tableMinWidth = useMemo9(() => {
+    const DEFAULT_MIN = 50;
+    let total = checkboxSelection ? 40 : 0;
+    for (const col of visibleColumns) {
+      total += parsePxValue(col.minWidth) ?? parsePxValue(col.width) ?? DEFAULT_MIN;
+    }
+    return total;
+  }, [visibleColumns, checkboxSelection]);
   const allColumnsByField = useMemo9(
     () => reorderedColumns.reduce(
       (acc, curr) => ({
@@ -3525,6 +3691,25 @@ function useDataTableRenderer({
       prevRowsRef.current = _rows;
     }
   }, [_rows]);
+  const handleAutoFit = useCallback10(
+    (field) => {
+      const colDef = visibleColumnsByField[field];
+      if (!colDef?.headerRef.current) return;
+      const column = allColumnsByField[field];
+      const columnType = column && "type" in column ? column.type : void 0;
+      if (columnType === "actions") return;
+      const optimalWidth = computeAutoFitWidth({
+        headerEl: colDef.headerRef.current,
+        field,
+        dataInPage
+      });
+      if (optimalWidth == null) return;
+      const widthPx = `${optimalWidth}px`;
+      colDef.headerRef.current.style.width = widthPx;
+      if (colDef.tableColRef.current) colDef.tableColRef.current.style.width = widthPx;
+    },
+    [visibleColumnsByField, allColumnsByField, dataInPage]
+  );
   return {
     rowCount,
     selectableRowCount,
@@ -3536,6 +3721,7 @@ function useDataTableRenderer({
     BodyRow,
     dataInPage,
     handleSortChange,
+    handleAutoFit,
     isAllSelected,
     isTotalSelected,
     isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
@@ -3585,6 +3771,7 @@ function useDataTableRenderer({
       ]
     ),
     columns,
+    tableMinWidth,
     processedColumnGroups,
     onTotalSelect: useCallback10(() => {
       const selectableRows = rows.filter((row, i) => {
@@ -3966,6 +4153,7 @@ function Component(props, apiRef) {
     pageSize,
     onPaginationModelChange,
     handleSortChange,
+    handleAutoFit,
     dataInPage,
     isTotalSelected,
     focusedRowId,
@@ -3973,6 +4161,7 @@ function Component(props, apiRef) {
     onTotalSelect,
     HeadCell: HeadCell2,
     BodyRow: BodyRow2,
+    tableMinWidth,
     // For keyboard selection
     selectionAnchor,
     setSelectionAnchor
@@ -4162,7 +4351,7 @@ function Component(props, apiRef) {
         ref: parentRef,
         ...backgroundProps
       },
-      /* @__PURE__ */ React25.createElement(Table, { ...innerProps }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React25.createElement(Table, { ...innerProps, sx: { ...innerProps.sx, minWidth: tableMinWidth } }, /* @__PURE__ */ React25.createElement("colgroup", null, checkboxSelection && /* @__PURE__ */ React25.createElement(
         "col",
         {
           style: {
@@ -4175,7 +4364,8 @@ function Component(props, apiRef) {
           ref: c.tableColRef,
           key: `${c.field.toString()}_${c.width}`,
           style: {
-            width: c.width
+            width: c.width,
+            minWidth: c.minWidth ?? "50px"
           }
         }
       ))), /* @__PURE__ */ React25.createElement("thead", null, processedColumnGroups && processedColumnGroups.groups.length > 0 && processedColumnGroups.groups.map((levelGroups, level) => /* @__PURE__ */ React25.createElement("tr", { key: `group-level-${level}` }, checkboxSelection && level === 0 && /* @__PURE__ */ React25.createElement(
@@ -4244,6 +4434,7 @@ function Component(props, apiRef) {
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,
+            onAutoFit: handleAutoFit,
             ...c
           }
         )

package/dist/libs/text-measurer.d.ts

@@ -0,0 +1,8 @@
+export declare class TextMeasurer {
+    private ctx;
+    constructor(font?: string);
+    setFont(font: string): this;
+    setFontFromElement(el: Element): this;
+    measureText(text: string): number;
+    measureMaxWidth(values: string[]): number;
+}