lecom-ui 4.1.4 → 4.1.6

package/dist/components/DataTable/DataTable.js

@@ -6,8 +6,6 @@ import { Skeleton } from '../Skeleton/Skeleton.js';
 import { buildColumns } from './DataTable.utils.js';
 
 function DataTable({
-  columnFullSize,
-  fixedColumns,
   isLoading,
   columns,
   data,
@@ -25,10 +23,7 @@ function DataTable({
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
     state: {
-      sorting,
-      columnPinning: {
-        left: fixedColumns || []
-      }
+      sorting
     }
   });
   const styleDataTableContainer = () => ({
@@ -41,15 +36,30 @@ function DataTable({
     }
     return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
   };
+  const styleColumn = (meta) => ({
+    width: meta.width
+  });
+  const getFixed = (meta) => meta.fixed;
   const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
   React.useEffect(() => {
     if (!isLoading) {
-      console.log(
-        isLoading,
-        document.querySelector(
-          `table#data-table tbody tr:nth-child(50) td:nth-child(2)`
-        )
-      );
+      const listRows = document.querySelectorAll(`table#data-table tr`);
+      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 boxShadow = lastColumnFixed ? `#c9c9c9 -0.5px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset` : `#c9c9c9 0px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset`;
+          currentElem.style.position = "sticky";
+          currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
+          currentElem.style.boxShadow = boxShadow;
+        });
+      });
     }
   }, [isLoading]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -74,7 +84,14 @@ function DataTable({
         "th",
         {
           key: header.id,
-          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left"
+          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+          "data-header": header.id,
+          "data-fixed": getFixed(
+            header.column.columnDef.meta
+          ),
+          style: styleColumn(
+            header.column.columnDef.meta
+          )
         },
         header.isPlaceholder ? null : flexRender(
           header.column.columnDef.header,
@@ -91,7 +108,14 @@ function DataTable({
           "td",
           {
             key: cell.id,
-            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left"
+            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
+            "data-column": cell.column.id,
+            "data-fixed": getFixed(
+              cell.column.columnDef.meta
+            ),
+            style: styleColumn(
+              cell.column.columnDef.meta
+            )
           },
           flexRender(
             cell.column.columnDef.cell,

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

@@ -87,6 +87,10 @@ function buildColumns({
         return externalColumn.render;
       }
       return /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-400", textColor: "text-grey-800" }, row.getValue(externalColumn.key));
+    },
+    meta: {
+      width: externalColumn.width,
+      fixed: externalColumn.fixed
     }
   }));
   return mappedColumns;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Row as Row$1, Table, Column as Column$1 } from '@tanstack/react-table';
+export { ColumnDef } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CustomStyles as CustomStyles$2 } from '@/components/Button';
@@ -348,6 +349,8 @@ interface Column<TData, TValue> {
     key: string;
     title?: (({ table, column }: ColumnTitle<TData, TValue>) => React.ReactNode) | React.ReactNode;
     enableSelect?: boolean;
+    width?: number | string;
+    fixed?: string;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => void;
     checkedHeader?: ({ table, column }: CheckedHeader<TData, TValue>) => boolean;
@@ -356,8 +359,6 @@ interface Column<TData, TValue> {
     onCheckedCellChange?: ({ row, value }: CheckedCellChange<TData>) => void;
 }
 interface DataTableProps<TData, TValue> {
-    columnFullSize?: string;
-    fixedColumns?: string[];
     isLoading?: boolean;
     columns: Column<TData, TValue>[];
     data: TData[];
@@ -388,8 +389,9 @@ interface BuildCellSelect<TData, TValue> {
     checkedCell: Column<TData, TValue>['checkedCell'];
     onCheckedCellChange: Column<TData, TValue>['onCheckedCellChange'];
 }
+type Meta = Record<string, string | number>;
 
-declare function DataTable<TData, TValue>({ columnFullSize, fixedColumns, isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
+declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -733,4 +735,4 @@ declare const fonts: {
     ibm: string[];
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type BgColor, type BuildCellSelect, type BuildColumns, type BuildHeaderSelect, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, type CheckedCell, type CheckedCellChange, type CheckedHeader, type CheckedHeaderChange, type Color, type ColorToken, type Column, type ColumnRender, type ColumnSort, type ColumnTitle, type CustomStyles$1 as CustomStyles, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FillColor, type Fonts, type Header, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, type PaginationProps, Popover, PopoverContent, PopoverTrigger, type Row, Rpa, type RpaProps, ScrollArea, ScrollBar, type SideBarProps, Skeleton, Spin, type SpinProps, Switch, TOAST_REMOVE_DELAY, Tag, type TagProps, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, type TypographyProps, type UsePaginationItem, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type BgColor, type BuildCellSelect, type BuildColumns, type BuildHeaderSelect, Button, type ButtonProps, CadastroFacil, type CadastroFacilProps, type CalloutNotificationProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, type CheckedCell, type CheckedCellChange, type CheckedHeader, type CheckedHeaderChange, type Color, type ColorToken, type Column, type ColumnRender, type ColumnSort, type ColumnTitle, type CustomStyles$1 as CustomStyles, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FillColor, type Fonts, type Header, type HeaderProps, type InlineNotificationProps, Layout, type LayoutProps, LogoLecom, LogoLecomBrand, type LogoLecomBrandProps, type LogoLecomProps, type Meta, ModoTeste, type ModoTesteProps, Notification, type NotificationProps, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, type PaginationProps, Popover, PopoverContent, PopoverTrigger, type Row, Rpa, type RpaProps, ScrollArea, ScrollBar, type SideBarProps, Skeleton, Spin, type SpinProps, Switch, TOAST_REMOVE_DELAY, Tag, type TagProps, type TextColor, type ToastNotificationProps, type ToasterToast, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, type TypographyProps, type UsePaginationItem, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };

package/package.json

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