lecom-ui 4.7.8 → 4.8.0

package/dist/components/DataTable/DataTable.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { cn } from '../../lib/utils.js';
+import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { Pagination } from '../Pagination/Pagination.js';
 import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
-import { Skeleton } from '../Skeleton/Skeleton.js';
 import { buildColumns } from './DataTable.utils.js';
+import { Table } from './Table.js';
 
 function DataTable({
   isLoading,
@@ -13,6 +14,8 @@ function DataTable({
   pagination,
   vwDiff,
   vhDiff,
+  className,
+  noScroll,
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
@@ -36,22 +39,6 @@ function DataTable({
     }
     return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
   };
-  const styleColumn = (meta, elem) => {
-    if (elem === "td" && meta.truncate) {
-      return {
-        width: meta.width,
-        overflow: "hidden",
-        maxWidth: "0",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      };
-    }
-    return {
-      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) {
       const listRows = document.querySelectorAll(`table#data-table tr`);
@@ -105,76 +92,32 @@ function DataTable({
     document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
     return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
   }, []);
+  const renderTable = () => /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      table,
+      columns,
+      noResults,
+      onIsSelected,
+      isLoading
+    }
+  );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: "bg-white rounded-[8px] p-2 transition-all duration-500",
-      style: { width: styleDataTableContainer().width }
+      className: cn(
+        "bg-white rounded-[8px] p-2 transition-all duration-500",
+        className
+      ),
+      style: noScroll ? void 0 : { width: styleDataTableContainer().width }
     },
-    /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
+    noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "transition-all duration-500",
         style: { maxHeight: styleDataTableContainer().height }
       },
-      isLoading ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
-        Skeleton,
-        {
-          key: id,
-          className: "w-full h-[25px] rounded-lg bg-grey-200"
-        }
-      ))) : /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
-        "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",
-          "data-header": header.id,
-          "data-fixed": getFixed(
-            header.column.columnDef.meta
-          ),
-          style: styleColumn(
-            header.column.columnDef.meta,
-            "th"
-          )
-        },
-        header.isPlaceholder ? null : flexRender(
-          header.column.columnDef.header,
-          header.getContext()
-        )
-      ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
-        "tr",
-        {
-          key: row.id,
-          "data-state": onIsSelected?.(row) ? "selected" : "",
-          className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
-        },
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
-          "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",
-            "data-column": cell.column.id,
-            "data-fixed": getFixed(
-              cell.column.columnDef.meta
-            ),
-            style: styleColumn(
-              cell.column.columnDef.meta,
-              "td"
-            )
-          },
-          flexRender(
-            cell.column.columnDef.cell,
-            cell.getContext()
-          )
-        ))
-      )) : /* @__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",
-        {
-          colSpan: columns.length,
-          className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors bg-white"
-        },
-        noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
-      ))))
+      renderTable()
     ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
   ), hasPagination());
 }

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

@@ -59,7 +59,15 @@ function buildColumns({
           ),
           onClick: () => externalColumn.onSort?.({ table, column })
         },
-        typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-500", textColor: "text-grey-950" }, externalColumn.title) : title,
+        typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: "body-large-500",
+            textColor: "text-grey-950",
+            className: "truncate"
+          },
+          externalColumn.title
+        ) : title,
         hasSort && /* @__PURE__ */ React.createElement(
           ArrowUpDown,
           {

package/dist/components/DataTable/Table.js

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+
+function Table({
+  table,
+  isLoading,
+  columns,
+  noResults,
+  onIsSelected
+}) {
+  const styleColumn = (meta, elem) => {
+    if (elem === "td" && meta.truncate) {
+      return {
+        width: meta.width,
+        overflow: "hidden",
+        maxWidth: "0",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      };
+    }
+    return {
+      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];
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
+      Skeleton,
+      {
+        key: id,
+        className: "w-full h-[25px] rounded-lg bg-grey-200"
+      }
+    )));
+  }
+  return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      key: header.id,
+      className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 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, "th")
+    },
+    header.isPlaceholder ? null : flexRender(
+      header.column.columnDef.header,
+      header.getContext()
+    )
+  ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
+    "tr",
+    {
+      key: row.id,
+      "data-state": onIsSelected?.(row) ? "selected" : "",
+      className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
+    },
+    row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        key: cell.id,
+        className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors 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, "td")
+      },
+      flexRender(cell.column.columnDef.cell, cell.getContext())
+    ))
+  )) : /* @__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",
+    {
+      colSpan: columns.length,
+      className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors"
+    },
+    noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
+  ))));
+}
+Table.displayName = "Table";
+
+export { Table };

package/dist/index.d.ts

@@ -369,6 +369,8 @@ interface DataTableProps<TData, TValue> {
     pagination?: PaginationProps;
     vwDiff?: number;
     vhDiff?: number;
+    className?: string;
+    noScroll?: boolean;
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 interface Row<TData> {
@@ -393,8 +395,15 @@ interface BuildCellSelect<TData, TValue> {
     onCheckedCellChange: Column<TData, TValue>['onCheckedCellChange'];
 }
 type Meta = Record<string, string | number>;
+interface TableProps<TData, TValue> {
+    table: Table<TData>;
+    isLoading?: boolean;
+    columns: Column<TData, TValue>[];
+    noResults?: React.ReactNode;
+    onIsSelected?: (row: Row$1<TData>) => boolean;
+}
 
-declare function DataTable<TData, TValue>({ 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, className, noScroll, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -550,9 +559,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -713,7 +722,7 @@ declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive
 declare const TooltipArrow: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>>;
 declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const tooltipContentVariants: (props?: ({
-    color?: "white" | "black" | null | undefined;
+    color?: "black" | "white" | null | undefined;
     arrow?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TooltipContentProps extends React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
@@ -809,4 +818,4 @@ declare const fonts: {
 };
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Rpa, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tag, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };
-export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TagProps, TextColor, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
+export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TableProps, TagProps, TextColor, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/package.json

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