@wallarm-org/design-system 1.20.3 → 1.20.4

package/dist/components/Table/TableBody/TableBodyCell.d.ts

@@ -6,10 +6,12 @@ interface TableBodyCellProps<T extends RowData> {
     colSpan?: number;
     className?: string;
     disablePinnedShadow?: boolean;
+    /** Cell belongs to the table's last row — drop the bottom border, the frame draws it */
+    lastRow?: boolean;
     dragListeners?: ReturnType<typeof useSortable>['listeners'];
     dragAttributes?: ReturnType<typeof useSortable>['attributes'];
 }
-export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, dragListeners, dragAttributes, }: TableBodyCellProps<T>): import("react").JSX.Element;
+export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, }: TableBodyCellProps<T>): import("react").JSX.Element;
 export declare namespace TableBodyCell {
     var displayName: string;
 }

package/dist/components/Table/TableBody/TableBodyCell.js

@@ -8,7 +8,7 @@ import { TABLE_EXPAND_COLUMN_ID, getAlignClass, getExpandBorderClass, getPinning
 import { Td } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableMasterCellActions } from "../TableMasterCellActions.js";
-const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, dragListeners, dragAttributes })=>{
+const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes })=>{
     const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
     const column = cell.column;
@@ -61,10 +61,11 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, dragList
     };
     return /*#__PURE__*/ jsx(Td, {
         "data-testid": testId,
-        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', dragListeners && 'cursor-grab active:cursor-grabbing', meta?.cellClassName, className),
+        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth, lastRow), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', dragListeners && 'cursor-grab active:cursor-grabbing', meta?.cellClassName, className),
         pinned: 'start' === isPinned,
         lastPinnedLeft: disablePinnedShadow ? false : lastLeft,
         expanded: isExpandedToggle,
+        lastRow: lastRow,
         ref: canDnd ? setNodeRef : void 0,
         onClick: isMasterTrigger ? handleClick : void 0,
         style: {

package/dist/components/Table/TableLoadingState.js

@@ -1,4 +1,5 @@
 import { Fragment, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Td, Tr } from "./primitives/index.js";
@@ -7,6 +8,7 @@ const TableLoadingState = ({ position = 'end', count })=>{
     const { table, skeletonCount } = useTableContext();
     const testId = useTestId('start' === position ? 'loading-start' : 'loading');
     const columns = table.getVisibleLeafColumns();
+    const lastRowIdx = (count ?? skeletonCount) - 1;
     return /*#__PURE__*/ jsx(Fragment, {
         children: Array.from({
             length: count ?? skeletonCount
@@ -16,7 +18,7 @@ const TableLoadingState = ({ position = 'end', count })=>{
                 "data-testid": 0 === rowIdx ? testId : void 0,
                 "data-loading-position": position,
                 children: columns.map((column)=>/*#__PURE__*/ jsx(Td, {
-                        className: "px-16 py-8 border-b border-r border-border-primary-light",
+                        className: cn('px-16 py-8 border-b border-r border-border-primary-light', 'end' === position && rowIdx === lastRowIdx && 'border-b-0'),
                         style: {
                             width: column.getSize()
                         },

package/dist/components/Table/TableRow.js

@@ -13,12 +13,17 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
-    const { expandingEnabled, activeRowId } = useTableContext();
+    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow } = useTableContext();
     const testId = useTestId('row');
     const { canDnd, isDragging, setNodeRef, style: dndStyle, attributes, listeners } = useRowDnd(row);
     const isGroupParent = row.subRows.length > 0;
     const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
     const isPreviewActive = activeRowId === row.id;
+    const flatRows = table.getRowModel().rows;
+    const isLastTableRow = !isLoading && flatRows[flatRows.length - 1]?.id === row.id;
+    const hasExpandedContent = expandingEnabled && !!renderExpandedRow && row.getIsExpanded();
+    const isLastRow = isLastTableRow && !hasExpandedContent;
+    const isLastRowExpanded = isLastTableRow && hasExpandedContent;
     const composedRef = useCallback((node)=>{
         if (canDnd) setNodeRef(node);
         if ('function' == typeof ref) ref(node);
@@ -47,15 +52,17 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     children: [
                         systemCells.map((cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
                                 cell: cell,
-                                disablePinnedShadow: true
+                                disablePinnedShadow: true,
+                                lastRow: isLastRow
                             }, cell.id)),
                         firstDataCell && /*#__PURE__*/ jsx(TableBodyCell, {
                             cell: firstDataCell,
                             className: "border-r-0",
-                            disablePinnedShadow: true
+                            disablePinnedShadow: true,
+                            lastRow: isLastRow
                         }),
                         dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
-                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active'),
+                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', isLastRow && 'border-b-0'),
                                 style: {
                                     width: cell.column.getSize()
                                 },
@@ -64,7 +71,8 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     ]
                 }),
                 expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
-                    row: row
+                    row: row,
+                    lastRow: isLastRowExpanded
                 })
             ]
         });
@@ -88,13 +96,15 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     return /*#__PURE__*/ jsx(TableBodyCell, {
                         cell: cell,
                         dragListeners: isDragHandle ? listeners : void 0,
-                        dragAttributes: isDragHandle ? attributes : void 0
+                        dragAttributes: isDragHandle ? attributes : void 0,
+                        lastRow: isLastRow
                     }, cell.id);
                 })
             }),
             expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
                 row: row,
-                dndStyle: dndStyle
+                dndStyle: dndStyle,
+                lastRow: isLastRowExpanded
             })
         ]
     });

package/dist/components/Table/TableRowExpanded.d.ts

