infinity-ui-elements 1.7.5 → 1.7.7

package/dist/index.js

@@ -2856,32 +2856,39 @@ const tableCellVariants = classVarianceAuthority.cva("text-body-medium-regular b
     },
 });
 
-function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
-    return (jsxRuntime.jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup) => (jsxRuntime.jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), 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;
-                    const isLastVisibleColumn = isDetailPanelOpen
-                        ? index === visibleHeadersCount - 1
-                        : index === headerGroup.headers.length - 1;
-                    return (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                            "bg-surface-fill-neutral-moderate border-none", !enableRowSelection &&
-                            index === 0 &&
-                            "rounded-tl-xlarge rounded-bl-xlarge", isLastVisibleColumn && "rounded-tr-xlarge rounded-br-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,
-                        }, 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: {
-                                        asc: "↑",
-                                        desc: "↓",
-                                    }[header.column.getIsSorted()] ?? "↕" }))] })) }, header.id));
-                })] }, headerGroup.id))) }));
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, isBodyScrollable = false, }) {
+    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) => {
+            const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
+            return (jsxRuntime.jsxs("tr", { className: cn(isBodyScrollable && "table w-full table-fixed"), 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;
+                        const isLastVisibleColumn = isDetailPanelOpen
+                            ? index === visibleHeadersCount - 1
+                            : index === headerGroup.headers.length - 1;
+                        return (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
+                                "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,
+                                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: {
+                                            asc: "↑",
+                                            desc: "↓",
+                                        }[header.column.getIsSorted()] ?? "↕" }))] })) }, header.id));
+                    })] }, headerGroup.id));
+        }) }));
 }
 
 function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
     const [focusedCell, setFocusedCell] = React__namespace.useState(null);
     const [hoveredRow, setHoveredRow] = React__namespace.useState(null);
-    return (jsxRuntime.jsx("tbody", { className: "bg-surface-fill-neutral-intense", children: rows.map((row) => {
+    return (jsxRuntime.jsx("tbody", { className: cn("bg-surface-fill-neutral-intense"), children: rows.map((row) => {
             const isRowSelected = row.id === effectiveSelectedRowId;
             const isRowHovered = hoveredRow === row.id;
             const handleClick = () => handleRowClick(row.original, row.id);
@@ -2963,6 +2970,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             ? headers.length - hideColumnsOnDetailOpen
             : headers.length;
     }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
+    const containerStyle = React__namespace.useMemo(() => {
+        if (!maxHeight)
+            return undefined;
+        return {
+            maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        };
+    }, [maxHeight]);
     // ==================== Callbacks ====================
     const getRowClassName = React__namespace.useCallback((row) => {
         if (typeof rowClassName === "function") {
@@ -3011,7 +3025,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 overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: maxHeight ? { maxHeight } : undefined, 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(), isBodyScrollable: Boolean(maxHeight) }), 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 }))] }) }));
 }
 // ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);