infinity-ui-elements 1.7.11 → 1.7.13

package/dist/index.js

@@ -1454,11 +1454,14 @@ const Link = React__namespace.forwardRef(({ className, type = "anchor", color =
 });
 Link.displayName = "Link";
 
-const DropdownMenu = React__namespace.forwardRef(({ items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
+const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
             return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
         }
+        if (customContent) {
+            return (jsxRuntime.jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsxRuntime.jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsxRuntime.jsx("div", { className: "px-1", children: customContent })] }));
+        }
         if (isEmpty || items.length === 0) {
             return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsxRuntime.jsx(lucideReact.Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsxRuntime.jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsxRuntime.jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
         }
@@ -1468,10 +1471,11 @@ const DropdownMenu = React__namespace.forwardRef(({ items = [], sectionHeading,
                         }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.id))) })] }));
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
+    const footerVisible = showFooter ?? !disableFooter;
     return (jsxRuntime.jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
             boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
             ...(width !== "full" && width !== "auto" ? { width } : {}),
-        }, children: [renderContent(), !disableFooter && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" }), jsxRuntime.jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
+        }, children: [renderContent(), footerVisible && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" }), jsxRuntime.jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
                             ? "flex-col"
                             : "items-center flex-row"), children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
 });
@@ -1489,7 +1493,7 @@ const dropdownVariants = classVarianceAuthority.cva("bg-surface-fill-primary-nor
         size: "medium",
     },
 });
-const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, ...props }, ref) => {
+const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
     const [uncontrolledOpen, setUncontrolledOpen] = React__namespace.useState(defaultOpen);
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React__namespace.useRef(null);
@@ -1536,7 +1540,7 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
         medium: "w-80",
         large: "w-96",
     };
-    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
 });
 Dropdown.displayName = "Dropdown";
 
@@ -2856,7 +2860,7 @@ const tableCellVariants = classVarianceAuthority.cva("text-body-medium-regular b
     },
 });
 
-function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
     const headerHeight = {
         small: 32,
         medium: 40,
@@ -2865,20 +2869,18 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
     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;
-                        const isLastVisibleColumn = isDetailPanelOpen
-                            ? index === visibleHeadersCount - 1
-                            : index === headerGroup.headers.length - 1;
+                        const isFirstColumn = index === 0;
+                        const isLastColumn = 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: {
+                                "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName), style: {
                                 ...getColumnStyle(header.column.id, {
                                     width: header.getSize(),
                                     minWidth: header.column.columnDef.minSize,
                                     maxWidth: header.column.columnDef.maxSize,
                                 }),
                                 top: stickyTop,
+                                ...(isFirstColumn && { paddingLeft: "24px" }),
+                                ...(isLastColumn && { paddingRight: "24px" }),
                             }, 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: "↑",
@@ -2888,42 +2890,41 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         }) }));
 }
 
-function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, 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) => {
-            const isRowSelected = row.id === effectiveSelectedRowId;
             const isRowHovered = hoveredRow === row.id;
-            const handleClick = () => handleRowClick(row.original, row.id);
+            const handleClick = () => handleRowClick(row.original);
             return (jsxRuntime.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 &&
+                    "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowHovered &&
                     showRowHover &&
-                    "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
-                        const shouldHideColumn = isDetailPanelOpen && cellIndex >= visibleHeadersCount;
+                    "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), style: {
+                            paddingTop: "20px",
+                            paddingBottom: "20px",
+                        }, children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
                         const isCellFocused = focusedCell?.rowId === row.id &&
                             focusedCell?.cellId === cell.id;
                         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: 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));
+                        const visibleCells = row.getVisibleCells();
+                        const isFirstCell = cellIndex === 0;
+                        const isLastCell = cellIndex === visibleCells.length - 1;
+                        return (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName), style: {
+                                ...getColumnStyle(cell.column.id, {
+                                    width: cell.column.getSize(),
+                                    minWidth: cell.column.columnDef.minSize,
+                                    maxWidth: cell.column.columnDef.maxSize,
+                                }),
+                                paddingTop: "20px",
+                                paddingBottom: "20px",
+                                ...(isFirstCell && { paddingLeft: "24px" }),
+                                ...(isLastCell && { paddingRight: "24px" }),
+                            }, 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));
         }) }));
 }
 
