infinity-ui-elements 1.7.12 → 1.7.13

package/dist/index.esm.js

@@ -2839,7 +2839,7 @@ 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, getColumnStyle, }) {
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
     const headerHeight = {
         small: 32,
         medium: 40,
@@ -2848,20 +2848,18 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
     return (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 (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;
+                        const isFirstColumn = index === 0;
+                        const isLastColumn = 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: {
+                                "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 : (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: "↑",
@@ -2871,42 +2869,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.useState(null);
     const [hoveredRow, setHoveredRow] = React.useState(null);
     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);
+            const handleClick = () => handleRowClick(row.original);
             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 &&
+                    "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 && (jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), children: 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 && (jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), style: {
+                            paddingTop: "20px",
+                            paddingBottom: "20px",
+                        }, children: 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 (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: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                        const visibleCells = row.getVisibleCells();
+                        const isFirstCell = cellIndex === 0;
+                        const isLastCell = cellIndex === visibleCells.length - 1;
+                        return (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: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                     })] }, row.id));
         }) }));
 }
 
-function DetailPanel({ isOpen, content, data, onClose, }) {
-    return (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: jsx("div", { className: "w-full h-full bg-white border border-surface-outline-neutral-muted rounded-tr-xlarge rounded-br-xlarge overflow-hidden", children: jsx("div", { className: "w-full h-full overflow-auto", children: data && (jsxs("div", { className: "relative h-full", children: [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: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), content(data)] })) }) }) }));
-}
-
 function renderDefaultLoadingState({ colSpan }) {
     return (jsx("tr", { children: jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: jsxs("div", { className: "flex items-center justify-center gap-2", children: [jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-action-fill-primary-default" }), jsx("span", { children: "Loading..." })] }) }) }));
 }
@@ -2915,47 +2912,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.useState(null);
-    const selectedRowIdRef = React.useRef(null);
-    const effectiveSelectedRowId = selectedRowId !== undefined ? selectedRowId : internalSelectedRowId;
-    const isDetailPanelOpen = Boolean(effectiveSelectedRowId);
-    // ==================== Effects ====================
-    // Keep ref in sync
-    React.useEffect(() => {
-        selectedRowIdRef.current = effectiveSelectedRowId;
-    }, [effectiveSelectedRowId]);
-    // Clear selection if selected row is not in current data
-    React.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.useMemo(() => {
-        return isDetailPanelOpen
-            ? headers.length - hideColumnsOnDetailOpen
-            : headers.length;
-    }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
     const normalizeSizeValue = (value) => {
         if (value === undefined)
             return undefined;
@@ -3022,42 +2982,18 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         }
         return rowClassName || "";
     }, [rowClassName]);
-    const handleRowClickInternal = React.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.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 (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(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !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, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("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, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (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.forwardRef(TableComponent);