lecom-ui 5.2.18 → 5.2.19

package/dist/components/DataTable/DataTable.js

@@ -39,81 +39,59 @@ function DataTable({
     }
   });
   const scrollAreaRef = React.useRef(null);
+  const offsets = React.useRef([]);
   const fixedElementsCache = React.useRef({ elements: [], separators: [], lastUpdate: 0 });
-  const hasPagination = () => {
-    if (!pagination) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
-  };
   const setupFixedElements = React.useCallback(() => {
     if (isLoading) return;
     const tableElement = document.querySelector(
       "table#data-table"
     );
     if (!tableElement) return;
-    const now = Date.now();
-    const cacheValidTime = 1e3;
-    if (now - fixedElementsCache.current.lastUpdate < cacheValidTime) {
-      return;
-    }
     const listRows = tableElement.querySelectorAll("tr");
-    requestAnimationFrame(() => {
-      listRows.forEach((listRow, listRowIndex) => {
-        const rowsElem = listRow.querySelectorAll("[data-fixed]");
-        rowsElem.forEach((rowElem, rowElemIndex) => {
-          const beforeElem = rowsElem[rowElemIndex - 1];
-          const currentElem = rowElem;
-          const beforeElemWidth = beforeElem?.getBoundingClientRect()?.width ?? 0;
-          const beforeElemLeft = beforeElem?.style?.left ? Number(beforeElem.style.left.replace(/px/g, "")) : 0;
-          const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
-          const lastRow = listRows.length - 1 === listRowIndex;
-          const currentElemIsTh = currentElem.tagName === "TH";
-          const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
-          const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
-          Object.assign(currentElem.style, {
-            position: "sticky",
-            left: `${beforeElemWidth + beforeElemLeft}px`,
-            boxShadow
-          });
-          if (lastColumnFixed) {
-            currentElem.setAttribute("data-separator-fixed", "true");
-          }
-        });
+    if (!listRows[0]) return;
+    offsets.current = [];
+    let offset = 0;
+    const fixedCells = Array.from(
+      listRows[0].querySelectorAll("[data-fixed]")
+    );
+    fixedCells.forEach((cell, idx) => {
+      offsets.current[idx] = offset;
+      offset += cell.getBoundingClientRect().width;
+    });
+    listRows.forEach((row) => {
+      const cells = Array.from(
+        row.querySelectorAll("[data-fixed]")
+      );
+      cells.forEach((cell, idx) => {
+        cell.style.position = "sticky";
+        cell.style.left = `${offsets.current[idx]}px`;
+        cell.style.boxShadow = idx === offsets.current.length - 1 ? "#c9c9c9 -0.5px 0px 0px inset" : "";
       });
-      fixedElementsCache.current = {
-        elements: Array.from(tableElement.querySelectorAll("[data-fixed]")),
-        separators: Array.from(
-          tableElement.querySelectorAll("[data-separator-fixed]")
-        ),
-        lastUpdate: now
-      };
     });
+    fixedElementsCache.current = {
+      elements: Array.from(
+        tableElement.querySelectorAll("[data-fixed]")
+      ),
+      separators: [],
+      lastUpdate: Date.now()
+    };
   }, [isLoading]);
   React.useEffect(() => {
     setupFixedElements();
-  }, [setupFixedElements, data.length]);
+  }, [setupFixedElements, data.length, columns, size]);
   React.useEffect(() => {
     if (noScroll) return;
     const container = scrollAreaRef.current;
     if (!container) return;
-    const debouncedSetup = debounce(setupFixedElements, 120);
-    const resizeObserver = new window.ResizeObserver(() => {
+    const handleResize = () => {
       setupFixedElements();
-      debouncedSetup();
-    });
+    };
+    const resizeObserver = new window.ResizeObserver(handleResize);
     resizeObserver.observe(container);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [setupFixedElements, noScroll]);
-  function debounce(fn, delay) {
-    let timer;
-    return (...args) => {
-      clearTimeout(timer);
-      timer = setTimeout(() => fn(...args), delay);
-    };
-  }
+  }, [setupFixedElements, noScroll, vwDiff, vhDiff]);
   const onScroll = React.useCallback((e) => {
     const target = e.target;
     const { separators } = fixedElementsCache.current;
@@ -140,6 +118,12 @@ function DataTable({
     scrollElement.addEventListener("scroll", onScroll, { passive: true });
     return () => scrollElement.removeEventListener("scroll", onScroll);
   }, [onScroll]);
+  const hasPagination = () => {
+    if (!pagination) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
+  };
   const renderTable = () => /* @__PURE__ */ React.createElement(
     Table,
     {

package/dist/index.d.ts

@@ -524,18 +524,6 @@ interface TableProps<TData, TValue> {
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 
-/**
- * DataTable Component - Versão Otimizada para Performance
- *
- * Otimizações implementadas:
- * 1. Memoização de estilos para evitar recálculos em resize
- * 2. Cache de elementos DOM para reduzir queries repetitivas
- * 3. requestAnimationFrame para operações DOM não bloqueantes
- * 4. Event listeners com passive: true para melhor scroll performance
- * 5. Batch de operações DOM para reduzir reflows/repaints
- * 6. Sistema de cache com timestamp para evitar recálculos desnecessários
- */
-
 declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, size, skeleton, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 declare namespace DataTable {
     var displayName: string;

package/package.json

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