pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/esm/Components/Table/Table.js

@@ -0,0 +1,430 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, TableContainer, Flex, Spinner, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, useBreakpointValue, IconButton, Modal, ModalOverlay, ModalContent, ModalBody, ModalCloseButton, useDisclosure } from "@chakra-ui/react";
+import { Table as ChakraTable, Tbody, Thead, Icon } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import LeftFilterPane from "./filters/LeftFilterPane.js";
+import Pagination from "./components/Pagination.js";
+import TableHeader from "./components/TableHeader.js";
+import TableBody from "./components/TableBody.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import useTable from "./hooks/useTable.js";
+import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
+import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
+import TableSettings from "./settings/TableSettings.js";
+import HeaderActions from "./components/HeaderActions.js";
+import VeritcalDivider from "../Divider/Divider.js";
+import TableSearch from "./components/TableSearch.js";
+import ActiveFilters from "./filters/ActiveFilters.js";
+import Button from "../Button/Button.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { Filter, EllipsisVertical, X, RefreshCw } from "lucide-react";
+const MotionBox = motion(Box);
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
+    url: "",
+    token: "",
+    key: "",
+    name: "",
+    page: "",
+    orgId: "",
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", stripe, groupColors, onAddItem, emptyState, onRefresh,
+// onColumnFilter
+ }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    const theme = useCustomTheme();
+    const [columnsSearch, setColumnsSearch] = useState({});
+    const tableContainerRef = useRef(null);
+    const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = useDisclosure();
+    const filterMode = (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _a !== void 0 ? _a : "sidebar";
+    const [viewportAvailableH, setViewportAvailableH] = useState(500);
+    const isServerPagination = paginationMode === "server";
+    const { preferences: tablePreferencesData, loading } = useGetPreferences({
+        baseUrl: preferences.url,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const { savePreferences } = useSavePreferences({
+        baseUrl: preferences.url,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const isTableLoading = useMemo(() => {
+        return loading || isLoading || isRefreshing;
+    }, [loading, isLoading, isRefreshing]);
+    const tablePreferences = useMemo(() => {
+        if (tablePreferencesData === null || tablePreferencesData === void 0 ? void 0 : tablePreferencesData.length) {
+            return tablePreferencesData[0].json;
+        }
+        return {};
+    }, [tablePreferencesData]);
+    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, endRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = useTable({
+        tableBorderColor,
+        data,
+        isPagination,
+        selections,
+        columns,
+        onSelection,
+        tablePreferences,
+        savePreferences,
+        noOfRowsPerPage,
+        totalRecords,
+        isServerPagination,
+        onNoOfRowsPerPageChange,
+        defaultVisibleColumns,
+    });
+    // Density + grouping are managed here so the Table Settings tabs can change +
+    // persist them (seeded from the prop / saved preferences when they load).
+    const [densityState, setDensityState] = useState(density);
+    // Grouping is chosen by the user in Table Settings > Group and persisted to
+    // preferences (`json.groupBy`); there is no `groupBy` prop.
+    const [groupByState, setGroupByState] = useState(undefined);
+    const [isPaginationPopoverOpen, setIsPaginationPopoverOpen] = useState(false);
+    // Grouped "Load more" accumulates pages here so loading more ADDS rows to the
+    // groups (server pagination replaces `data` each fetch). Reset on fresh loads
+    // (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
+    const [accumulatedRows, setAccumulatedRows] = useState([]);
+    const pendingLoadMoreRef = useRef(false);
+    // Pages loaded so far (1 = the initial page). The next page is derived from this
+    // counter — NOT from the deduped row count — so overlapping rows across pages
+    // (e.g. pinned rows that repeat on every page) don't stall the page index.
+    const loadedPagesRef = useRef(1);
+    useEffect(() => {
+        if (!groupLoadMore)
+            return;
+        setAccumulatedRows((prev) => {
+            if (prev.length === 0) {
+                loadedPagesRef.current = 1;
+                return tableData.slice();
+            }
+            const accIds = new Set(prev.map((r) => r.id));
+            if (pendingLoadMoreRef.current) {
+                // A "Load more" is in flight. The parent may re-emit the SAME page (new
+                // array reference) on intermediate re-renders before the next page arrives,
+                // so only append + consume the flag once genuinely new rows show up.
+                const newRows = tableData.filter((r) => !accIds.has(r.id));
+                if (newRows.length === 0)
+                    return prev; // same page re-emitted — keep waiting
+                pendingLoadMoreRef.current = false;
+                return [...prev, ...newRows];
+            }
+            // Not a load-more: a re-emit of already-loaded rows keeps the accumulation
+            // (the parent re-renders the current page often). Genuinely new rows
+            // (search / filter / sort / page-size / reload) reset it.
+            const allKnown = tableData.length > 0 && tableData.every((r) => accIds.has(r.id));
+            if (allKnown)
+                return prev;
+            loadedPagesRef.current = 1; // fresh data set
+            return tableData.slice();
+        });
+    }, [tableData, groupLoadMore]);
+    // Page-size change restarts the accumulation (the page boundaries change), so the
+    // next "Load more" requests page 2 of the NEW size, not a stale page index.
+    const rowsPerPageMountedRef = useRef(false);
+    useEffect(() => {
+        if (!rowsPerPageMountedRef.current) {
+            rowsPerPageMountedRef.current = true;
+            return;
+        }
+        pendingLoadMoreRef.current = false;
+        loadedPagesRef.current = 1;
+        setAccumulatedRows(tableData); // current page at the new size (not empty)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowsPerPage]);
+    useEffect(() => {
+        if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density) {
+            setDensityState(tablePreferences.density);
+        }
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density]);
+    useEffect(() => {
+        if (tablePreferences && "groupBy" in tablePreferences) {
+            const saved = tablePreferences.groupBy;
+            setGroupByState(saved === null || saved === undefined || saved === "" ? undefined : saved);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.groupBy]);
+    const handleDensityChange = (d) => {
+        setDensityState(d);
+        savePreferences === null || savePreferences === void 0 ? void 0 : savePreferences({ ...tablePreferences, columns: columnsList, groupBy: groupByState !== null && groupByState !== void 0 ? groupByState : null, density: d });
+    };
+    // Settings "Save": persist columns + group (+ current density) in ONE write so
+    // they don't clobber each other, and apply them locally.
+    const handleSettingsSave = (cols, group) => {
+        setGroupByState(group);
+        handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
+    };
+    const _filteredData = useMemo(() => {
+        return searchAndSortData(filteredData, columnsSearch);
+    }, [columnsSearch, filteredData]);
+    // --- Monday-style grouping. Active whenever the user has picked a group column
+    // (in Settings > Group). When active, the numbered pager / infinite scroll are
+    // hidden and the body renders colored, collapsible groups over the loaded rows.
+    // `groupLoadMore` adds a "Load more" button on top to fetch more into the groups. ---
+    const isGrouped = !!groupByState;
+    // Infinite scroll (server mode, not grouped): load more on scroll-near-bottom.
+    const canInfinite = infiniteScroll && !isGrouped;
+    // Grouped "Load more": the accumulated pages back the grouped board so loading
+    // more grows the groups instead of replacing them.
+    const loadMoreBase = isGrouped && groupLoadMore ? accumulatedRows : tableData;
+    const hasMoreEffective = typeof hasMore === "boolean"
+        ? hasMore
+        : isServerPagination
+            ? loadMoreBase.length < totalRecords
+            : false;
+    const groupLoadMoreActive = isGrouped && groupLoadMore;
+    // Keep the button while a load is in flight (so a transient empty `data` during
+    // fetching doesn't make it flicker); hide it once loading settles with no more.
+    const canGroupLoadMore = groupLoadMoreActive && (hasMoreEffective || isLoadingMore);
+    const groupPalette = useMemo(() => buildTablePalette(theme), [theme]);
+    const groupedSource = useMemo(() => {
+        if (!isGrouped)
+            return [];
+        const src = groupLoadMore ? accumulatedRows : tableData;
+        return searchAndSortData(SortMultiColumnData(src, columnsSort), columnsSearch);
+    }, [isGrouped, groupLoadMore, accumulatedRows, tableData, columnsSort, columnsSearch]);
+    const renderGroups = useMemo(() => {
+        if (!isGrouped)
+            return undefined;
+        return groupRows(groupedSource, groupByState).map((g) => ({
+            ...g,
+            color: pickTableColor(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]),
+        }));
+    }, [isGrouped, groupedSource, groupByState, groupPalette, groupColors]);
+    // "Select all" + header checkbox operate on the rows actually rendered: the
+    // accumulated grouped source when grouped, otherwise the table data.
+    const selectAllRows = isGrouped ? groupedSource : tableData;
+    selectAllRowsRef.current = isGrouped ? groupedSource : null;
+    const headerChecked = useMemo(() => {
+        if (selection.length === 0)
+            return false;
+        if (selectAllRows.length === 0)
+            return false;
+        const sel = new Set(selection);
+        return selectAllRows.every((r) => sel.has(r.id)) ? true : "indeterminate";
+    }, [selection, selectAllRows]);
+    const onPaginationRef = useRef(onPagination);
+    onPaginationRef.current = onPagination;
+    const prevPageRef = useRef(currentPage);
+    useEffect(() => {
+        if (onPaginationRef.current) {
+            const prevPage = prevPageRef.current;
+            let direction;
+            if (currentPage === 0) {
+                direction = "first";
+            }
+            else if (currentPage === pages - 1) {
+                direction = "last";
+            }
+            else if (currentPage > prevPage) {
+                direction = "next";
+            }
+            else {
+                direction = "prev";
+            }
+            const record = direction === "next" || direction === "last"
+                ? (tableData.length > 0 ? tableData[tableData.length - 1] : undefined)
+                : (tableData.length > 0 ? tableData[0] : undefined);
+            onPaginationRef.current(currentPage + 1, rowsPerPage, record, direction);
+            prevPageRef.current = currentPage;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage, rowsPerPage]);
+    // Grouped "Load more": request the next chunk; parent appends it to `data` and
+    // the table re-groups so new rows land in their respective groups.
+    const handleGroupLoadMore = () => {
+        var _a;
+        if (isLoadingMore || isTableLoading || !hasMoreEffective)
+            return;
+        // Must request the SAME page size the data was loaded with — a page-count model
+        // breaks if pages have different sizes (e.g. page size 100 but a 20-row chunk
+        // re-requests already-loaded records). `loadMoreChunkSize` is only a last-resort
+        // fallback and is otherwise ignored.
+        const chunk = rowsPerPage || loadMoreChunkSize || 20;
+        // Advance by page COUNT (not by deduped row count) so overlapping/pinned rows
+        // across pages don't keep us stuck on the same page.
+        const nextPage = loadedPagesRef.current + 1;
+        loadedPagesRef.current = nextPage;
+        const lastRecord = loadMoreBase.length > 0 ? loadMoreBase[loadMoreBase.length - 1] : undefined;
+        pendingLoadMoreRef.current = true;
+        (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
+    };
+    // While more can load → live count; once everything's loaded → "Showing all
+    // records" (the running total isn't shown because de-duped/server totals can
+    // disagree, e.g. "250 of 250" would be misleading).
+    const groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
+        ? undefined
+        : canGroupLoadMore
+            ? totalRecords > 0
+                ? `Showing ${loadMoreBase.length} of ${totalRecords}`
+                : `Showing ${loadMoreBase.length}`
+            : "Showing all records";
+    const tablePaginationText = useMemo(() => isServerPagination
+        ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
+        : `${startRow + 1} - ${endRow > tableData.length ? tableData.length : endRow} of ${tableData.length}`, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    const controlsHeight = 45;
+    const estimatedRowHeight = 45;
+    // In grouped mode the rendered rows come from the full grouped source, not the
+    // paged slice — base the height on that so a 1-result search isn't clipped.
+    const actualRows = isGrouped ? groupedSource.length : _filteredData.length;
+    const isEmptyState = !isTableLoading && actualRows === 0;
+    const loadingRowsCount = typeof loadingSkeletonRows === "number" ? Math.max(1, loadingSkeletonRows) : 4;
+    const minRows = typeof minVisibleRows === "number"
+        ? Math.max(0, minVisibleRows)
+        : (actualRows === 0
+            ? 1
+            : ((filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 5 : actualRows));
+    const maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
+    const visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
+    useEffect(() => {
+        if (!autoFitViewport)
+            return;
+        const compute = () => {
+            if (tableContainerRef.current) {
+                const rect = tableContainerRef.current.getBoundingClientRect();
+                const available = Math.max(200, window.innerHeight - rect.top - 16);
+                setViewportAvailableH(available);
+            }
+        };
+        compute();
+        window.addEventListener("resize", compute);
+        return () => window.removeEventListener("resize", compute);
+    }, [autoFitViewport]);
+    const heightRowsCount = isTableLoading ? loadingRowsCount : visibleRowsCount;
+    const isCompactRows = heightRowsCount <= 1 && !(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) && !isGrouped && !isEmptyState;
+    let rowsHeight = heightRowsCount * estimatedRowHeight + estimatedRowHeight;
+    if (isGrouped)
+        rowsHeight += ((_b = renderGroups === null || renderGroups === void 0 ? void 0 : renderGroups.length) !== null && _b !== void 0 ? _b : 1) * 42; // group header rows
+    if (isEmptyState)
+        rowsHeight = Math.max(rowsHeight, 200); // room for the empty state
+    const dynamicMaxH = Math.min(500, rowsHeight);
+    const fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
+    const tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : (isCompactRows ? rowsHeight + 8 : fittedMaxH);
+    const isCompactHeader = useBreakpointValue({ base: true, md: true, lg: false });
+    useEffect(() => {
+        if (!isCompactHeader) {
+            setIsPaginationPopoverOpen(false);
+        }
+    }, [isCompactHeader]);
+    const compactScrollbarPadding = isCompactRows ? 4 : 0;
+    // Infinite scroll: reuse onPagination("next") when scrolled near the bottom.
+    const infiniteRef = useRef({ isLoadingMore, isTableLoading, hasMore, rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords, isServerPagination });
+    infiniteRef.current = { isLoadingMore, isTableLoading, hasMore, rowsPerPage, dataLen: tableData.length, lastRecord: tableData[tableData.length - 1], totalRecords, isServerPagination };
+    useEffect(() => {
+        if (!canInfinite)
+            return;
+        const el = tableContainerRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            var _a;
+            const s = infiniteRef.current;
+            if (s.isLoadingMore || s.isTableLoading)
+                return;
+            const more = typeof s.hasMore === "boolean"
+                ? s.hasMore
+                : s.isServerPagination
+                    ? s.dataLen < s.totalRecords
+                    : false;
+            if (!more)
+                return;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 160) {
+                const nextPage = Math.floor(s.dataLen / (s.rowsPerPage || 1)) + 1;
+                (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, s.rowsPerPage, s.lastRecord, "next");
+            }
+        };
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return () => el.removeEventListener("scroll", onScroll);
+    }, [canInfinite]);
+    const sidebarActiveCount = useMemo(() => {
+        if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
+            return 0;
+        return Object.entries(filterSidebar.selected).reduce((acc, [key, items]) => {
+            if (key === "search")
+                return acc; // Don't count search in active filter count
+            return acc + (Array.isArray(items) ? items.length : 0);
+        }, 0);
+    }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @keyframes pixelize-table-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }), _jsxs(Box, { bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: `0.063rem solid ${(_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_k = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _k !== void 0 ? _k : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m[50], borderBottom: `0.063rem solid ${(_o = theme.colors.border) === null || _o === void 0 ? void 0 : _o[500]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[500] : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.text) === null || _s === void 0 ? void 0 : _s[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+                                                                        color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u[500],
+                                                                    } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.primary) === null || _w === void 0 ? void 0 : _w[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                        var _a;
+                                                                        e.stopPropagation();
+                                                                        if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
+                                                                            filterSidebar.onClearAllHandler();
+                                                                        }
+                                                                        else {
+                                                                            (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
+                                                                        }
+                                                                    }, _hover: { bg: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.red) === null || _y === void 0 ? void 0 : _y[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: _jsx(X, { size: 10, strokeWidth: 3 }) }))] }) }), _jsx(VeritcalDivider, {})] })), _jsx(TableSearch, { onSearch: onGlobalSearch }), isTableSettings && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(TableSettings, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(ToolTip, { label: "Refresh", placement: "top", children: _jsx(Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
+                                                                color: theme.colors.primary[500],
+                                                                transform: "scale(1.1)"
+                                                            }, onClick: async () => {
+                                                                if (!isRefreshing) {
+                                                                    setIsRefreshing(true);
+                                                                    try {
+                                                                        await onRefresh();
+                                                                    }
+                                                                    finally {
+                                                                        setIsRefreshing(false);
+                                                                    }
+                                                                }
+                                                            }, style: {
+                                                                animation: isRefreshing
+                                                                    ? "pixelize-table-spin 1s linear infinite"
+                                                                    : "none"
+                                                            }, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.text) === null || _0 === void 0 ? void 0 : _0[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.text) === null || _2 === void 0 ? void 0 : _2[500], _hover: {
+                                                                        color: (_4 = (_3 = theme.colors) === null || _3 === void 0 ? void 0 : _3.primary) === null || _4 === void 0 ? void 0 : _4[500],
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: (_5 = theme.colors.background) === null || _5 === void 0 ? void 0 : _5[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            '&::-webkit-scrollbar': {
+                                                width: '6px',
+                                                height: isCompactRows ? '0px' : '6px',
+                                            },
+                                            '&:hover::-webkit-scrollbar': {
+                                                height: '6px',
+                                            },
+                                            '&::-webkit-scrollbar-track': {
+                                                background: theme.colors.gray[100],
+                                                borderRadius: 'base',
+                                            },
+                                            '&::-webkit-scrollbar-thumb': {
+                                                background: theme.colors.gray[400],
+                                                borderRadius: 'base',
+                                            },
+                                            '&::-webkit-scrollbar-thumb:hover': {
+                                                background: theme.colors.gray[500],
+                                            },
+                                            scrollbarWidth: isCompactRows ? 'none' : 'thin',
+                                            '&:hover': {
+                                                scrollbarWidth: 'thin',
+                                            },
+                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                                        }, children: [_jsxs(ChakraTable, { variant: "simple", size: "sm", minW: "100%", role: "grid", "aria-rowcount": isGrouped ? undefined : _filteredData.length + 1, className: "table_wrapper", sx: {
+                                                    width: "100%",
+                                                    // `separate` (not `collapse`) so sticky header cells paint an opaque
+                                                    // background over their borders — collapsed borders bleed scrolling
+                                                    // content through the seams.
+                                                    borderCollapse: "separate",
+                                                    borderSpacing: 0,
+                                                    "th .resize-handle": {
+                                                        position: "absolute",
+                                                        top: 0,
+                                                        right: 0,
+                                                        width: "8px",
+                                                        height: "100%",
+                                                        cursor: "col-resize",
+                                                        backgroundColor: "transparent",
+                                                        zIndex: 999,
+                                                    },
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_8 = (_7 = (_6 = theme.colors.table) === null || _6 === void 0 ? void 0 : _6.hover) === null || _7 === void 0 ? void 0 : _7[200]) !== null && _8 !== void 0 ? _8 : (_9 = theme.colors.secondary) === null || _9 === void 0 ? void 0 : _9[50], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_11 = theme.colors) === null || _11 === void 0 ? void 0 : _11.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.primary) === null || _13 === void 0 ? void 0 : _13[500] }), _jsx(Box, { fontSize: "0.75rem", color: (_15 = (_14 = theme.colors) === null || _14 === void 0 ? void 0 : _14.text) === null || _15 === void 0 ? void 0 : _15[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${(_16 = theme.colors.border) === null || _16 === void 0 ? void 0 : _16[500]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: (_18 = (_17 = theme.colors) === null || _17 === void 0 ? void 0 : _17.text) === null || _18 === void 0 ? void 0 : _18[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+}

package/dist/esm/Components/Table/TableProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Table/components/HeaderActions.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { SquarePen, Trash2 } from "lucide-react";
+import React from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import VeritcalDivider from "../../Divider/Divider.js";
+const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const styledIcon = icon ? React.cloneElement(icon, {
+        color: "currentColor",
+        size: "1.25rem",
+    }) : null;
+    // A `customComponent` may itself be focusable, and a button must never wrap one.
+    const isButton = !!onClick && !customComponent;
+    return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+            ? {
+                color: hoverColor ? hoverColor : (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500],
+                bg: ((_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100]) || "gray.50",
+            }
+            : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
+};
+const HeaderActions = ({ actions, selections, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { colors } = useCustomTheme();
+    const hasSelections = selections.length > 0;
+    return (_jsxs(Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: accentTextOnCanvas(colors === null || colors === void 0 ? void 0 : colors.secondary, (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main), alignItems: "center", children: [(_b = actions === null || actions === void 0 ? void 0 : actions.items) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+                if ("type" in item)
+                    return null;
+                const actionItem = item;
+                if (actionItem.isStatic) {
+                    return (_jsx(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
+                }
+                return null;
+            }), hasSelections && (_jsxs(_Fragment, { children: [((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })), ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })), (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map((item, index) => {
+                        if ("type" in item && item.type === "divider") {
+                            return _jsx(VeritcalDivider, {}, index);
+                        }
+                        const actionItem = item;
+                        if (!actionItem.isStatic) {
+                            return (_jsx(ListItem, { ...actionItem, selections: selections }, `dynamic-${index}`));
+                        }
+                        return null;
+                    })] }))] }));
+};
+export default HeaderActions;

package/dist/esm/Components/Table/components/Pagination.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Flex, IconButton, Select, Text } from "@chakra-ui/react";
+import { pageSizeCalculation } from "../../../Utils/table.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
+    const computedOptions = useMemo(() => paginationSelectOptions && paginationSelectOptions.length
+        ? paginationSelectOptions
+        : pageSizeCalculation(dataLength), [paginationSelectOptions, dataLength]);
+    const theme = useCustomTheme();
+    // const isLeftDisabled = currentPage === 0;
+    // const isRightDisabled = currentPage >= pages - 1;
+    const isLeftDisabled = dataLength === 0 || currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
+    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
+});
+export default Pagination;

