lecom-ui 4.8.1 → 4.8.3

package/dist/components/Button/Button.js

@@ -130,7 +130,7 @@ const Button = React.forwardRef(
     customStyles,
     isActive,
     children,
-    isLoaging,
+    isLoading,
     ...props
   }, ref) => {
     if (customStyles) {
@@ -146,7 +146,7 @@ const Button = React.forwardRef(
           ...props
         },
         children,
-        isLoaging && /* @__PURE__ */ React.createElement(Spin, null)
+        isLoading && /* @__PURE__ */ React.createElement(Spin, null)
       );
     }
     const Comp = "button";
@@ -161,7 +161,7 @@ const Button = React.forwardRef(
         ...props
       },
       children,
-      isLoaging && /* @__PURE__ */ React.createElement(Spin, null)
+      isLoading && /* @__PURE__ */ React.createElement(Spin, null)
     );
   }
 );

package/dist/components/DataTable/DataTable.js

@@ -16,12 +16,13 @@ function DataTable({
   vhDiff,
   className,
   noScroll,
+  size = "middle",
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
   const table = useReactTable({
     data,
-    columns: buildColumns({ columns }),
+    columns: buildColumns({ columns, size }),
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
@@ -99,7 +100,8 @@ function DataTable({
       columns,
       noResults,
       onIsSelected,
-      isLoading
+      isLoading,
+      size
     }
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(

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

@@ -32,7 +32,8 @@ function buildCellSelect({
   );
 }
 function buildColumns({
-  columns
+  columns,
+  size = "middle"
 }) {
   const mappedColumns = columns.map((externalColumn) => ({
     accessorKey: externalColumn.key,
@@ -48,7 +49,7 @@ function buildColumns({
       if (!externalColumn.title) {
         return null;
       }
-      const hasSort = !!externalColumn.onSort;
+      const hasSort = !!externalColumn.onSort || !!externalColumn.onSortClient;
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
       return /* @__PURE__ */ React.createElement(
         "div",
@@ -62,7 +63,7 @@ function buildColumns({
         typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
           Typography,
           {
-            variant: "body-large-500",
+            variant: size === "small" ? "body-medium-500" : "body-large-500",
             textColor: "text-grey-950",
             className: "truncate",
             title: externalColumn.title
@@ -98,7 +99,7 @@ function buildColumns({
       return /* @__PURE__ */ React.createElement(
         Typography,
         {
-          variant: "body-large-400",
+          variant: size === "small" ? "body-medium-400" : "body-large-400",
           textColor: "text-grey-800",
           title: row.getValue(externalColumn.key)
         },
@@ -109,6 +110,13 @@ function buildColumns({
       width: externalColumn.width,
       fixed: externalColumn.fixed,
       truncate: !!externalColumn.truncate
+    },
+    sortingFn: (rowA, rowB, columnId) => {
+      if (externalColumn.onSortClient) {
+        return externalColumn.onSortClient({ rowA, rowB, columnId });
+      } else {
+        return 0;
+      }
     }
   }));
   return mappedColumns;

package/dist/components/DataTable/Table.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { cn } from '../../lib/utils.js';
 import { flexRender } from '@tanstack/react-table';
 import { Skeleton } from '../Skeleton/Skeleton.js';
 
@@ -7,6 +8,7 @@ function Table({
   isLoading,
   columns,
   noResults,
+  size = "middle",
   onIsSelected
 }) {
   const styleColumn = (meta, elem) => {
@@ -38,10 +40,14 @@ function Table({
     "th",
     {
       key: header.id,
-      className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+      className: cn(
+        "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+        size === "small" && "h-10"
+      ),
       "data-header": header.id,
       "data-fixed": getFixed(header.column.columnDef.meta),
-      style: styleColumn(header.column.columnDef.meta, "th")
+      style: styleColumn(header.column.columnDef.meta, "th"),
+      onClick: header.column.getToggleSortingHandler()
     },
     header.isPlaceholder ? null : flexRender(
       header.column.columnDef.header,

package/dist/index.d.ts

@@ -58,7 +58,7 @@ interface CustomStyles$1 {
 interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
     customStyles?: CustomStyles$1;
     isActive?: boolean;
-    isLoaging?: boolean;
+    isLoading?: boolean;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -331,6 +331,11 @@ interface ColumnSort<TData, TValue> {
     table: Table<TData>;
     column: Column$1<TData, TValue>;
 }
+interface ColumnSortClient<TData> {
+    rowA: Row<TData>['row'];
+    rowB: Row<TData>['row'];
+    columnId: string;
+}
 type ColumnTitle<TData, TValue> = ColumnSort<TData, TValue>;
 interface CheckedHeader<TData, TValue> {
     table: Table<TData>;
@@ -357,6 +362,7 @@ interface Column<TData, TValue> {
     truncate?: boolean;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => void;
+    onSortClient?: ({ rowA, rowB, columnId }: ColumnSortClient<TData>) => number;
     checkedHeader?: ({ table, column }: CheckedHeader<TData, TValue>) => boolean;
     checkedCell?: ({ row }: CheckedCell<TData>) => boolean;
     onCheckedHeaderChange?: ({ table, column, value, }: CheckedHeaderChange<TData, TValue>) => void;
@@ -372,6 +378,7 @@ interface DataTableProps<TData, TValue> {
     vhDiff?: number;
     className?: string;
     noScroll?: boolean;
+    size?: 'small' | 'middle';
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 interface Row<TData> {
@@ -383,6 +390,7 @@ interface Header<TData, TValue> {
 }
 interface BuildColumns<TData, TValue> {
     columns: Column<TData, TValue>[];
+    size?: 'small' | 'middle';
 }
 interface BuildHeaderSelect<TData, TValue> {
     table: Table<TData>;
@@ -401,10 +409,11 @@ interface TableProps<TData, TValue> {
     isLoading?: boolean;
     columns: Column<TData, TValue>[];
     noResults?: React.ReactNode;
+    size?: 'small' | 'middle';
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 
-declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
+declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, size, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -560,9 +569,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;
@@ -819,4 +828,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, TableProps, 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, ColumnSortClient, 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.8.1",
+  "version": "4.8.3",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-table": "^8.21.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "hex-color-opacity": "^0.4.2",