lecom-ui 5.4.16 → 5.4.18

package/dist/components/DataTable/DataTable.js

@@ -96,7 +96,7 @@ function DataTable({
           const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
           const lastRow = listRows.length - 1 === listRowIndex;
           const currentElemIsTh = currentElem.tagName === "TH";
-          const hasTruncate = currentElem.style.overflow === "hidden" && currentElem.style.textOverflow === "ellipsis";
+          const hasTruncate = currentElem.querySelector(".truncate") !== null;
           const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
           const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
           currentElem.style.position = "sticky";
@@ -114,35 +114,11 @@ function DataTable({
       const allCells = document.querySelectorAll("table#data-table td");
       allCells.forEach((cell) => {
         const cellElem = cell;
-        const hasTruncate = cellElem.style.overflow === "hidden" && cellElem.style.textOverflow === "ellipsis";
+        const hasTruncate = cellElem.querySelector(".truncate") !== null;
         if (hasTruncate && !cellElem.hasAttribute("data-fixed")) {
           cellElem.style.backgroundColor = "#ffffff";
         }
       });
-      const allRows = document.querySelectorAll("table#data-table tbody tr");
-      allRows.forEach((row) => {
-        const rowElem = row;
-        rowElem.addEventListener("mouseenter", () => {
-          const cells = rowElem.querySelectorAll("td");
-          cells.forEach((cell) => {
-            const cellElem = cell;
-            const hasTruncate = cellElem.style.overflow === "hidden" && cellElem.style.textOverflow === "ellipsis";
-            if (hasTruncate || cellElem.hasAttribute("data-fixed")) {
-              cellElem.style.backgroundColor = "#f3f4f6";
-            }
-          });
-        });
-        rowElem.addEventListener("mouseleave", () => {
-          const cells = rowElem.querySelectorAll("td");
-          cells.forEach((cell) => {
-            const cellElem = cell;
-            const hasTruncate = cellElem.style.overflow === "hidden" && cellElem.style.textOverflow === "ellipsis";
-            if (hasTruncate || cellElem.hasAttribute("data-fixed")) {
-              cellElem.style.backgroundColor = "#ffffff";
-            }
-          });
-        });
-      });
     }
   }, [isLoading, sorting]);
   const throttle = React.useCallback(

package/dist/components/DataTable/DataTable.utils.js

@@ -152,6 +152,7 @@ function buildColumns({
         {
           variant: size === "small" ? "body-medium-400" : "body-large-400",
           textColor: "text-grey-800",
+          className: "truncate",
           title: row.getValue(externalColumn.key)
         },
         row.getValue(externalColumn.key)

package/dist/components/DataTable/Table.js

@@ -13,18 +13,7 @@ function Table({
   onIsSelected,
   expandedContent
 }) {
-  const styleColumn = React.useCallback((meta, elem) => {
-    if (elem === "td" && meta.truncate) {
-      return {
-        width: meta.width,
-        maxWidth: meta.maxWidth ?? "0",
-        minWidth: meta.minWidth ?? "0",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        textAlign: meta.align || "left"
-      };
-    }
+  const styleColumn = React.useCallback((meta) => {
     return {
       width: meta.width,
       maxWidth: meta.maxWidth ?? void 0,
@@ -59,7 +48,7 @@ function Table({
       "data-header": header.id,
       "data-fixed": getFixed(header.column.columnDef.meta),
       style: {
-        ...styleColumn(header.column.columnDef.meta, "th"),
+        ...styleColumn(header.column.columnDef.meta),
         ...header.column.columnDef.meta?.headerStyle
       }
     },
@@ -83,12 +72,9 @@ function Table({
         ),
         "data-column": cell.column.id,
         "data-fixed": getFixed(cell.column.columnDef.meta),
-        style: styleColumn(
-          cell.column.columnDef.meta,
-          "td"
-        )
+        style: styleColumn(cell.column.columnDef.meta)
       },
-      flexRender(cell.column.columnDef.cell, cell.getContext())
+      cell.column.columnDef.meta?.truncate ? /* @__PURE__ */ React.createElement("div", { className: "truncate" }, flexRender(cell.column.columnDef.cell, cell.getContext())) : flexRender(cell.column.columnDef.cell, cell.getContext())
     ))
   ), row.getIsExpanded() && expandedContent && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: columns.length, className: "p-0" }, expandedContent(row))))) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
     "td",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.4.16",
+  "version": "5.4.18",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",