infinity-ui-elements 1.7.8 → 1.7.10

package/dist/index.js

@@ -2856,13 +2856,13 @@ 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,
         large: 48,
     }[size] ?? 40;
-    return (jsxRuntime.jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup, groupIndex) => {
+    return (jsxRuntime.jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup, groupIndex) => {
             const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
             return (jsxRuntime.jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky z-20", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), style: { top: stickyTop }, children: jsxRuntime.jsx(Checkbox, { checked: isAllRowsSelected, isIndeterminate: isSomeRowsSelected, onChange: onToggleAllRows, "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => {
                         const shouldHideColumn = isDetailPanelOpen && index >= visibleHeadersCount;
@@ -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, 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) {
     // ==================== 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;
@@ -3026,7 +3043,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         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 }), 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 }))] }) }));
 }
 // ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);