lecom-ui 5.2.14 → 5.2.16

package/dist/components/CustomIcon/Icons/SairModoTeste.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+const SairModoTeste = ({
+  color = "currentColor",
+  strokeWidth = 1.5,
+  width = 20,
+  height = 20,
+  ...props
+}) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width,
+    height,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth,
+      d: "M4.75 2h7.875L17 6.5v.9h-3.5c-.464 0-.91-.19-1.237-.527A1.83 1.83 0 0 1 11.75 5.6V2M3 7.5v10.7c0 .477.184.935.513 1.273.328.337.773.527 1.237.527h6.75M8 11.9H6.5m4.5 3.6H6.5M19 10v6m-5-6v1m-1-1h7m-6 8v3.375c0 .91 1.1 1.625 2.5 1.625.567 0 1.085-.117 1.5-.317.259-.125.478-.281.644-.462M1 2l11 10.5L23 23"
+    }
+  )
+);
+
+export { SairModoTeste };

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

@@ -348,6 +348,8 @@ interface LogoLecomBrandProps extends React$1.SVGAttributes<SVGSVGElement> {
 }
 declare const LogoLecomBrand: React$1.ForwardRefExoticComponent<LogoLecomBrandProps & React$1.RefAttributes<SVGSVGElement>>;
 
+declare const SairModoTeste: ({ color, strokeWidth, width, height, ...props }: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
+
 type UsePaginationProps = {
     count?: number;
     defaultPage?: number;
@@ -522,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;
@@ -1050,5 +1064,5 @@ declare const DrawerFooter: {
 declare const DrawerTitle: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof Drawer$1.Title> & React$1.RefAttributes<React$1.ElementRef<typeof Drawer$1.Title>>>;
 declare const DrawerDescription: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof Drawer$1.Description> & React$1.RefAttributes<React$1.ElementRef<typeof Drawer$1.Description>>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
 export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TableProps, TagProps, TextColor, TextareaProps, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/dist/index.js

@@ -9,6 +9,7 @@ export { LogoLecom } from './components/CustomIcon/Icons/LogoLecom.js';
 export { ModoTeste } from './components/CustomIcon/Icons/ModoTeste.js';
 export { Rpa } from './components/CustomIcon/Icons/Rpa.js';
 export { LogoLecomBrand } from './components/CustomIcon/Icons/LogoLecomBrand.js';
+export { SairModoTeste } from './components/CustomIcon/Icons/SairModoTeste.js';
 export { DataTable } from './components/DataTable/DataTable.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger } from './components/Dialog/Dialog.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';

package/package.json

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