infinity-ui-elements 1.7.10 → 1.7.11

package/dist/index.js

@@ -2932,7 +2932,7 @@ function renderDefaultEmptyState({ colSpan }) {
 }
 
 // ==================== Component ====================
-function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
     // ==================== State ====================
     const [internalSelectedRowId, setInternalSelectedRowId] = React__namespace.useState(null);
     const selectedRowIdRef = React__namespace.useRef(null);
@@ -2995,6 +2995,43 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
         };
     }, [maxHeight]);
+    const resolvedLoading = typeof loading === "boolean" ? loading : Boolean(isLoading);
+    const skeletonRowCount = loadingSkeletonRows ?? 5;
+    const sizeKey = size || "medium";
+    const skeletonHeightMap = {
+        small: 16,
+        medium: 20,
+        large: 24,
+    };
+    const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
+    const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
+    const renderSkeletonRows = React__namespace.useCallback(() => {
+        const visibleColumns = table.getVisibleLeafColumns();
+        if (visibleColumns.length === 0) {
+            return renderDefaultLoadingState({
+                colSpan: table.getAllColumns().length || 1,
+            });
+        }
+        return Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), "w-10", cellClassName), children: jsxRuntime.jsx(Skeleton, { variant: "circle", width: selectionSkeletonSize, height: selectionSkeletonSize }) })), visibleColumns.map((column) => (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), column.columnDef.meta?.cellClassName, cellClassName), style: getColumnStyle(column.id, {
+                        width: column.getSize(),
+                        minWidth: column.columnDef.minSize,
+                        maxWidth: column.columnDef.maxSize,
+                    }), children: jsxRuntime.jsx(Skeleton, { className: "w-full", height: skeletonCellHeight, rounded: "medium" }) }, `${column.id}-${rowIndex}`)))] }, `skeleton-row-${rowIndex}`)));
+    }, [
+        cellClassName,
+        enableRowSelection,
+        getColumnStyle,
+        selectionSkeletonSize,
+        sizeKey,
+        skeletonCellHeight,
+        skeletonRowCount,
+        table,
+    ]);
+    const renderLoadingContent = React__namespace.useCallback(() => {
+        if (loadingComponent)
+            return loadingComponent;
+        return renderSkeletonRows();
+    }, [loadingComponent, renderSkeletonRows]);
     // ==================== Callbacks ====================
     const getRowClassName = React__namespace.useCallback((row) => {
         if (typeof rowClassName === "function") {
@@ -3031,19 +3068,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             onRowSelectionChange(null);
         }
     };
-    // ==================== Render Helpers ====================
-    const renderLoadingState = () => {
-        if (loadingComponent)
-            return loadingComponent;
-        return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
-    };
     const renderEmptyState = () => {
         if (emptyComponent)
             return emptyComponent;
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), isLoading ? (jsxRuntime.jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsxRuntime.jsx("tbody", { children: renderEmptyState() })) : (jsxRuntime.jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsxRuntime.jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsxRuntime.jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsxRuntime.jsx("tbody", { children: renderEmptyState() })) : (jsxRuntime.jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsxRuntime.jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
 }
 // ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);