@@ -5,8 +5,10 @@ interface TableRowExpandedProps<T extends RowData> {
     row: Row<DSTableFeatures, T>;
     /** When row DnD is active, pass the same transform style so expanded content moves with its parent row. */
     dndStyle?: CSSProperties;
+    /** Expanded content is the table's bottom edge — drop its bottom border, the frame draws it */
+    lastRow?: boolean;
 }
-export declare function TableRowExpanded<T extends RowData>({ row, dndStyle, }: TableRowExpandedProps<T>): import("react").JSX.Element | null;
+export declare function TableRowExpanded<T extends RowData>({ row, dndStyle, lastRow, }: TableRowExpandedProps<T>): import("react").JSX.Element | null;
 export declare namespace TableRowExpanded {
     var displayName: string;
 }

package/dist/components/Table/TableRowExpanded.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { TABLE_EXPAND_COLUMN_ID } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { useTableContext } from "./TableContext/index.js";
-const TableRowExpanded = ({ row, dndStyle })=>{
+const TableRowExpanded = ({ row, dndStyle, lastRow })=>{
     const { table, renderExpandedRow } = useTableContext();
     const testId = useTestId('row-expanded');
     if (!row.getIsExpanded() || !renderExpandedRow) return null;
@@ -19,7 +20,7 @@ const TableRowExpanded = ({ row, dndStyle })=>{
             }),
             /*#__PURE__*/ jsx(Td, {
                 colSpan: contentColSpan,
-                className: "border-b border-border-primary-light bg-bg-primary p-0",
+                className: cn('border-b border-border-primary-light bg-bg-primary p-0', lastRow && 'border-b-0'),
                 children: /*#__PURE__*/ jsx("div", {
                     className: "px-16 py-12",
                     children: renderExpandedRow(row)

package/dist/components/Table/classes.d.ts

@@ -10,6 +10,7 @@ export declare const tableBodyCellVariants: (props?: ({
     pinned?: boolean | null | undefined;
     lastPinnedLeft?: boolean | null | undefined;
     expanded?: boolean | null | undefined;
+    lastRow?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableContainerVariants: (props?: ({
     virtualized?: "container" | "window" | null | undefined;

package/dist/components/Table/classes.js

@@ -51,12 +51,17 @@ const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-tex
         expanded: {
             true: 'border-b-0 before:hidden',
             false: ''
+        },
+        lastRow: {
+            true: 'border-b-0',
+            false: ''
         }
     },
     defaultVariants: {
         pinned: false,
         lastPinnedLeft: false,
-        expanded: false
+        expanded: false,
+        lastRow: false
     }
 });
 const tableContainerVariants = cva('rounded-12 border border-border-primary-light outline-none overflow-clip', {

package/dist/components/Table/lib/constants.d.ts

@@ -18,7 +18,7 @@ export declare const getAlignClass: (meta?: {
     align?: string;
     sortType?: string;
 }) => string;
-/** Border-bottom override for the last expanded row in a depth group */
-export declare const getExpandBorderClass: (isExpandColumn: boolean, depth: number) => string | false;
+/** Border-bottom override for the last expanded row in a depth group (never on the table's last row) */
+export declare const getExpandBorderClass: (isExpandColumn: boolean, depth: number, isLastRow?: boolean) => string | false;
 /** Sort labels by sortType: [ascLabel, descLabel] */
 export declare const SORT_LABELS: Record<string, [string, string]>;

package/dist/components/Table/lib/constants.js

@@ -22,7 +22,7 @@ const getAlignClass = (meta)=>{
     if ('center' === align) return 'text-center';
     return 'text-left';
 };
-const getExpandBorderClass = (isExpandColumn, depth)=>isExpandColumn && depth > 0 && '[tr[data-depth]:has(+_tr:not([data-depth]))_&]:!border-b [tr[data-depth]:last-child_&]:!border-b';
+const getExpandBorderClass = (isExpandColumn, depth, isLastRow = false)=>isExpandColumn && depth > 0 && !isLastRow && '[tr[data-depth]:has(+_tr:not([data-depth]))_&]:!border-b [tr[data-depth]:last-child_&]:!border-b';
 const SORT_LABELS = {
     text: [
         'A \u2192 Z',

package/dist/components/Table/primitives/Td.js

@@ -2,14 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../../utils/cn.js";
 import { tableBodyCellVariants } from "../classes.js";
-const Td = /*#__PURE__*/ forwardRef(({ className, pinned, lastPinnedLeft, expanded, ...props }, ref)=>{
-    const hasVariants = void 0 !== pinned || void 0 !== lastPinnedLeft || void 0 !== expanded;
+const Td = /*#__PURE__*/ forwardRef(({ className, pinned, lastPinnedLeft, expanded, lastRow, ...props }, ref)=>{
+    const hasVariants = void 0 !== pinned || void 0 !== lastPinnedLeft || void 0 !== expanded || void 0 !== lastRow;
     return /*#__PURE__*/ jsx("td", {
         ref: ref,
         className: cn(hasVariants ? tableBodyCellVariants({
             pinned,
             lastPinnedLeft,
-            expanded
+            expanded,
+            lastRow
         }) : void 0, className),
         ...props
     });

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.20.2",
-  "generatedAt": "2026-09-15T14:18:54.593Z",
+  "version": "1.20.3",
+  "generatedAt": "2026-09-16T12:28:29.151Z",
   "components": [
     {
       "name": "Accordion",
@@ -79440,6 +79440,14 @@
           ],
           "defaultValue": "false"
         },
+        {
+          "name": "lastRow",
+          "options": [
+            "true",
+            "false"
+          ],
+          "defaultValue": "false"
+        },
         {
           "name": "virtualized",
           "options": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.20.3",
+  "version": "1.20.4",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",