@ceed/cds 1.24.1-next.2 → 1.25.0

package/dist/index.cjs

@@ -2217,12 +2217,22 @@ var import_framer_motion17 = require("framer-motion");
 var import_ArrowUpwardRounded = __toESM(require("@mui/icons-material/ArrowUpwardRounded"));
 var EllipsisDiv = (0, import_joy25.styled)("div", {
   name: "DataTable",
-  slot: "textEllipsis"
-})({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
+  slot: "textEllipsis",
+  shouldForwardProp: (prop) => prop !== "lineClamp"
+})(
+  ({ lineClamp }) => lineClamp && lineClamp > 1 ? {
+    overflow: "hidden",
+    display: "-webkit-box !important",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lineClamp,
+    whiteSpace: "normal",
+    overflowWrap: "anywhere"
+  } : {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+);
 var OverlayWrapper = (0, import_joy25.styled)("tr", {
   name: "DataTable",
   slot: "overlayWrapper"
@@ -2904,21 +2914,22 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/components.tsx
-var TextEllipsis = ({ children }) => {
+var TextEllipsis = ({ children, lineClamp }) => {
   const textRef = (0, import_react24.useRef)(null);
   const [showTooltip, setShowTooltip] = (0, import_react24.useState)(false);
   (0, import_react24.useLayoutEffect)(() => {
     const element = textRef.current;
-    if (element) {
-      const isTextTruncated = element.scrollWidth > element.clientWidth;
-      setShowTooltip(isTextTruncated);
-    }
-  }, [children]);
-  const content = /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef }, children);
-  if (showTooltip) {
-    return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
-  }
-  return content;
+    if (!element) return;
+    const checkTruncation = () => {
+      const isTruncated = lineClamp && lineClamp > 1 ? element.scrollHeight > element.clientHeight + 1 : element.scrollWidth > element.clientWidth;
+      setShowTooltip(isTruncated);
+    };
+    checkTruncation();
+    const ro = new ResizeObserver(checkTruncation);
+    ro.observe(element);
+    return () => ro.disconnect();
+  }, [children, lineClamp]);
+  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = (0, import_react24.useRef)(null);
@@ -2969,7 +2980,8 @@ var HeadCell = (props) => {
     pinnedEndPosition,
     headerRef,
     tableColRef,
-    headerClassName
+    headerClassName,
+    headerLineClamp
   } = props;
   const theme = (0, import_joy32.useTheme)();
   const ref = headerRef;
@@ -3063,7 +3075,7 @@ var HeadCell = (props) => {
       initial: "initial",
       className: computedHeaderClassName
     },
-    /* @__PURE__ */ import_react24.default.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ import_react24.default.createElement(TextEllipsis, null, 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 }, headerName ?? field, editMode && required && /* @__PURE__ */ import_react24.default.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };

package/dist/index.js

@@ -2091,12 +2091,22 @@ import { motion as motion17 } from "framer-motion";
 import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
 var EllipsisDiv = styled8("div", {
   name: "DataTable",
-  slot: "textEllipsis"
-})({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
+  slot: "textEllipsis",
+  shouldForwardProp: (prop) => prop !== "lineClamp"
+})(
+  ({ lineClamp }) => lineClamp && lineClamp > 1 ? {
+    overflow: "hidden",
+    display: "-webkit-box !important",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lineClamp,
+    whiteSpace: "normal",
+    overflowWrap: "anywhere"
+  } : {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+);
 var OverlayWrapper = styled8("tr", {
   name: "DataTable",
   slot: "overlayWrapper"
@@ -2787,21 +2797,22 @@ function InfoSign(props) {
 var InfoSign_default = InfoSign;
 
 // src/components/DataTable/components.tsx
-var TextEllipsis = ({ children }) => {
+var TextEllipsis = ({ children, lineClamp }) => {
   const textRef = useRef5(null);
   const [showTooltip, setShowTooltip] = useState8(false);
   useLayoutEffect(() => {
     const element = textRef.current;
-    if (element) {
-      const isTextTruncated = element.scrollWidth > element.clientWidth;
-      setShowTooltip(isTextTruncated);
-    }
-  }, [children]);
-  const content = /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef }, children);
-  if (showTooltip) {
-    return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: children, placement: "top", onClick: (e) => e.stopPropagation() }, content);
-  }
-  return content;
+    if (!element) return;
+    const checkTruncation = () => {
+      const isTruncated = lineClamp && lineClamp > 1 ? element.scrollHeight > element.clientHeight + 1 : element.scrollWidth > element.clientWidth;
+      setShowTooltip(isTruncated);
+    };
+    checkTruncation();
+    const ro = new ResizeObserver(checkTruncation);
+    ro.observe(element);
+    return () => ro.disconnect();
+  }, [children, lineClamp]);
+  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef5(null);
@@ -2852,7 +2863,8 @@ var HeadCell = (props) => {
     pinnedEndPosition,
     headerRef,
     tableColRef,
-    headerClassName
+    headerClassName,
+    headerLineClamp
   } = props;
   const theme = useTheme();
   const ref = headerRef;
@@ -2946,7 +2958,7 @@ var HeadCell = (props) => {
       initial: "initial",
       className: computedHeaderClassName
     },
-    /* @__PURE__ */ React22.createElement(Stack_default, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" }, textAlign === "end" && sortIcon, textAlign === "end" && infoSign, /* @__PURE__ */ React22.createElement(TextEllipsis, null, 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 }, headerName ?? field, editMode && required && /* @__PURE__ */ React22.createElement(Asterisk, null, "*")), textAlign === "start" && infoSign, textAlign === "start" && sortIcon),
     resizer
   );
 };