package/dist/esm/Components/Table/components/TableActions.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { Button, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, VStack, } from "@chakra-ui/react";
+import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+const TableActions = React.memo(({ row }) => {
+    var _a, _b, _c;
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const theme = useCustomTheme();
+    // Listen for "close-all-popovers"
+    useEffect(() => {
+        const handler = () => setIsOpen(false);
+        window.addEventListener("close-all-popovers", handler);
+        return () => window.removeEventListener("close-all-popovers", handler);
+    }, []);
+    // Detect outside click
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            // ✅ Use click instead of mousedown
+            document.addEventListener("click", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleOpen = () => {
+        window.dispatchEvent(new Event("close-all-popovers")); // close others
+        setIsOpen(true);
+    };
+    const handleClose = () => setIsOpen(false);
+    // ✅ if row itself is missing, render nothing
+    if (!row)
+        return null;
+    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+                                            var _a;
+                                            (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                            handleClose();
+                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border[500]}`, borderRadius: 0, onClick: () => {
+                                            var _a;
+                                            (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                            handleClose();
+                                        }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_c = row === null || row === void 0 ? void 0 : row.actions) === null || _c === void 0 ? void 0 : _c.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                            var _a;
+                                            (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                            handleClose();
+                                        }, children: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+});
+TableActions.displayName = "TableActions";
+export default TableActions;