lecom-ui 5.2.43 → 5.2.44

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 +84 -56
  2. package/dist/components/Pagination/Pagination.js +1 -1
  3. package/dist/index.d.ts +5 -2
  4. package/package.json +1 -1
package/dist/components/DataTable/DataTable.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import { cn } from '../../lib/utils.js';
3
- import { getSortedRowModel, getCoreRowModel, useReactTable } 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
6
  import { buildColumns } from './DataTable.utils.js';
7
7
  import { Table } from './Table.js';
8
- import { useOptimizedTable } from './useOptimizedTable.js';
9
8
 
10
- const DataTable = React.memo(function DataTable2({
9
+ function DataTable({
11
10
  isLoading,
12
11
  columns,
13
12
  data,
@@ -22,61 +21,90 @@ const DataTable = React.memo(function DataTable2({
22
21
  onIsSelected
23
22
  }) {
24
23
  const [sorting, setSorting] = React.useState([]);
25
- const { tableRef, scrollAreaRef, scrollLeft } = useOptimizedTable({
26
- columns,
27
- isLoading: isLoading ?? false
24
+ const table = useReactTable({
25
+ data,
26
+ columns: buildColumns({ columns, size }),
27
+ getCoreRowModel: getCoreRowModel(),
28
+ onSortingChange: setSorting,
29
+ getSortedRowModel: getSortedRowModel(),
30
+ state: {
31
+ sorting
32
+ }
28
33
  });
29
- const tableConfig = React.useMemo(
30
- () => ({
31
- data,
32
- columns: buildColumns({ columns, size }),
33
- getCoreRowModel: getCoreRowModel(),
34
- onSortingChange: setSorting,
35
- getSortedRowModel: getSortedRowModel(),
36
- state: {
37
- sorting
38
- }
39
- }),
40
- [data, columns, size, sorting]
41
- );
42
- const table = useReactTable(tableConfig);
43
- const containerStyle = React.useMemo(
44
- () => ({
45
- width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
46
- height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
47
- }),
48
- [vwDiff, vhDiff]
49
- );
50
- const paginationComponent = React.useMemo(() => {
51
- if (!pagination) return null;
34
+ const styleDataTableContainer = () => ({
35
+ width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
36
+ height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
37
+ });
38
+ const hasPagination = () => {
39
+ if (!pagination) {
40
+ return null;
41
+ }
52
42
  return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
53
- }, [pagination]);
54
- const tableComponent = React.useMemo(
55
- () => /* @__PURE__ */ React.createElement(
56
- Table,
57
- {
58
- ref: tableRef,
59
- table,
60
- columns,
61
- noResults,
62
- onIsSelected,
63
- isLoading,
64
- size,
65
- skeleton,
66
- scrollLeft
67
- }
68
- ),
69
- [
70
- tableRef,
43
+ };
44
+ React.useEffect(() => {
45
+ if (!isLoading) {
46
+ const listRows = document.querySelectorAll(`table#data-table tr`);
47
+ listRows.forEach((listRow, listRowIndex) => {
48
+ const rowsElem = listRow.querySelectorAll("[data-fixed]");
49
+ rowsElem.forEach((rowElem, rowElemIndex) => {
50
+ const beforeElem = rowsElem[rowElemIndex - 1];
51
+ const currentElem = rowElem;
52
+ const beforeElemWidth = beforeElem?.getBoundingClientRect()?.width ?? 0;
53
+ const beforeElemLeft = beforeElem?.style?.left ? Number(beforeElem.style.left.replace(/px/g, "")) : 0;
54
+ const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
55
+ const lastRow = listRows.length - 1 === listRowIndex;
56
+ const currentElemIsTh = currentElem.tagName === "TH";
57
+ const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
58
+ const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
59
+ currentElem.style.position = "sticky";
60
+ currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
61
+ currentElem.style.boxShadow = boxShadow;
62
+ if (lastColumnFixed) {
63
+ currentElem.setAttribute("data-separator-fixed", "true");
64
+ }
65
+ });
66
+ });
67
+ }
68
+ }, [isLoading]);
69
+ const onScroll = (e) => {
70
+ const target = e.target;
71
+ const elemSeparator = document.querySelectorAll("[data-separator-fixed]");
72
+ const countSeparator = elemSeparator.length - 1;
73
+ if (target.scrollLeft > 0) {
74
+ elemSeparator.forEach((elem, i) => {
75
+ const separator = elem;
76
+ if (countSeparator === i) {
77
+ separator.style.boxShadow = "#c9c9c9 -0.5px 0px 0px inset";
78
+ } else {
79
+ separator.style.boxShadow = `#c9c9c9 -0.5px ${i === 0 ? "-1.5px" : "-0.5px"} 0px inset`;
80
+ }
81
+ });
82
+ } else {
83
+ elemSeparator.forEach((elem, i) => {
84
+ const separator = elem;
85
+ if (i === 0) {
86
+ separator.style.boxShadow = "#c9c9c9 0px -1.5px 0px inset";
87
+ } else {
88
+ separator.style.boxShadow = `#c9c9c9 0px ${countSeparator === i ? "0px" : "-0.5px"} 0px inset`;
89
+ }
90
+ });
91
+ }
92
+ };
93
+ React.useEffect(() => {
94
+ document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
95
+ return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
96
+ }, []);
97
+ const renderTable = () => /* @__PURE__ */ React.createElement(
98
+ Table,
99
+ {
71
100
  table,
72
101
  columns,
73
102
  noResults,
74
103
  onIsSelected,
75
104
  isLoading,
76
105
  size,
77
- skeleton,
78
- scrollLeft
79
- ]
106
+ skeleton
107
+ }
80
108
  );
81
109
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
82
110
  "div",
@@ -85,18 +113,18 @@ const DataTable = React.memo(function DataTable2({
85
113
  "bg-white rounded-[8px] p-2 transition-all duration-500",
86
114
  className
87
115
  ),
88
- style: noScroll ? void 0 : { width: containerStyle.width }
116
+ style: noScroll ? void 0 : { width: styleDataTableContainer().width }
89
117
  },
90
- noScroll ? tableComponent : /* @__PURE__ */ React.createElement(ScrollArea, { ref: scrollAreaRef, type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
118
+ noScroll ? renderTable() : /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
91
119
  "div",
92
120
  {
93
121
  className: "transition-all duration-500",
94
- style: { maxHeight: containerStyle.height }
122
+ style: { maxHeight: styleDataTableContainer().height }
95
123
  },
96
- tableComponent
124
+ renderTable()
97
125
  ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
98
- ), paginationComponent);
99
- });
126
+ ), hasPagination());
127
+ }
100
128
  DataTable.displayName = "DataTable";
101
129
 
102
130
  export { DataTable };
package/dist/components/Pagination/Pagination.js CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { useTranslation } from 'react-i18next';
3
3
  import { Button } from '../Button/Button.js';
4
4
  import { cn } from '../../lib/utils.js';
5
- import { ChevronDown, MoreHorizontal, ChevronLast, ChevronRight, ChevronLeft, ChevronFirst } from 'lucide-react';
5
+ import { MoreHorizontal, ChevronRight, ChevronLeft, ChevronFirst, ChevronLast, ChevronDown } from 'lucide-react';
6
6
  import { initializeI18n } from '../../i18n/index.js';
7
7
  import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
8
8
  import { Typography } from '../Typography/Typography.js';
package/dist/index.d.ts CHANGED
@@ -529,7 +529,10 @@ interface TableProps<TData, TValue> {
529
529
  onIsSelected?: (row: Row$1<TData>) => boolean;
530
530
  }
531
531
 
532
- declare const DataTable: React$1.MemoExoticComponent<(<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, size, skeleton, onIsSelected, }: DataTableProps<TData, TValue>) => React$1.JSX.Element)>;
532
+ declare function DataTable<TData, TValue>({ isLoading, columns, data, noResults, pagination, vwDiff, vhDiff, className, noScroll, size, skeleton, onIsSelected, }: DataTableProps<TData, TValue>): React$1.JSX.Element;
533
+ declare namespace DataTable {
534
+ var displayName: string;
535
+ }
533
536
 
534
537
  interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
535
538
  noClose?: boolean;
@@ -875,7 +878,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
875
878
  declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
876
879
 
877
880
  declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
878
- declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLTableCellElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
881
+ declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
879
882
  className?: string;
880
883
  collapsedSize?: number | undefined;
881
884
  collapsible?: boolean | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "5.2.43",
3
+ "version": "5.2.44",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",