infinity-ui-elements 1.7.6 → 1.7.8

package/dist/index.esm.js

@@ -2835,43 +2835,44 @@ const tableCellVariants = cva("text-body-medium-regular border-b border-surface-
     },
 });
 
-function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, isBodyScrollable = false, }) {
-    return (jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup) => (jsxs("tr", { className: cn(isBodyScrollable && "table w-full table-fixed"), children: [enableRowSelection && enableSelectAll && (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), children: 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 (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                            "bg-surface-fill-neutral-moderate border-none", !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,
-                        }, children: header.isPlaceholder ? null : (jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (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, }) {
+    const headerHeight = {
+        small: 32,
+        medium: 40,
+        large: 48,
+    }[size] ?? 40;
+    return (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 (jsxs("tr", { children: [enableRowSelection && enableSelectAll && (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: 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 (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 : (jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
+                                    "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (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, maxBodyHeight, }) {
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
     const [focusedCell, setFocusedCell] = React.useState(null);
     const [hoveredRow, setHoveredRow] = React.useState(null);
-    const bodyStyle = React.useMemo(() => {
-        if (!maxBodyHeight)
-            return undefined;
-        return {
-            maxHeight: typeof maxBodyHeight === "number"
-                ? `${maxBodyHeight}px`
-                : maxBodyHeight,
-        };
-    }, [maxBodyHeight]);
-    return (jsx("tbody", { className: cn("bg-surface-fill-neutral-intense", maxBodyHeight && "block overflow-y-auto"), style: bodyStyle, children: rows.map((row) => {
+    return (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);
-            return (jsxs("tr", { className: cn(maxBodyHeight && "table w-full table-fixed", variant === "striped" &&
+            return (jsxs("tr", { className: cn(variant === "striped" &&
                     row.index % 2 === 1 &&
                     "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowSelected && "bg-action-fill-primary-faded", isRowHovered &&
                     showRowHover &&
@@ -2949,6 +2950,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             ? headers.length - hideColumnsOnDetailOpen
             : headers.length;
     }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
+    const containerStyle = React.useMemo(() => {
+        if (!maxHeight)
+            return undefined;
+        return {
+            maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        };
+    }, [maxHeight]);
     // ==================== Callbacks ====================
     const getRowClassName = React.useCallback((row) => {
         if (typeof rowClassName === "function") {
@@ -2997,7 +3005,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", containerClassName), children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [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 ? (jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (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, maxBodyHeight: maxHeight }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [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 ? (jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (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 && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
 }
 // ==================== Export ====================
 const Table = React.forwardRef(TableComponent);