@ceed/cds 1.7.6 → 1.7.8

package/dist/index.cjs

@@ -2924,7 +2924,7 @@ function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
 var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react25.default.createElement(import_joy33.LinearProgress, { value: 8, variant: "plain" });
-var TextEllipsis = (0, import_joy33.styled)("div", {
+var EllipsisDiv = (0, import_joy33.styled)("div", {
   name: "DataTable",
   slot: "textEllipsis"
 })({
@@ -2932,6 +2932,22 @@ var TextEllipsis = (0, import_joy33.styled)("div", {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 });
+var TextEllipsis = ({ children }) => {
+  const textRef = (0, import_react25.useRef)(null);
+  const [showTooltip, setShowTooltip] = (0, import_react25.useState)(false);
+  (0, import_react25.useLayoutEffect)(() => {
+    const element = textRef.current;
+    if (element) {
+      const isTextTruncated = element.scrollWidth > element.clientWidth;
+      setShowTooltip(isTextTruncated);
+    }
+  }, [children]);
+  const content = /* @__PURE__ */ import_react25.default.createElement(EllipsisDiv, { ref: textRef }, children);
+  if (showTooltip) {
+    return /* @__PURE__ */ import_react25.default.createElement(Tooltip_default, { title: children, placement: "top" }, content);
+  }
+  return content;
+};
 var OverlayWrapper = (0, import_joy33.styled)("tr", {
   name: "DataTable",
   slot: "overlayWrapper"
@@ -3080,6 +3096,7 @@ var HeadCell = (props) => {
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
+  const [isHovered, setIsHovered] = (0, import_react25.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = (0, import_react25.useMemo)(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -3117,10 +3134,13 @@ var HeadCell = (props) => {
   );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = (0, import_react25.useMemo)(
-    () => sortable && /* @__PURE__ */ import_react25.default.createElement(
+  const sortIcon = (0, import_react25.useMemo)(() => {
+    const isSorted = !!sort;
+    const isVisible = sortable && (isSorted || isHovered);
+    return /* @__PURE__ */ import_react25.default.createElement(import_framer_motion21.AnimatePresence, { mode: "wait" }, isVisible && /* @__PURE__ */ import_react25.default.createElement(
       MotionSortIcon,
       {
+        key: "sort-icon",
         style: {
           width: "16px",
           height: "16px"
@@ -3129,25 +3149,22 @@ var HeadCell = (props) => {
         "aria-labelledby": headId,
         "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
         "data-testid": void 0,
-        variants: {
-          hover: { opacity: 1 },
-          initial: { opacity: 0 }
-        },
+        initial: { opacity: 0, scale: 0.8 },
         animate: {
-          color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
-          rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
-          opacity: !!sort ? 1 : 0
+          opacity: 1,
+          scale: 1,
+          color: isSorted ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
+          rotate: (sort ?? initialSort) === "desc" ? 180 : 0
         },
+        exit: { opacity: 0, scale: 0.8 },
         transition: {
-          duration: 0,
-          rotate: { duration: 0.2, ease: "easeOut" },
-          color: { duration: 0.2, ease: "easeInOut" },
-          opacity: { duration: 0.2, ease: "easeInOut" }
+          duration: 0.2,
+          ease: "easeInOut",
+          rotate: { duration: 0.2, ease: "easeOut" }
         }
       }
-    ),
-    [headId, initialSort, sort, sortable]
-  );
+    ));
+  }, [headId, initialSort, sort, sortable, isHovered]);
   const infoSign = (0, import_react25.useMemo)(
     () => description ? /* @__PURE__ */ import_react25.default.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
     [description]
@@ -3165,6 +3182,8 @@ var HeadCell = (props) => {
         (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
         [field, onSortChange, sort, sortable]
       ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       whileHover: "hover",
       initial: "initial"
     },
@@ -3701,7 +3720,7 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   (0, import_react25.useEffect)(() => {
     onSelectionModelChange?.([]);
-  }, [page, onSelectionModelChange]);
+  }, [page]);
   return {
     rowCount,
     selectableRowCount,

package/dist/index.js

@@ -2665,7 +2665,7 @@ Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;
 
 // src/components/DataTable/DataTable.tsx
-import { motion as motion21 } from "framer-motion";
+import { motion as motion21, AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/Pagination/Pagination.tsx
 import React21, { useCallback as useCallback8, useEffect as useEffect4 } from "react";
@@ -2892,7 +2892,7 @@ function getTextAlign(props) {
   return !props.editMode && ["number", "date", "currency"].includes(props.type || "") ? "end" : "start";
 }
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React23.createElement(LinearProgress, { value: 8, variant: "plain" });
-var TextEllipsis = styled12("div", {
+var EllipsisDiv = styled12("div", {
   name: "DataTable",
   slot: "textEllipsis"
 })({
@@ -2900,6 +2900,22 @@ var TextEllipsis = styled12("div", {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 });
+var TextEllipsis = ({ children }) => {
+  const textRef = useRef4(null);
+  const [showTooltip, setShowTooltip] = useState6(false);
+  useLayoutEffect(() => {
+    const element = textRef.current;
+    if (element) {
+      const isTextTruncated = element.scrollWidth > element.clientWidth;
+      setShowTooltip(isTextTruncated);
+    }
+  }, [children]);
+  const content = /* @__PURE__ */ React23.createElement(EllipsisDiv, { ref: textRef }, children);
+  if (showTooltip) {
+    return /* @__PURE__ */ React23.createElement(Tooltip_default, { title: children, placement: "top" }, content);
+  }
+  return content;
+};
 var OverlayWrapper = styled12("tr", {
   name: "DataTable",
   slot: "overlayWrapper"
@@ -3048,6 +3064,7 @@ var HeadCell = (props) => {
   } = props;
   const theme = useTheme();
   const ref = headerRef;
+  const [isHovered, setIsHovered] = useState6(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -3085,10 +3102,13 @@ var HeadCell = (props) => {
   );
   const textAlign = getTextAlign(props);
   const initialSort = sortOrder[0];
-  const sortIcon = useMemo8(
-    () => sortable && /* @__PURE__ */ React23.createElement(
+  const sortIcon = useMemo8(() => {
+    const isSorted = !!sort;
+    const isVisible = sortable && (isSorted || isHovered);
+    return /* @__PURE__ */ React23.createElement(AnimatePresence2, { mode: "wait" }, isVisible && /* @__PURE__ */ React23.createElement(
       MotionSortIcon,
       {
+        key: "sort-icon",
         style: {
           width: "16px",
           height: "16px"
@@ -3097,25 +3117,22 @@ var HeadCell = (props) => {
         "aria-labelledby": headId,
         "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending",
         "data-testid": void 0,
-        variants: {
-          hover: { opacity: 1 },
-          initial: { opacity: 0 }
-        },
+        initial: { opacity: 0, scale: 0.8 },
         animate: {
-          color: !!sort ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
-          rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
-          opacity: !!sort ? 1 : 0
+          opacity: 1,
+          scale: 1,
+          color: isSorted ? "var(--ceed-palette-text-secondary)" : "var(--ceed-palette-primary-solidDisabledColor)",
+          rotate: (sort ?? initialSort) === "desc" ? 180 : 0
         },
+        exit: { opacity: 0, scale: 0.8 },
         transition: {
-          duration: 0,
-          rotate: { duration: 0.2, ease: "easeOut" },
-          color: { duration: 0.2, ease: "easeInOut" },
-          opacity: { duration: 0.2, ease: "easeInOut" }
+          duration: 0.2,
+          ease: "easeInOut",
+          rotate: { duration: 0.2, ease: "easeOut" }
         }
       }
-    ),
-    [headId, initialSort, sort, sortable]
-  );
+    ));
+  }, [headId, initialSort, sort, sortable, isHovered]);
   const infoSign = useMemo8(
     () => description ? /* @__PURE__ */ React23.createElement(InfoSign_default, { message: description, placement: "bottom" }) : null,
     [description]
@@ -3133,6 +3150,8 @@ var HeadCell = (props) => {
         (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
         [field, onSortChange, sort, sortable]
       ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
       whileHover: "hover",
       initial: "initial"
     },
@@ -3669,7 +3688,7 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   useEffect5(() => {
     onSelectionModelChange?.([]);
-  }, [page, onSelectionModelChange]);
+  }, [page]);
   return {
     rowCount,
     selectableRowCount,