ivt
Version:
Ivt Components Library
831 lines (815 loc) • 41.3 kB
JavaScript
import * as React$1 from 'react';
import React__default, { forwardRef, createElement } from 'react';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from '../chunks/select-C4BJbkha.mjs';
import { C as ChevronLeft } from '../chunks/chevron-left-D7OzIyKL.mjs';
import { C as ChevronRight } from '../chunks/chevron-right-mC6NR8jW.mjs';
import { c as PaginationItem, f as PaginationEllipsis } from '../chunks/pagination-BaIJ0fC9.mjs';
import { B as Button } from '../chunks/button-Co_1yLv6.mjs';
import { S as Skeleton } from '../chunks/skeleton-CIulxewv.mjs';
import { e as TableRow, f as TableCell, T as Table, a as TableHeader, d as TableHead, b as TableBody } from '../chunks/table-Bxaxu8Lu.mjs';
import { c as createLucideIcon } from '../chunks/createLucideIcon-DLrNgMqk.mjs';
import { S as Sortable, b as SortableItem } from '../chunks/sortable-CjI-AdZJ.mjs';
import { S as Search, C as Command, b as CommandInput, c as CommandList, d as CommandEmpty, f as CommandItem, e as CommandGroup } from '../chunks/command-IckfUQsK.mjs';
import { I as Input } from '../chunks/input-BEkvMaQp.mjs';
import { C as ChevronDown } from '../chunks/chevron-down-DNXEgdv9.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-CsYW0nDm.mjs';
import { C as Check } from '../chunks/check-BBGTedl-.mjs';
import '../chunks/bundle-mjs-BYcyWisL.mjs';
import '@radix-ui/react-select';
import '../chunks/ellipsis-xV1ovGxI.mjs';
import '@radix-ui/react-slot';
import 'class-variance-authority';
import 'react-dom';
import '../chunks/index-BRYGnp2Q.mjs';
import '../chunks/index-Bl-WJHvp.mjs';
import '../chunks/index-1tQVI0Jh.mjs';
import '../chunks/index-DT8WgpCS.mjs';
import 'react/jsx-runtime';
import '../chunks/index-tkRL9Tft.mjs';
import '../chunks/index-DKOlG3mh.mjs';
import '../chunks/index-D4FMFHi9.mjs';
import '../chunks/index-DUpRrJTH.mjs';
import '../chunks/index-DgKlJYZP.mjs';
import '../chunks/index-Cbm3--wc.mjs';
import '../chunks/index-DvCZGX3H.mjs';
import '../chunks/tslib.es6-DXUeYCTx.mjs';
import '../chunks/index-BTe1rv5Z.mjs';
import '../chunks/index-C6s8KI_8.mjs';
import '../chunks/dialog-BkF50Tmo.mjs';
import '../chunks/x-BOMmTgZd.mjs';
import '../chunks/index-aLIsJMgt.mjs';
import '../chunks/index-DmY774z-.mjs';
const __iconNode$1 = [
[
"path",
{
d: "M12 5v14",
key: "s699le"
}
],
[
"path",
{
d: "m19 12-7 7-7-7",
key: "1idqje"
}
]
];
const ArrowDown = createLucideIcon("ArrowDown", __iconNode$1);
const __iconNode = [
[
"path",
{
d: "m5 12 7-7 7 7",
key: "hav0vg"
}
],
[
"path",
{
d: "M12 19V5",
key: "x0mq9r"
}
]
];
const ArrowUp = createLucideIcon("ArrowUp", __iconNode);
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var _excluded$Q = [
"color"
];
var CaretSortIcon = /*#__PURE__*/ forwardRef(function(_ref, forwardedRef) {
var _ref$color = _ref.color, color = _ref$color === void 0 ? 'currentColor' : _ref$color, props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
return createElement("svg", Object.assign({
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, props, {
ref: forwardedRef
}), createElement("path", {
d: "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",
fill: color,
fillRule: "evenodd",
clipRule: "evenodd"
}));
});
//
/**
* If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
*/ function flexRender(Comp, props) {
return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/ React$1.createElement(Comp, props) : Comp;
}
function isReactComponent(component) {
return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);
}
function isClassComponent(component) {
return typeof component === 'function' && (()=>{
const proto = Object.getPrototypeOf(component);
return proto.prototype && proto.prototype.isReactComponent;
})();
}
function isExoticComponent(component) {
return typeof component === 'object' && typeof component.$$typeof === 'symbol' && [
'react.memo',
'react.forward_ref'
].includes(component.$$typeof.description);
}
function DataTablePagination({ table, pageSizeOptions = [
20,
30,
50,
100,
200
], dataLabel = "Fundos", infoExtraLabel, showPaginationControls = true, showDataLabel = true, footerAction, maxVisualRows }) {
const pageSize = pageSizeOptions[0];
const currentPage = table.getState().pagination.pageIndex + 1;
const rowCount = table.getRowCount();
const totalPageCount = Math.ceil(rowCount / table.getState().pagination.pageSize);
const renderPageNumbers = ()=>{
const items = [];
const maxVisiblePages = 3;
if (totalPageCount <= maxVisiblePages) {
for(let i = 1; i <= totalPageCount; i++){
items.push(/*#__PURE__*/ React__default.createElement(Button, {
variant: currentPage === i ? "outline" : "ghost",
key: i,
onClick: ()=>table.setPageIndex(i - 1),
className: "size-9"
}, i));
}
} else {
items.push(/*#__PURE__*/ React__default.createElement(Button, {
variant: currentPage === 1 ? "outline" : "ghost",
key: 1,
onClick: ()=>table.setPageIndex(0),
className: "size-9"
}, "1"));
const start = Math.max(2, Math.min(currentPage, totalPageCount - (maxVisiblePages - 1)));
const end = Math.min(totalPageCount - 1, start + maxVisiblePages - 2);
if (start > 2) {
items.push(/*#__PURE__*/ React__default.createElement(PaginationItem, {
key: "ellipsis-start",
className: "list-none"
}, /*#__PURE__*/ React__default.createElement(PaginationEllipsis, null)));
}
for(let i = start; i <= end; i++){
items.push(/*#__PURE__*/ React__default.createElement(Button, {
variant: currentPage === i ? "outline" : "ghost",
key: i,
onClick: ()=>table.setPageIndex(i - 1),
className: "size-9"
}, i));
}
if (end < totalPageCount - 1) {
items.push(/*#__PURE__*/ React__default.createElement(PaginationItem, {
key: "ellipsis-end",
className: "list-none"
}, /*#__PURE__*/ React__default.createElement(PaginationEllipsis, null)));
}
items.push(/*#__PURE__*/ React__default.createElement(Button, {
variant: currentPage === totalPageCount ? "outline" : "ghost",
key: totalPageCount,
onClick: ()=>table.setPageIndex(totalPageCount - 1)
}, totalPageCount));
}
return items;
};
if (!showPaginationControls && !showDataLabel) {
return null;
}
return /*#__PURE__*/ React__default.createElement("div", {
className: "mt-4 flex flex-wrap items-center justify-between gap-2"
}, showDataLabel && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement("div", {
className: "text-muted-foreground flex items-center gap-4 text-sm"
}, /*#__PURE__*/ React__default.createElement("p", {
className: "ml-2"
}, "Mostrando", " ", (maxVisualRows ? Math.min(table.getRowModel().rows.length, maxVisualRows) : table.getRowModel().rows.length).toLocaleString(), " ", "de ", rowCount, " ", dataLabel, ". ", infoExtraLabel && infoExtraLabel)), /*#__PURE__*/ React__default.createElement("div", null, footerAction && /*#__PURE__*/ React__default.createElement("div", null, footerAction))), showPaginationControls && /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-wrap items-center justify-between gap-2 gap-y-4 ml-auto"
}, /*#__PURE__*/ React__default.createElement(Select, {
value: String(table.getState().pagination.pageSize) || String(pageSize),
onValueChange: (value)=>table.setPageSize(Number(value))
}, /*#__PURE__*/ React__default.createElement(SelectTrigger, {
className: "w-fit"
}, /*#__PURE__*/ React__default.createElement(SelectValue, {
placeholder: `Mostrar ${table.getState().pagination.pageSize || pageSize}`
})), /*#__PURE__*/ React__default.createElement(SelectContent, null, rowCount && (rowCount === 0 || rowCount < pageSize) ? /*#__PURE__*/ React__default.createElement(SelectItem, {
value: String(pageSize)
}, "Mostrar ", pageSize) : pageSizeOptions.map((pageSize)=>/*#__PURE__*/ React__default.createElement(SelectItem, {
key: pageSize,
value: String(pageSize)
}, "Mostrar ", pageSize)))), /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-wrap gap-2 gap-y-4"
}, /*#__PURE__*/ React__default.createElement(Button, {
variant: "ghost",
onClick: ()=>table.previousPage(),
disabled: !table.getCanPreviousPage(),
"aria-label": "Ir para página anterior",
className: "gap-1"
}, /*#__PURE__*/ React__default.createElement(ChevronLeft, {
className: "size-4"
}), "Anterior"), /*#__PURE__*/ React__default.createElement("div", {
className: "flex gap-2"
}, renderPageNumbers()), /*#__PURE__*/ React__default.createElement(Button, {
variant: "ghost",
onClick: ()=>table.nextPage(),
disabled: !table.getCanNextPage(),
"aria-label": "Ir para próxima página",
className: "gap-1"
}, "Próximo", /*#__PURE__*/ React__default.createElement(ChevronRight, {
className: "size-4"
})))));
}
const DataTablePaginationSkeleton = ({ className })=>{
return /*#__PURE__*/ React__default.createElement("div", {
className: "mt-4 flex flex-wrap items-center justify-between gap-2"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: cn("h-5 w-40", className)
}), /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-wrap items-center justify-between gap-2 gap-y-4"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: cn("h-10 w-28", className)
}), /*#__PURE__*/ React__default.createElement(Skeleton, {
className: cn("h-9 w-[16rem]", className)
})));
};
function DataTableRowSkeleton(props) {
const { columnCount, rowCount = 8, cellWidths = [
"auto"
], shrinkZero = false } = props;
return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, Array.from({
length: rowCount
}).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
key: `row-${String(i)}`,
className: "hover:bg-transparent"
}, Array.from({
length: columnCount
}).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableCell, {
key: `cell-${String(i)}-${j}`,
style: {
width: cellWidths[j],
minWidth: shrinkZero ? cellWidths[j] : "auto"
}
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-6 w-full"
}))))));
}
const DataTableMainFrame = ({ table, columns, isLoadingTable, loadingContent, setQueryParams, dataLabel, actionColumns = [], messageEmpty = /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, "Sem resultados"), dividingColumnKey, pageSizeOptions, className, scrollMaxHeightClass = "sm:max-h-[calc(100vh-300px)]", isScrollable = false, fixedHeader = false, showPagination = true, showDataLabel = true, renderTooltip, renderSubComponent, infoExtraLabel, footerAction, maxVisualRows })=>{
const currentPage = Number(table.getState().pagination.pageIndex).toString();
const pageSize = Number(table.getState().pagination.pageSize).toString();
const sorting = table.getState().sorting;
React__default.useEffect(()=>{
if (!setQueryParams) return;
const sortingParams = {
sortingBy: "",
order: ""
};
if (sorting.length > 0) {
sortingParams.sortingBy = sorting[0].id;
sortingParams.order = sorting[0].desc ? "DESC" : "ASC";
}
setQueryParams((prev)=>({
...prev,
pageSize,
page: currentPage,
...sortingParams
}));
}, [
currentPage,
pageSize,
setQueryParams,
sorting
]);
const renderTableBodyContent = ()=>{
if (isLoadingTable && !loadingContent) {
return /*#__PURE__*/ React__default.createElement(DataTableRowSkeleton, {
columnCount: table.getAllColumns().length
});
}
if (isLoadingTable && loadingContent) {
return /*#__PURE__*/ React__default.createElement(TableCell, {
colSpan: columns.length,
className: "h-24 text-center"
}, loadingContent);
}
if (table.getRowModel().rows.length === 0) {
return /*#__PURE__*/ React__default.createElement(TableRow, null, /*#__PURE__*/ React__default.createElement(TableCell, {
colSpan: columns.length,
className: "h-24 text-center"
}, /*#__PURE__*/ React__default.createElement("span", {
className: "inline-block max-w-120 text-wrap wrap-break-word"
}, messageEmpty)));
}
const rows = table.getRowModel().rows;
const rowsToRender = maxVisualRows ? rows.slice(0, maxVisualRows) : rows;
return rowsToRender.map((row, index)=>{
// Se estivermos usando renderSubComponent (modo Master-Detail),
// ignoramos as sub-linhas no loop principal para não duplicá-las
if (renderSubComponent && row.depth > 0) {
return null;
}
const rowKey = row.id ?? String(index);
const rowContent = row.getVisibleCells().map((cell)=>{
const content = flexRender(cell.column.columnDef.cell, cell.getContext());
return /*#__PURE__*/ React__default.createElement(TableCell, {
key: cell.id,
className: cn("p-2", dividingColumnKey?.includes(cell.column.id) && "border-r", cell.column.columnDef.meta?.className)
}, content);
});
const rowWithTooltip = renderTooltip ? renderTooltip(row, rowContent) : /*#__PURE__*/ React__default.createElement(TableRow, {
key: rowKey,
"data-state": row.getIsSelected() && "selected",
className: cn("even:bg-body/50")
}, rowContent);
return /*#__PURE__*/ React__default.createElement(React__default.Fragment, {
key: rowKey
}, rowWithTooltip, row.getIsExpanded() && renderSubComponent && /*#__PURE__*/ React__default.createElement(TableRow, {
className: cn("even:bg-body/50")
}, /*#__PURE__*/ React__default.createElement(TableCell, {
colSpan: row.getVisibleCells().length
}, renderSubComponent({
row
}))));
});
};
const shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;
const tableContent = /*#__PURE__*/ React__default.createElement("div", {
className: cn("bg-background mx-1 h-full w-full rounded-md border whitespace-nowrap", className)
}, /*#__PURE__*/ React__default.createElement("div", {
className: cn("relative w-full overflow-auto", shouldForceMinHeight && "force-min-height", isScrollable && scrollMaxHeightClass && scrollMaxHeightClass)
}, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, {
className: cn(fixedHeader && "bg-background sticky top-0 z-10 shadow-[0_1px_0_hsl(240_6%_90%)]")
}, table.getHeaderGroups().map((headerGroup)=>{
return /*#__PURE__*/ React__default.createElement(TableRow, {
key: headerGroup.id
}, headerGroup.headers.map((header)=>{
const { column: { id } } = header;
const isActionsColumn = [
"actions",
...actionColumns
].includes(id);
return /*#__PURE__*/ React__default.createElement(TableHead, {
className: cn(dividingColumnKey?.includes(id) ? "border-r" : "", header.column.columnDef.meta?.className, "static"),
key: header.id
}, header.isPlaceholder ? null : /*#__PURE__*/ React__default.createElement("div", {
className: cn(!isActionsColumn && header.column.getCanSort() ? "flex w-fit items-center justify-start cursor-pointer gap-1 font-medium" : "", header.column.columnDef.meta?.headerClassName),
onClick: !isActionsColumn ? header.column.getToggleSortingHandler() : undefined
}, flexRender(header.column.columnDef.header, header.getContext()), (!isActionsColumn && header.column.getCanSort() && ({
asc: /*#__PURE__*/ React__default.createElement(ArrowDown, {
className: "h-3.5 w-3.5"
}),
desc: /*#__PURE__*/ React__default.createElement(ArrowUp, {
className: "h-3.5 w-3.5"
}),
false: /*#__PURE__*/ React__default.createElement(CaretSortIcon, {
className: "h-4 w-4"
})
})[header.column.getIsSorted()]) ?? /*#__PURE__*/ React__default.createElement(ArrowDown, {
className: "h-3.5 w-3.5"
})));
}));
})), /*#__PURE__*/ React__default.createElement(TableBody, null, renderTableBodyContent()))));
return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, tableContent, isScrollable ? null : isLoadingTable ? /*#__PURE__*/ React__default.createElement(DataTablePaginationSkeleton, null) : /*#__PURE__*/ React__default.createElement(DataTablePagination, {
table: table,
dataLabel: dataLabel,
pageSizeOptions: pageSizeOptions,
infoExtraLabel: infoExtraLabel,
showPaginationControls: showPagination,
showDataLabel: showDataLabel,
footerAction: footerAction,
maxVisualRows: maxVisualRows
}));
};
// Utils para manipular árvores de forma imutável
/** biome-ignore-all lint/suspicious/noExplicitAny: <any> */ // Encontra um item e retorna caminho + referência
function findItemPath(tree, id, path = []) {
for(let i = 0; i < tree.length; i++){
const node = tree[i];
// Encontrou o item
if (node.id === id) {
return {
path: [
...path,
i
],
node
};
}
// Recursão em subRows
if (Array.isArray(node.subRows) && node.subRows.length > 0) {
const result = findItemPath(node.subRows, id, [
...path,
i,
"subRows"
]);
if (result) return result;
}
}
return null;
}
function removeAtPath(tree, path) {
let ref = tree;
for(let i = 0; i < path.length - 1; i++){
ref = ref[path[i]];
}
const index = path[path.length - 1];
const removed = ref.splice(index, 1)[0];
return removed;
}
function insertAtPath(tree, path, item) {
let ref = tree;
for(let i = 0; i < path.length - 1; i++){
ref = ref[path[i]];
}
const index = path[path.length - 1];
ref.splice(index, 0, item);
}
const getRowKey = (row, rowKey)=>{
if (typeof rowKey === "function") {
return rowKey(row);
}
if (Array.isArray(rowKey)) {
for (const key of rowKey){
if (row[key] !== undefined && row[key] !== null) {
return row[key];
}
}
return "";
}
return row[rowKey];
};
const DataTableMainFrameSortable = ({ table, columns, isLoadingTable, loadingContent, setQueryParams, dataLabel, actionColumns = [], data, messageEmpty = /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, "Sem resultados"), onDataChange, rowKey, dividingColumnKey, pageSizeOptions, className, scrollMaxHeightClass = "sm:max-h-[calc(100vh-300px)]", isScrollable = false, fixedHeader = false, showPagination = true, showDataLabel = true, renderTooltip, infoExtraLabel, footerAction, sortableValue: propValue, sortableOnValueChange: propOnValueChange, sortableOnDragStart: propOnDragStart, sortableOnDragEnd: propOnDragEnd, maxVisualRows })=>{
const currentPage = Number(table.getState().pagination.pageIndex).toString();
const pageSize = Number(table.getState().pagination.pageSize).toString();
const sorting = table.getState().sorting;
const [newData, setNewData] = React__default.useState(data);
const handleValueChange = (updatedData)=>{
setNewData(updatedData);
if (onDataChange) {
onDataChange(updatedData);
}
};
React__default.useEffect(()=>{
setNewData(data);
}, [
data
]);
React__default.useEffect(()=>{
if (!setQueryParams) return;
const sortingParams = {
sortingBy: "",
order: ""
};
if (sorting.length > 0) {
sortingParams.sortingBy = sorting[0].id;
sortingParams.order = sorting[0].desc ? "DESC" : "ASC";
}
setQueryParams((prev)=>({
...prev,
pageSize,
page: currentPage,
...sortingParams
}));
}, [
currentPage,
pageSize,
setQueryParams,
sorting
]);
const renderTableBodyContent = ()=>{
if (isLoadingTable && !loadingContent) {
return /*#__PURE__*/ React__default.createElement(DataTableRowSkeleton, {
columnCount: table.getAllColumns().length
});
}
if (isLoadingTable && loadingContent) {
return /*#__PURE__*/ React__default.createElement(TableCell, {
colSpan: columns.length,
className: "h-24 text-center"
}, loadingContent);
}
if (table.getRowModel().rows.length === 0) {
return /*#__PURE__*/ React__default.createElement(TableRow, null, /*#__PURE__*/ React__default.createElement(TableCell, {
colSpan: columns.length,
className: "h-24 text-center"
}, /*#__PURE__*/ React__default.createElement("span", {
className: "inline-block max-w-120 text-wrap wrap-break-word"
}, messageEmpty)));
}
const rows = table.getRowModel().rows;
const rowsToRender = maxVisualRows ? rows.slice(0, maxVisualRows) : rows;
return rowsToRender.map((row)=>{
const rowData = row.original;
const key = getRowKey(rowData, rowKey);
const rowContent = row.getVisibleCells().map((cell)=>/*#__PURE__*/ React__default.createElement(TableCell, {
key: cell.id,
className: cn("p-2 py-1", dividingColumnKey?.includes(cell.column.id) && "border-r", cell.column.columnDef.meta?.className)
}, flexRender(cell.column.columnDef.cell, cell.getContext())));
const baseRow = /*#__PURE__*/ React__default.createElement(TableRow, {
"data-state": row.getIsSelected() && "selected",
className: cn("even:bg-body/50")
}, rowContent);
const wrappedRow = renderTooltip ? renderTooltip(row, rowContent) : baseRow;
return /*#__PURE__*/ React__default.createElement(SortableItem, {
key: row.id,
value: key,
asChild: true
}, wrappedRow);
});
};
const [activeId, setActiveId] = React__default.useState(null);
// biome-ignore lint/correctness/useExhaustiveDependencies: <useMemo>
const siblings = React__default.useMemo(()=>{
if (!activeId) return table.getRowModel().rows.map((row)=>({
...row.original,
id: getRowKey(row.original, rowKey)
}));
const activeRow = table.getRowModel().rows.find((row)=>getRowKey(row.original, rowKey) === activeId);
if (!activeRow) return [];
const parentId = activeRow.parentId;
return table.getRowModel().rows.filter((row)=>row.parentId === parentId).map((row)=>({
...row.original,
id: getRowKey(row.original, rowKey)
}));
}, [
activeId,
table.getRowModel().rows,
rowKey
]);
const internalHandleDragStart = (event)=>{
setActiveId(event.active.id);
};
const internalHandleDragEnd = (event)=>{
setActiveId(null);
const { active, over } = event;
if (!active || !over) return;
const sourceId = active.id;
const targetId = over.id;
if (sourceId === targetId) return;
const tree = newData.map((item)=>({
...item,
id: getRowKey(item, rowKey)
}));
const source = findItemPath(tree, sourceId);
const target = findItemPath(tree, targetId);
if (!source || !target) return;
// -----------------------------
// 🔒 1. TRAVAR MOVIMENTAÇÃO ENTRE NÍVEIS DIFERENTES
// -----------------------------
const sourcePath = source.path;
const targetPath = target.path;
// Pega o "caminho do pai" (remove o último índice, que é o índice do item em si)
const sourceParentPath = sourcePath.slice(0, -1);
const targetParentPath = targetPath.slice(0, -1);
// Compara se os arrays são iguais (mesmo tamanho e mesmos valores)
const isSameParent = sourceParentPath.length === targetParentPath.length && sourceParentPath.every((val, index)=>val === targetParentPath[index]);
if (!isSameParent) {
return;
}
// -----------------------------
// 🔄 2. MOVIMENTO PERMITIDO → REORDENAR
// -----------------------------
const removedItem = removeAtPath(tree, sourcePath);
const destPath = [
...targetPath
];
destPath[destPath.length - 1] = targetPath[targetPath.length - 1];
insertAtPath(tree, destPath, removedItem);
handleValueChange(tree);
};
const shouldForceMinHeight = table.getRowModel().rows.length > 1 || isLoadingTable;
const finalValue = propValue ?? (maxVisualRows ? table.getRowModel().rows.slice(0, maxVisualRows) : table.getRowModel().rows).map((row)=>({
...row.original,
id: getRowKey(row.original, rowKey)
}));
const finalOnValueChange = propOnValueChange ?? handleValueChange;
const finalOnDragStart = propOnDragStart ?? internalHandleDragStart;
const finalOnDragEnd = propOnDragEnd ?? internalHandleDragEnd;
return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Sortable, {
value: finalValue,
contextItems: siblings,
onValueChange: finalOnValueChange,
onDragStart: finalOnDragStart,
onDragEnd: finalOnDragEnd
}, /*#__PURE__*/ React__default.createElement("div", {
className: cn("bg-background mx-1 h-full w-full rounded-md border whitespace-nowrap", className)
}, /*#__PURE__*/ React__default.createElement("div", {
className: cn("relative w-full overflow-auto", shouldForceMinHeight && "force-min-height", isScrollable && scrollMaxHeightClass && scrollMaxHeightClass)
}, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, {
className: cn(fixedHeader && "bg-background sticky top-0 z-10 shadow-[0_1px_0_hsl(240_6%_90%)]")
}, table.getHeaderGroups().map((headerGroup)=>{
return /*#__PURE__*/ React__default.createElement(TableRow, {
key: headerGroup.id
}, headerGroup.headers.map((header)=>{
const { column: { id } } = header;
const isActionsColumn = [
"actions",
...actionColumns
].includes(id);
return /*#__PURE__*/ React__default.createElement(TableHead, {
className: cn(dividingColumnKey?.includes(id) ? "border-r" : "", header.column.columnDef.meta?.className),
key: header.id
}, header.isPlaceholder ? null : /*#__PURE__*/ React__default.createElement("div", {
className: cn(!isActionsColumn && header.column.getCanSort() ? "flex w-fit items-center justify-start cursor-pointer gap-1 font-medium" : "", header.column.columnDef.meta?.headerClassName),
onClick: !isActionsColumn ? header.column.getToggleSortingHandler() : undefined
}, flexRender(header.column.columnDef.header, header.getContext()), (!isActionsColumn && header.column.getCanSort() && ({
asc: /*#__PURE__*/ React__default.createElement(ArrowDown, {
className: "h-3.5 w-3.5"
}),
desc: /*#__PURE__*/ React__default.createElement(ArrowUp, {
className: "h-3.5 w-3.5"
}),
false: /*#__PURE__*/ React__default.createElement(CaretSortIcon, {
className: "h-4 w-4"
})
})[header.column.getIsSorted()]) ?? /*#__PURE__*/ React__default.createElement(ArrowDown, {
className: "h-3.5 w-3.5"
})));
}));
})), /*#__PURE__*/ React__default.createElement(TableBody, null, renderTableBodyContent()))))), isScrollable ? null : isLoadingTable ? /*#__PURE__*/ React__default.createElement(DataTablePaginationSkeleton, null) : /*#__PURE__*/ React__default.createElement(DataTablePagination, {
table: table,
dataLabel: dataLabel,
pageSizeOptions: pageSizeOptions,
infoExtraLabel: infoExtraLabel,
showPaginationControls: showPagination,
showDataLabel: showDataLabel,
footerAction: footerAction,
maxVisualRows: maxVisualRows
}));
};
function DataTableSearch({ table, keySearch, placeholder }) {
return /*#__PURE__*/ React.createElement("div", {
className: "relative w-full max-w-sm"
}, /*#__PURE__*/ React.createElement(Search, {
className: "text-muted-foreground absolute top-3 left-3 h-4 w-4"
}), /*#__PURE__*/ React.createElement(Input, {
placeholder: placeholder,
value: table.getColumn(keySearch)?.getFilterValue() ?? "",
onChange: (event)=>table.getColumn(keySearch)?.setFilterValue(event.target.value),
className: "w-full pl-8 xl:w-80"
}));
}
function DataTableSkeleton(props) {
const { columnCount, rowCount = 10, searchableColumnCount = 0, filterableColumnCount = 0, showViewOptions = true, cellWidths = [
"auto"
], withPagination = true, shrinkZero = false, className, ...skeletonProps } = props;
return /*#__PURE__*/ React__default.createElement("div", {
className: cn("w-full space-y-2.5 overflow-auto", className),
...skeletonProps
}, /*#__PURE__*/ React__default.createElement("div", {
className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1"
}, /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-1 items-center space-x-2"
}, searchableColumnCount > 0 ? Array.from({
length: searchableColumnCount
}).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
key: `${String(i)}`,
className: "h-7 w-40 lg:w-60"
})) : null, filterableColumnCount > 0 ? Array.from({
length: filterableColumnCount
}).map((_, i)=>/*#__PURE__*/ React__default.createElement(Skeleton, {
key: `${String(i)}`,
className: "h-7 w-[4.5rem] border-dashed"
})) : null), showViewOptions ? /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "ml-auto hidden h-7 w-[4.5rem] lg:flex"
}) : null), /*#__PURE__*/ React__default.createElement("div", {
className: "rounded-md border"
}, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, null, Array.from({
length: 1
}).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
key: `${String(i)}`,
className: "hover:bg-transparent"
}, Array.from({
length: columnCount
}).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableHead, {
key: `${String(j)}`,
style: {
width: cellWidths[j],
minWidth: shrinkZero ? cellWidths[j] : "auto"
}
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-6 w-full"
})))))), /*#__PURE__*/ React__default.createElement(TableBody, null, Array.from({
length: rowCount
}).map((_, i)=>/*#__PURE__*/ React__default.createElement(TableRow, {
key: `${String(i)}`,
className: "hover:bg-transparent"
}, Array.from({
length: columnCount
}).map((_, j)=>/*#__PURE__*/ React__default.createElement(TableCell, {
key: `${String(j)}`,
style: {
width: cellWidths[j],
minWidth: shrinkZero ? cellWidths[j] : "auto"
}
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-6 w-full"
})))))))), withPagination ? /*#__PURE__*/ React__default.createElement("div", {
className: "flex w-full items-center justify-between gap-4 overflow-auto p-1 sm:gap-8"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-7 w-40 shrink-0"
}), /*#__PURE__*/ React__default.createElement("div", {
className: "flex items-center gap-4 sm:gap-6 lg:gap-8"
}, /*#__PURE__*/ React__default.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-7 w-24"
}), /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-7 w-[4.5rem]"
})), /*#__PURE__*/ React__default.createElement("div", {
className: "flex items-center justify-center text-sm font-medium"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "h-7 w-20"
})), /*#__PURE__*/ React__default.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "hidden size-7 lg:block"
}), /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "size-7"
}), /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "size-7"
}), /*#__PURE__*/ React__default.createElement(Skeleton, {
className: "hidden size-7 lg:block"
})))) : null);
}
function DataTableStatus({ table, uniqueStatusValues, renderStatusMessage, className }) {
const triggerRef = React__default.useRef(null);
const currentFilter = table.getColumn("status")?.getFilterValue();
return /*#__PURE__*/ React__default.createElement(Popover, {
modal: true
}, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
asChild: true
}, /*#__PURE__*/ React__default.createElement(Button, {
ref: triggerRef,
"aria-label": "Filtre por status",
variant: "outline",
className: cn("border-input text-muted-foreground ring-offset-background placeholder:text-muted-foreground hover:text-muted-foreground focus:ring-ring flex h-10 w-full max-w-60 items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm hover:bg-inherit focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", className)
}, currentFilter ? renderStatusMessage(currentFilter) : "Todos os status", /*#__PURE__*/ React__default.createElement(ChevronDown, {
className: "h-4 w-4"
}))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
align: "end",
className: "w-44 p-0",
onCloseAutoFocus: ()=>triggerRef.current?.focus()
}, /*#__PURE__*/ React__default.createElement(Command, null, /*#__PURE__*/ React__default.createElement(CommandInput, {
placeholder: "Pesquisar status..."
}), /*#__PURE__*/ React__default.createElement(CommandList, null, /*#__PURE__*/ React__default.createElement(CommandEmpty, null, "Nenhum status encontrado."), /*#__PURE__*/ React__default.createElement(CommandItem, {
key: "all",
onSelect: ()=>table.getColumn("status")?.setFilterValue(undefined)
}, /*#__PURE__*/ React__default.createElement("span", {
className: "truncate"
}, "Todos os status")), uniqueStatusValues.map((item)=>{
if (!item) return null;
const statusMessage = renderStatusMessage(item);
return /*#__PURE__*/ React__default.createElement(CommandItem, {
key: `${String(item)}`,
onSelect: ()=>table.getColumn("status")?.setFilterValue(item)
}, /*#__PURE__*/ React__default.createElement("span", {
className: "truncate"
}, statusMessage));
})))));
}
function DataTableViewOptions({ table, transformColumnName, disabled }) {
const triggerRef = React$1.useRef(null);
return /*#__PURE__*/ React$1.createElement(Popover, {
modal: true
}, /*#__PURE__*/ React$1.createElement(PopoverTrigger, {
asChild: true
}, /*#__PURE__*/ React$1.createElement(Button, {
ref: triggerRef,
"aria-label": "Toggle columns",
variant: "outline",
className: "text-muted-foreground hover:text-muted-foreground w-full max-w-[12.5rem] items-center justify-between bg-inherit px-3 py-2 hover:bg-inherit",
disabled: disabled
}, "Colunas", /*#__PURE__*/ React$1.createElement(ChevronDown, {
className: "h-4 w-4"
}))), /*#__PURE__*/ React$1.createElement(PopoverContent, {
align: "end",
className: "w-44 p-0",
onCloseAutoFocus: ()=>triggerRef.current?.focus()
}, /*#__PURE__*/ React$1.createElement(Command, null, /*#__PURE__*/ React$1.createElement(CommandInput, {
placeholder: "Pesquisar colunas..."
}), /*#__PURE__*/ React$1.createElement(CommandList, null, /*#__PURE__*/ React$1.createElement(CommandEmpty, null, "Nenhuma coluna encontrada."), /*#__PURE__*/ React$1.createElement(CommandGroup, null, table.getAllColumns().filter((column)=>typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column)=>{
return /*#__PURE__*/ React$1.createElement(CommandItem, {
key: column.id,
onSelect: ()=>column.toggleVisibility(!column.getIsVisible())
}, /*#__PURE__*/ React$1.createElement("span", {
className: "truncate"
}, transformColumnName ? transformColumnName(column.id) : column.id), /*#__PURE__*/ React$1.createElement(Check, {
className: cn("ml-auto size-4 shrink-0", column.getIsVisible() ? "opacity-100" : "opacity-0")
}));
}))))));
}
export { DataTableMainFrame, DataTableMainFrameSortable, DataTablePagination, DataTablePaginationSkeleton, DataTableRowSkeleton, DataTableSearch, DataTableSkeleton, DataTableStatus, DataTableViewOptions };
//# sourceMappingURL=index.mjs.map