@ceed/cds 1.27.2 → 1.28.0

package/dist/index.cjs

@@ -2091,6 +2091,36 @@ var CurrencyInput_default = CurrencyInput;
 var import_react28 = __toESM(require("react"));
 var import_react_virtual2 = require("@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();
@@ -2212,6 +2242,71 @@ 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
 var import_react19 = __toESM(require("react"));
@@ -2322,7 +2417,7 @@ var StyledTd = (0, import_joy25.styled)("td")(({ theme }) => ({
 var MotionSortIcon = (0, import_framer_motion17.motion)(import_ArrowUpwardRounded.default);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.LinearProgress, { value: 8, variant: "plain" });
 var DefaultNoRowsOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.Typography, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
-var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ import_react19.default.createElement(
+var Resizer = (ref, targetRef = ref, onResizeStateChange, onAutoFit) => /* @__PURE__ */ import_react19.default.createElement(
   Box_default,
   {
     sx: {
@@ -2330,24 +2425,67 @@ var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ imp
       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);
@@ -2920,7 +3058,11 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/components.tsx
-var TextEllipsis = ({ children, lineClamp }) => {
+var TextEllipsis = ({
+  children,
+  lineClamp,
+  ...rest
+}) => {
   const textRef = (0, import_react24.useRef)(null);
   const [showTooltip, setShowTooltip] = (0, import_react24.useState)(false);
   (0, import_react24.useLayoutEffect)(() => {
@@ -2935,7 +3077,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp, ...rest }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = (0, import_react24.useRef)(null);
@@ -2987,7 +3129,8 @@ var HeadCell = (props) => {
     headerRef,
     tableColRef,
     headerClassName,
-    headerLineClamp
+    headerLineClamp,
+    onAutoFit
   } = props;
   const theme = (0, import_joy32.useTheme)();
   const ref = headerRef;
@@ -3004,10 +3147,15 @@ var HeadCell = (props) => {
   );
   const isResizingRef = (0, import_react24.useRef)(false);
   const resizer = (0, import_react24.useMemo)(
-    () => 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 = (0, import_react24.useMemo)(
     () => ({
@@ -3095,7 +3243,7 @@ var HeadCell = (props) => {
       initial: "initial",
       className: computedHeaderClassName
     },
-    /* @__PURE__ */ import_react24.default.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center", sx: { minWidth: 0 } }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ import_react24.default.createElement(TextEllipsis, { lineClamp: headerLineClamp }, headerName ?? field, editMode && required && /* @__PURE__ */ import_react24.default.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
+    /* @__PURE__ */ import_react24.default.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center", sx: { minWidth: 0 } }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ import_react24.default.createElement(TextEllipsis, { lineClamp: headerLineClamp, "data-slot": "header-text" }, headerName ?? field, editMode && required && /* @__PURE__ */ import_react24.default.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };
@@ -3642,6 +3790,25 @@ function useDataTableRenderer({
       prevRowsRef.current = _rows;
     }
   }, [_rows]);
+  const handleAutoFit = (0, import_react25.useCallback)(
+    (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,
@@ -3653,6 +3820,7 @@ function useDataTableRenderer({
     BodyRow,
     dataInPage,
     handleSortChange,
+    handleAutoFit,
     isAllSelected,
     isTotalSelected,
     isSelectedRow: (0, import_react25.useCallback)((model) => selectedModelSet.has(model), [selectedModelSet]),
@@ -4083,6 +4251,7 @@ function Component(props, apiRef) {
     pageSize,
     onPaginationModelChange,
     handleSortChange,
+    handleAutoFit,
     dataInPage,
     isTotalSelected,
     focusedRowId,
@@ -4361,6 +4530,7 @@ function Component(props, apiRef) {
             stickyHeader: props.stickyHeader,
             editMode: !!c.isCellEditable,
             onSortChange: handleSortChange,
+            onAutoFit: handleAutoFit,
             ...c
           }
         )

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();
@@ -2086,6 +2116,71 @@ 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 +2291,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 +2299,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 +2941,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 +2960,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 +3012,8 @@ var HeadCell = (props) => {
     headerRef,
     tableColRef,
     headerClassName,
-    headerLineClamp
+    headerLineClamp,
+    onAutoFit
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -2887,10 +3030,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 +3126,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
   );
 };
@@ -3525,6 +3673,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 +3703,7 @@ function useDataTableRenderer({
     BodyRow,
     dataInPage,
     handleSortChange,
+    handleAutoFit,
     isAllSelected,
     isTotalSelected,
     isSelectedRow: useCallback10((model) => selectedModelSet.has(model), [selectedModelSet]),
@@ -3966,6 +4134,7 @@ function Component(props, apiRef) {
     pageSize,
     onPaginationModelChange,
     handleSortChange,
+    handleAutoFit,
     dataInPage,
     isTotalSelected,
     focusedRowId,
@@ -4244,6 +4413,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;
+}