lecom-ui 4.8.2 → 4.8.4

package/dist/components/DataTable/DataTable.js

@@ -17,6 +17,7 @@ function DataTable({
   className,
   noScroll,
   size = "middle",
+  skeleton,
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
@@ -101,7 +102,8 @@ function DataTable({
       noResults,
       onIsSelected,
       isLoading,
-      size
+      size,
+      skeleton
     }
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(

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

@@ -49,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",
@@ -110,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

@@ -9,6 +9,7 @@ function Table({
   columns,
   noResults,
   size = "middle",
+  skeleton,
   onIsSelected
 }) {
   const styleColumn = (meta, elem) => {
@@ -26,8 +27,11 @@ function Table({
     };
   };
   const getFixed = (meta) => meta.fixed;
-  const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
   if (isLoading) {
+    if (skeleton) {
+      return skeleton;
+    }
+    const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
     return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
       Skeleton,
       {
@@ -46,7 +50,8 @@ function Table({
       ),
       "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

@@ -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;
@@ -373,6 +379,7 @@ interface DataTableProps<TData, TValue> {
     className?: string;
     noScroll?: boolean;
     size?: 'small' | 'middle';
+    skeleton?: React.ReactNode;
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 interface Row<TData> {
@@ -404,10 +411,11 @@ interface TableProps<TData, TValue> {
     columns: Column<TData, TValue>[];
     noResults?: React.ReactNode;
     size?: 'small' | 'middle';
+    skeleton?: React.ReactNode;
     onIsSelected?: (row: Row$1<TData>) => boolean;
 }
 
-declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, size, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
+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;
 }
@@ -822,4 +830,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.2",
+  "version": "4.8.4",
   "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",