lecom-ui 5.2.15 → 5.2.16

package/dist/components/DataTable/DataTable.js

@@ -21,6 +21,13 @@ function DataTable({
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
+  const dataTableContainerStyle = React.useMemo(
+    () => ({
+      width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
+      height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
+    }),
+    [vwDiff, vhDiff]
+  );
   const table = useReactTable({
     data,
     columns: buildColumns({ columns, size }),
@@ -31,19 +38,27 @@ function DataTable({
       sorting
     }
   });
-  const styleDataTableContainer = () => ({
-    width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
-    height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
-  });
+  const scrollAreaRef = React.useRef(null);
+  const fixedElementsCache = React.useRef({ elements: [], separators: [], lastUpdate: 0 });
   const hasPagination = () => {
     if (!pagination) {
       return null;
     }
     return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
   };
-  React.useEffect(() => {
-    if (!isLoading) {
-      const listRows = document.querySelectorAll(`table#data-table tr`);
+  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) => {
@@ -56,44 +71,54 @@ function DataTable({
           const currentElemIsTh = currentElem.tagName === "TH";
           const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
           const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
-          currentElem.style.position = "sticky";
-          currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
-          currentElem.style.boxShadow = boxShadow;
+          Object.assign(currentElem.style, {
+            position: "sticky",
+            left: `${beforeElemWidth + beforeElemLeft}px`,
+            boxShadow
+          });
           if (lastColumnFixed) {
             currentElem.setAttribute("data-separator-fixed", "true");
           }
         });
       });
-    }
+      fixedElementsCache.current = {
+        elements: Array.from(tableElement.querySelectorAll("[data-fixed]")),
+        separators: Array.from(
+          tableElement.querySelectorAll("[data-separator-fixed]")
+        ),
+        lastUpdate: now
+      };
+    });
   }, [isLoading]);
-  const onScroll = (e) => {
+  React.useEffect(() => {
+    setupFixedElements();
+  }, [setupFixedElements, data.length]);
+  const onScroll = React.useCallback((e) => {
     const target = e.target;
-    const elemSeparator = document.querySelectorAll("[data-separator-fixed]");
-    const countSeparator = elemSeparator.length - 1;
-    if (target.scrollLeft > 0) {
-      elemSeparator.forEach((elem, i) => {
-        const separator = elem;
-        if (countSeparator === i) {
-          separator.style.boxShadow = "#c9c9c9 -0.5px 0px 0px inset";
+    const { separators } = fixedElementsCache.current;
+    if (separators.length === 0) return;
+    requestAnimationFrame(() => {
+      const countSeparator = separators.length - 1;
+      const isScrolledRight = target.scrollLeft > 0;
+      separators.forEach((separator, i) => {
+        const isLastSeparator = countSeparator === i;
+        const isFirstSeparator = i === 0;
+        if (isScrolledRight) {
+          separator.style.boxShadow = isLastSeparator ? "#c9c9c9 -0.5px 0px 0px inset" : `#c9c9c9 -0.5px ${isFirstSeparator ? "-1.5px" : "-0.5px"} 0px inset`;
         } else {
-          separator.style.boxShadow = `#c9c9c9 -0.5px ${i === 0 ? "-1.5px" : "-0.5px"} 0px inset`;
+          separator.style.boxShadow = isFirstSeparator ? "#c9c9c9 0px -1.5px 0px inset" : `#c9c9c9 0px ${isLastSeparator ? "0px" : "-0.5px"} 0px inset`;
         }
       });
-    } else {
-      elemSeparator.forEach((elem, i) => {
-        const separator = elem;
-        if (i === 0) {
-          separator.style.boxShadow = "#c9c9c9 0px -1.5px 0px inset";
-        } else {
-          separator.style.boxShadow = `#c9c9c9 0px ${countSeparator === i ? "0px" : "-0.5px"} 0px inset`;
-        }
-      });
-    }
-  };
-  React.useEffect(() => {
-    document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
-    return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
+    });
   }, []);
+  React.useEffect(() => {
+    const scrollElement = scrollAreaRef.current?.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    if (!scrollElement) return;
+    scrollElement.addEventListener("scroll", onScroll, { passive: true });
+    return () => scrollElement.removeEventListener("scroll", onScroll);
+  }, [onScroll]);
   const renderTable = () => /* @__PURE__ */ React.createElement(
     Table,
     {
@@ -113,13 +138,13 @@ function DataTable({
         "bg-white rounded-[8px] p-2 transition-all duration-500",
         className
       ),
-      style: noScroll ? void 0 : { width: styleDataTableContainer().width }
+      style: noScroll ? void 0 : { width: dataTableContainerStyle.width }
     },
-    noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
+    noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { ref: scrollAreaRef, type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "transition-all duration-500",
-        style: { maxHeight: styleDataTableContainer().height }
+        style: { maxHeight: dataTableContainerStyle.height }
       },
       renderTable()
     ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))

package/dist/index.d.ts

@@ -524,6 +524,18 @@ 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.15",
+  "version": "5.2.16",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",