infinity-ui-elements 1.7.9 → 1.7.11

package/dist/index.js

@@ -2856,7 +2856,7 @@ const tableCellVariants = classVarianceAuthority.cva("text-body-medium-regular b
     },
 });
 
-function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
     const headerHeight = {
         small: 32,
         medium: 40,
@@ -2873,9 +2873,11 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
                                 "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastVisibleColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
                                 ? "opacity-0 translate-x-8 pointer-events-none"
                                 : "opacity-100 translate-x-0"), style: {
-                                width: header.getSize(),
-                                minWidth: header.column.columnDef.minSize,
-                                maxWidth: header.column.columnDef.maxSize,
+                                ...getColumnStyle(header.column.id, {
+                                    width: header.getSize(),
+                                    minWidth: header.column.columnDef.minSize,
+                                    maxWidth: header.column.columnDef.maxSize,
+                                }),
                                 top: stickyTop,
                             }, children: header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
                                     "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: "text-surface-ink-neutral-muted", children: {
@@ -2886,7 +2888,7 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         }) }));
 }
 
-function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
     const [focusedCell, setFocusedCell] = React__namespace.useState(null);
     const [hoveredRow, setHoveredRow] = React__namespace.useState(null);
     return (jsxRuntime.jsx("tbody", { className: cn("bg-surface-fill-neutral-intense"), children: rows.map((row) => {
@@ -2904,11 +2906,11 @@ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cell
                         const cellState = isCellFocused ? "focus" : "default";
                         return (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
                                 ? "opacity-0 translate-x-8 pointer-events-none"
-                                : "opacity-100 translate-x-0"), style: {
+                                : "opacity-100 translate-x-0"), style: getColumnStyle(cell.column.id, {
                                 width: cell.column.getSize(),
                                 minWidth: cell.column.columnDef.minSize,
                                 maxWidth: cell.column.columnDef.maxSize,
-                            }, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                            }), tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                     })] }, row.id));
         }) }));
 }
@@ -2930,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, ...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);
@@ -2971,6 +2973,21 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             ? headers.length - hideColumnsOnDetailOpen
             : headers.length;
     }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
+    const normalizeSizeValue = (value) => {
+        if (value === undefined)
+            return undefined;
+        return typeof value === "number" ? `${value}px` : value;
+    };
+    const getColumnStyle = React__namespace.useCallback((columnId, fallback) => {
+        const width = columnWidths?.[columnId] ?? fallback?.width ?? undefined;
+        const minWidth = columnMinWidths?.[columnId] ?? fallback?.minWidth ?? undefined;
+        const maxWidth = columnMaxWidths?.[columnId] ?? fallback?.maxWidth ?? undefined;
+        return {
+            width: normalizeSizeValue(width),
+            minWidth: normalizeSizeValue(minWidth),
+            maxWidth: normalizeSizeValue(maxWidth),
+        };
+    }, [columnWidths, columnMinWidths, columnMaxWidths]);
     const containerStyle = React__namespace.useMemo(() => {
         if (!maxHeight)
             return undefined;
@@ -2978,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") {
@@ -3014,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() }), 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 }))] }), 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);