lecom-ui 4.7.9 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/DataTable/DataTable.js +16 -78
  2. package/dist/components/DataTable/Table.js +79 -0
  3. package/dist/index.d.ts +13 -5
  4. package/package.json +1 -1
package/dist/components/DataTable/DataTable.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { cn } from '../../lib/utils.js';
3
- import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
3
+ import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
4
4
  import { Pagination } from '../Pagination/Pagination.js';
5
5
  import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
6
- import { Skeleton } from '../Skeleton/Skeleton.js';
7
6
  import { buildColumns } from './DataTable.utils.js';
7
+ import { Table } from './Table.js';
8
8
 
9
9
  function DataTable({
10
10
  isLoading,
@@ -15,6 +15,7 @@ function DataTable({
15
15
  vwDiff,
16
16
  vhDiff,
17
17
  className,
18
+ noScroll,
18
19
  onIsSelected
19
20
  }) {
20
21
  const [sorting, setSorting] = React.useState([]);
@@ -38,22 +39,6 @@ function DataTable({
38
39
  }
39
40
  return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
40
41
  };
41
- const styleColumn = (meta, elem) => {
42
- if (elem === "td" && meta.truncate) {
43
- return {
44
- width: meta.width,
45
- overflow: "hidden",
46
- maxWidth: "0",
47
- textOverflow: "ellipsis",
48
- whiteSpace: "nowrap"
49
- };
50
- }
51
- return {
52
- width: meta.width
53
- };
54
- };
55
- const getFixed = (meta) => meta.fixed;
56
- const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
57
42
  React.useEffect(() => {
58
43
  if (!isLoading) {
59
44
  const listRows = document.querySelectorAll(`table#data-table tr`);
@@ -107,6 +92,16 @@ function DataTable({
107
92
  document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
108
93
  return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
109
94
  }, []);
95
+ const renderTable = () => /* @__PURE__ */ React.createElement(
96
+ Table,
97
+ {
98
+ table,
99
+ columns,
100
+ noResults,
101
+ onIsSelected,
102
+ isLoading
103
+ }
104
+ );
110
105
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
111
106
  "div",
112
107
  {
@@ -114,72 +109,15 @@ function DataTable({
114
109
  "bg-white rounded-[8px] p-2 transition-all duration-500",
115
110
  className
116
111
  ),
117
- style: { width: styleDataTableContainer().width }
112
+ style: noScroll ? void 0 : { width: styleDataTableContainer().width }
118
113
  },
119
- /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
114
+ noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
120
115
  "div",
121
116
  {
122
117
  className: "transition-all duration-500",
123
118
  style: { maxHeight: styleDataTableContainer().height }
124
119
  },
125
- isLoading ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
126
- Skeleton,
127
- {
128
- key: id,
129
- className: "w-full h-[25px] rounded-lg bg-grey-200"
130
- }
131
- ))) : /* @__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(
132
- "th",
133
- {
134
- key: header.id,
135
- className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
136
- "data-header": header.id,
137
- "data-fixed": getFixed(
138
- header.column.columnDef.meta
139
- ),
140
- style: styleColumn(
141
- header.column.columnDef.meta,
142
- "th"
143
- )
144
- },
145
- header.isPlaceholder ? null : flexRender(
146
- header.column.columnDef.header,
147
- header.getContext()
148
- )
149
- ))))), /* @__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(
150
- "tr",
151
- {
152
- key: row.id,
153
- "data-state": onIsSelected?.(row) ? "selected" : "",
154
- className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
155
- },
156
- row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
157
- "td",
158
- {
159
- key: cell.id,
160
- className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
161
- "data-column": cell.column.id,
162
- "data-fixed": getFixed(
163
- cell.column.columnDef.meta
164
- ),
165
- style: styleColumn(
166
- cell.column.columnDef.meta,
167
- "td"
168
- )
169
- },
170
- flexRender(
171
- cell.column.columnDef.cell,
172
- cell.getContext()
173
- )
174
- ))
175
- )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
176
- "td",
177
- {
178
- colSpan: columns.length,
179
- className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors"
180
- },
181
- noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
182
- ))))
120
+ renderTable()
183
121
  ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
184
122
  ), hasPagination());
185
123
  }
package/dist/components/DataTable/Table.js ADDED
@@ -0,0 +1,79 @@
1
+ import * as React from 'react';
2
+ import { flexRender } from '@tanstack/react-table';
3
+ import { Skeleton } from '../Skeleton/Skeleton.js';
4
+
5
+ function Table({
6
+ table,
7
+ isLoading,
8
+ columns,
9
+ noResults,
10
+ onIsSelected
11
+ }) {
12
+ const styleColumn = (meta, elem) => {
13
+ if (elem === "td" && meta.truncate) {
14
+ return {
15
+ width: meta.width,
16
+ overflow: "hidden",
17
+ maxWidth: "0",
18
+ textOverflow: "ellipsis",
19
+ whiteSpace: "nowrap"
20
+ };
21
+ }
22
+ return {
23
+ width: meta.width
24
+ };
25
+ };
26
+ const getFixed = (meta) => meta.fixed;
27
+ const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
28
+ if (isLoading) {
29
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
30
+ Skeleton,
31
+ {
32
+ key: id,
33
+ className: "w-full h-[25px] rounded-lg bg-grey-200"
34
+ }
35
+ )));
36
+ }
37
+ 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(
38
+ "th",
39
+ {
40
+ key: header.id,
41
+ className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
42
+ "data-header": header.id,
43
+ "data-fixed": getFixed(header.column.columnDef.meta),
44
+ style: styleColumn(header.column.columnDef.meta, "th")
45
+ },
46
+ header.isPlaceholder ? null : flexRender(
47
+ header.column.columnDef.header,
48
+ header.getContext()
49
+ )
50
+ ))))), /* @__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(
51
+ "tr",
52
+ {
53
+ key: row.id,
54
+ "data-state": onIsSelected?.(row) ? "selected" : "",
55
+ className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
56
+ },
57
+ row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
58
+ "td",
59
+ {
60
+ key: cell.id,
61
+ className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
62
+ "data-column": cell.column.id,
63
+ "data-fixed": getFixed(cell.column.columnDef.meta),
64
+ style: styleColumn(cell.column.columnDef.meta, "td")
65
+ },
66
+ flexRender(cell.column.columnDef.cell, cell.getContext())
67
+ ))
68
+ )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
69
+ "td",
70
+ {
71
+ colSpan: columns.length,
72
+ className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors"
73
+ },
74
+ noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
75
+ ))));
76
+ }
77
+ Table.displayName = "Table";
78
+
79
+ export { Table };
package/dist/index.d.ts CHANGED
@@ -370,6 +370,7 @@ interface DataTableProps<TData, TValue> {
370
370
  vwDiff?: number;
371
371
  vhDiff?: number;
372
372
  className?: string;
373
+ noScroll?: boolean;
373
374
  onIsSelected?: (row: Row$1<TData>) => boolean;
374
375
  }
375
376
  interface Row<TData> {
@@ -394,8 +395,15 @@ interface BuildCellSelect<TData, TValue> {
394
395
  onCheckedCellChange: Column<TData, TValue>['onCheckedCellChange'];
395
396
  }
396
397
  type Meta = Record<string, string | number>;
398
+ interface TableProps<TData, TValue> {
399
+ table: Table<TData>;
400
+ isLoading?: boolean;
401
+ columns: Column<TData, TValue>[];
402
+ noResults?: React.ReactNode;
403
+ onIsSelected?: (row: Row$1<TData>) => boolean;
404
+ }
397
405
 
398
- declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
406
+ declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
399
407
  declare namespace DataTable {
400
408
  var displayName: string;
401
409
  }
@@ -551,9 +559,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
551
559
  }
552
560
 
553
561
  declare const inputVariants: (props?: ({
554
- variant?: "filled" | "default" | "borderless" | null | undefined;
555
- size?: "small" | "large" | "default" | null | undefined;
556
- radius?: "small" | "large" | "default" | null | undefined;
562
+ variant?: "default" | "filled" | "borderless" | null | undefined;
563
+ size?: "default" | "small" | "large" | null | undefined;
564
+ radius?: "default" | "small" | "large" | null | undefined;
557
565
  } & class_variance_authority_types.ClassProp) | undefined) => string;
558
566
  interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
559
567
  sufix?: React$1.ReactNode;
@@ -810,4 +818,4 @@ declare const fonts: {
810
818
  };
811
819
 
812
820
  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 };
813
- 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 };
821
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "4.7.9",
3
+ "version": "4.8.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",