-function DetailPanel({ isOpen, content, data, onClose, }) {
-    return (jsxRuntime.jsx("div", { className: cn("absolute top-0 right-0 h-full z-20 transition-all duration-300 ease-in-out", isOpen
-            ? "translate-x-0 opacity-100"
-            : "translate-x-full opacity-0 pointer-events-none"), style: { width: "332px", paddingLeft: "12px" }, children: jsxRuntime.jsx("div", { className: "w-full h-full bg-white border border-surface-outline-neutral-muted rounded-tr-xlarge rounded-br-xlarge overflow-hidden", children: jsxRuntime.jsx("div", { className: "w-full h-full overflow-auto", children: data && (jsxRuntime.jsxs("div", { className: "relative h-full", children: [jsxRuntime.jsx("button", { onClick: (e) => {
-                                e.stopPropagation();
-                                onClose();
-                            }, className: "absolute top-4 right-4 z-10 p-2 rounded-medium hover:bg-surface-fill-neutral-faded transition-colors", "aria-label": "Close detail panel", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), content(data)] })) }) }) }));
-}
-
 function renderDefaultLoadingState({ colSpan }) {
     return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-action-fill-primary-default" }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }) }));
 }
@@ -2932,47 +2933,10 @@ function renderDefaultEmptyState({ colSpan }) {
 }
 
 // ==================== Component ====================
-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);
-    const effectiveSelectedRowId = selectedRowId !== undefined ? selectedRowId : internalSelectedRowId;
-    const isDetailPanelOpen = Boolean(effectiveSelectedRowId);
-    // ==================== Effects ====================
-    // Keep ref in sync
-    React__namespace.useEffect(() => {
-        selectedRowIdRef.current = effectiveSelectedRowId;
-    }, [effectiveSelectedRowId]);
-    // Clear selection if selected row is not in current data
-    React__namespace.useEffect(() => {
-        if (effectiveSelectedRowId) {
-            const rowExists = table
-                .getRowModel()
-                .rows.some((r) => r.id === effectiveSelectedRowId);
-            if (!rowExists) {
-                if (selectedRowId === undefined) {
-                    setInternalSelectedRowId(null);
-                }
-                if (onRowSelectionChange) {
-                    onRowSelectionChange(null);
-                }
-            }
-        }
-    }, [
-        table.getRowModel().rows,
-        effectiveSelectedRowId,
-        selectedRowId,
-        onRowSelectionChange,
-    ]);
+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, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
     // ==================== Computed Values ====================
     const hasData = table.getRowModel().rows?.length > 0;
     const headerGroups = table.getHeaderGroups();
-    const headers = headerGroups[0]?.headers || [];
-    const visibleHeadersCount = React__namespace.useMemo(() => {
-        return isDetailPanelOpen
-            ? headers.length - hideColumnsOnDetailOpen
-            : headers.length;
-    }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
     const normalizeSizeValue = (value) => {
         if (value === undefined)
             return undefined;
@@ -3039,42 +3003,18 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         }
         return rowClassName || "";
     }, [rowClassName]);
-    const handleRowClickInternal = React__namespace.useCallback((row, rowId) => {
-        const currentSelectedId = selectedRowIdRef.current;
-        const newSelectedId = currentSelectedId === rowId ? null : rowId;
-        if (selectedRowId === undefined) {
-            setInternalSelectedRowId(newSelectedId);
-        }
-        if (onRowSelectionChange) {
-            onRowSelectionChange(newSelectedId);
-        }
+    const handleRowClickInternal = React__namespace.useCallback((row) => {
         if (onRowClick) {
             onRowClick(row);
         }
-    }, [selectedRowId, onRowSelectionChange, onRowClick]);
-    const getSelectedRowData = () => {
-        if (!effectiveSelectedRowId)
-            return null;
-        const row = table
-            .getRowModel()
-            .rows.find((r) => r.id === effectiveSelectedRowId);
-        return row ? row.original : null;
-    };
-    const handleDetailPanelClose = () => {
-        if (selectedRowId === undefined) {
-            setInternalSelectedRowId(null);
-        }
-        if (onRowSelectionChange) {
-            onRowSelectionChange(null);
-        }
-    };
+    }, [onRowClick]);
     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 }), 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 }))] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsx("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, 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, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
 }
 // ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);