@wallarm-org/design-system 1.20.4 → 1.21.0

package/dist/components/Select/Select.d.ts

@@ -3,9 +3,11 @@ import { type TestableProps } from '../../utils/testId';
 type SelectNativeProps<T extends CollectionItem> = Omit<SelectRootProps<T>, 'positioning' | 'lazyMount' | 'unmountOnExit'>;
 export interface SelectBaseProps {
     loading?: boolean;
+    /** Override default floating positioning (merged with DS defaults). */
+    positioning?: SelectRootProps<CollectionItem>['positioning'];
 }
 type SelectProps<T extends CollectionItem> = SelectNativeProps<T> & SelectBaseProps & TestableProps;
-export declare function Select<T extends CollectionItem>({ children, loading, disabled, 'data-testid': testId, ...props }: SelectProps<T>): import("react").JSX.Element;
+export declare function Select<T extends CollectionItem>({ children, loading, disabled, positioning: positioningOverride, 'data-testid': testId, ...props }: SelectProps<T>): import("react").JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

package/dist/components/Select/Select.js

@@ -3,14 +3,17 @@ import { useMemo } from "react";
 import { Select } from "@ark-ui/react/select";
 import { TestIdProvider } from "../../utils/testId.js";
 import { SelectSharedProvider } from "./SelectSharedContext/index.js";
-const Select_Select = ({ children, loading = false, disabled = false, 'data-testid': testId, ...props })=>{
+const Select_Select = ({ children, loading = false, disabled = false, positioning: positioningOverride, 'data-testid': testId, ...props })=>{
     const positioning = useMemo(()=>({
             offset: {
                 mainAxis: 4
             },
             gutter: 4,
-            overflowPadding: 4
-        }), []);
+            overflowPadding: 4,
+            ...positioningOverride
+        }), [
+        positioningOverride
+    ]);
     return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx(SelectSharedProvider, {

package/dist/components/Table/EditableCell/EditableSelectCell.d.ts

@@ -11,7 +11,7 @@ export interface EditableSelectCellProps extends NativeProps, TestableProps {
     items: SelectDataItem[];
     /** Read-mode rendering of the selected value (e.g. a `Badge`). */
     children?: ReactNode;
-    /** Shown when nothing is selected. Defaults to `'Select…'`. */
+    /** Shown when nothing is selected. Defaults to `'Select'`. */
     placeholder?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }

package/dist/components/Table/EditableCell/EditableSelectCell.js

@@ -6,7 +6,7 @@ import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Select as index_js_Select, SelectContent, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner, createListCollection } from "../../Select/index.js";
 import { editableCellIcon, editableCellPlaceholder, editableCellValue, editableCellVariants } from "./classes.js";
-const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'Select…', className, ref, 'data-testid': testIdProp, ...rest })=>{
+const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'Select', className, ref, 'data-testid': testIdProp, ...rest })=>{
     const testId = useTestId(void 0, testIdProp);
     const collection = useMemo(()=>createListCollection({
             items
@@ -21,6 +21,9 @@ const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'S
             value
         ] : [],
         "data-testid": testId,
+        positioning: {
+            placement: 'bottom-start'
+        },
         onValueChange: (details)=>{
             const next = details.value[0];
             if (next && next !== value) onCommit(next);

package/dist/components/Table/StickyGroupParent.js

@@ -59,19 +59,18 @@ const StickyGroupParent = ({ tableWidth, headerHeight })=>{
         useWindowScroll,
         headerHeight
     ]);
-    if (!stickyRow) return null;
-    const cells = stickyRow.getVisibleCells();
-    const systemCells = cells.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));
-    const dataCells = cells.filter((c)=>!SYSTEM_COLUMN_IDS.has(c.column.id));
-    const firstDataCell = dataCells[0];
-    const isSelected = stickyRow.getIsAllSubRowsSelected();
+    const cells = stickyRow?.getVisibleCells();
+    const systemCells = cells?.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));
+    const dataCells = cells?.filter((c)=>!SYSTEM_COLUMN_IDS.has(c.column.id));
+    const firstDataCell = dataCells?.[0];
+    const isSelected = stickyRow?.getIsAllSubRowsSelected();
     return /*#__PURE__*/ jsx("div", {
-        className: "sticky z-20 h-0 overflow-visible pointer-events-none",
+        className: "sticky z-[21] h-0 overflow-visible pointer-events-none",
         style: {
             top: headerHeight
         },
         "aria-hidden": "true",
-        children: /*#__PURE__*/ jsx("div", {
+        children: stickyRow && /*#__PURE__*/ jsx("div", {
             className: "overflow-hidden",
             style: {
                 height: rowRef.current?.offsetHeight ?? 40

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

@@ -10,8 +10,10 @@ interface TableBodyCellProps<T extends RowData> {
     lastRow?: boolean;
     dragListeners?: ReturnType<typeof useSortable>['listeners'];
     dragAttributes?: ReturnType<typeof useSortable>['attributes'];
+    /** Orange line indicator for row drag-and-drop placement */
+    dropIndicator?: 'above' | 'below';
 }
-export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, }: TableBodyCellProps<T>): import("react").JSX.Element;
+export declare function TableBodyCell<T extends RowData>({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator, }: TableBodyCellProps<T>): import("react").JSX.Element;
 export declare namespace TableBodyCell {
     var displayName: string;
 }

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

@@ -8,7 +8,11 @@ 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, lastRow, dragListeners, dragAttributes })=>{
+const DROP_INDICATOR_SHADOW = {
+    above: 'inset 0 2px 0 0 var(--color-border-strong-warning)',
+    below: 'inset 0 -2px 0 0 var(--color-border-strong-warning)'
+};
+const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator })=>{
     const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
     const column = cell.column;
@@ -74,6 +78,9 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow,
             ...dndStyle,
             ...isCut && {
                 overflow: 'hidden'
+            },
+            ...dropIndicator && {
+                boxShadow: DROP_INDICATOR_SHADOW[dropIndicator]
             }
         },
         colSpan: colSpan,

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

@@ -1,4 +1,9 @@
 import { type FC, type ReactNode } from 'react';
+interface RowDndIndicatorState {
+    activeId: string | null;
+    overId: string | null;
+}
+export declare const useRowDndIndicator: () => RowDndIndicatorState;
 interface TableBodyRowDndContextProps {
     children: ReactNode;
 }

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

@@ -1,9 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { useTableContext } from "../TableContext/index.js";
 import { TableRowOverlay } from "./TableRowOverlay.js";
+const ROW_DND_INDICATOR_DEFAULT = {
+    activeId: null,
+    overId: null
+};
+const RowDndIndicatorContext = /*#__PURE__*/ createContext(ROW_DND_INDICATOR_DEFAULT);
+const useRowDndIndicator = ()=>useContext(RowDndIndicatorContext);
+const CURSOR_STYLE_ATTR = 'data-table-row-drag';
+function setCursorGrabbing() {
+    const style = document.createElement('style');
+    style.setAttribute(CURSOR_STYLE_ATTR, '');
+    style.textContent = '* { cursor: grabbing !important; }';
+    document.head.appendChild(style);
+}
+function resetCursor() {
+    document.head.querySelector(`style[${CURSOR_STYLE_ATTR}]`)?.remove();
+}
 const TableBodyRowDndContext = ({ children })=>{
     const { rowDndEnabled, onRowReorder } = useTableContext();
     if (!rowDndEnabled) return children;
@@ -19,19 +35,37 @@ const TableBodyRowDndContextInner = ({ children, onRowReorder })=>{
         rows
     ]);
     const [activeRow, setActiveRow] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const [overId, setOverId] = useState(null);
+    const indicatorState = useMemo(()=>({
+            activeId,
+            overId
+        }), [
+        activeId,
+        overId
+    ]);
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
             distance: 5
         }
     }), useSensor(KeyboardSensor));
     const handleDragStart = useCallback((event)=>{
-        const row = rows.find((r)=>r.id === String(event.active.id));
+        const id = String(event.active.id);
+        const row = rows.find((r)=>r.id === id);
         setActiveRow(row ?? null);
+        setActiveId(id);
+        setCursorGrabbing();
     }, [
         rows
     ]);
+    const handleDragOver = useCallback((event)=>{
+        setOverId(event.over ? String(event.over.id) : null);
+    }, []);
     const handleDragEnd = useCallback((event)=>{
         setActiveRow(null);
+        setActiveId(null);
+        setOverId(null);
+        resetCursor();
         const { active, over } = event;
         if (!over || active.id === over.id) return;
         onRowReorder?.({
@@ -43,26 +77,36 @@ const TableBodyRowDndContextInner = ({ children, onRowReorder })=>{
     ]);
     const handleDragCancel = useCallback(()=>{
         setActiveRow(null);
+        setActiveId(null);
+        setOverId(null);
+        resetCursor();
     }, []);
-    return /*#__PURE__*/ jsxs(DndContext, {
-        sensors: sensors,
-        collisionDetection: closestCenter,
-        onDragStart: handleDragStart,
-        onDragEnd: handleDragEnd,
-        onDragCancel: handleDragCancel,
-        children: [
-            /*#__PURE__*/ jsx(SortableContext, {
-                items: rowIds,
-                strategy: verticalListSortingStrategy,
-                children: children
-            }),
-            /*#__PURE__*/ jsx(DragOverlay, {
-                children: activeRow ? /*#__PURE__*/ jsx(TableRowOverlay, {
-                    row: activeRow
-                }) : null
-            })
-        ]
+    return /*#__PURE__*/ jsx(RowDndIndicatorContext.Provider, {
+        value: indicatorState,
+        children: /*#__PURE__*/ jsxs(DndContext, {
+            sensors: sensors,
+            collisionDetection: closestCenter,
+            onDragStart: handleDragStart,
+            onDragOver: handleDragOver,
+            onDragEnd: handleDragEnd,
+            onDragCancel: handleDragCancel,
+            children: [
+                /*#__PURE__*/ jsx(SortableContext, {
+                    items: rowIds,
+                    strategy: verticalListSortingStrategy,
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(DragOverlay, {
+                    style: {
+                        cursor: 'grabbing'
+                    },
+                    children: activeRow ? /*#__PURE__*/ jsx(TableRowOverlay, {
+                        row: activeRow
+                    }) : null
+                })
+            ]
+        })
     });
 };
 TableBodyRowDndContext.displayName = 'TableBodyRowDndContext';
-export { TableBodyRowDndContext };
+export { TableBodyRowDndContext, useRowDndIndicator };

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

@@ -10,7 +10,8 @@ const TableRowOverlayInner = ({ row })=>{
     return /*#__PURE__*/ jsx("table", {
         className: "w-full table-fixed border-collapse",
         style: {
-            tableLayout: 'fixed'
+            tableLayout: 'fixed',
+            cursor: 'grabbing'
         },
         children: /*#__PURE__*/ jsx("tbody", {
             children: /*#__PURE__*/ jsx(Tr, {

package/dist/components/Table/TableColGroup.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID } from "./lib/index.js";
 import { useTableContext } from "./TableContext/index.js";
 const SYSTEM_COLUMN_IDS = new Set([
@@ -7,27 +7,30 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const TableColGroup = ({ tableWidth })=>{
-    const { table } = useTableContext();
+    const { table, stretch } = useTableContext();
     const columns = table.getVisibleLeafColumns();
     const isFixed = (col)=>SYSTEM_COLUMN_IDS.has(col.id) || !col.getCanResize() && col.columnDef.minSize === col.columnDef.maxSize || col.columnDef.meta?.resizeType === 'cut';
     const fixedWidth = columns.filter(isFixed).reduce((sum, c)=>sum + c.getSize(), 0);
     const totalFlexSize = columns.filter((c)=>!isFixed(c)).reduce((sum, c)=>sum + c.getSize(), 0);
     const availableForFlex = tableWidth - fixedWidth;
-    return /*#__PURE__*/ jsx("colgroup", {
-        children: columns.map((col)=>{
-            if (isFixed(col)) return /*#__PURE__*/ jsx("col", {
-                style: {
-                    width: col.getSize()
-                }
-            }, col.id);
-            if (0 === totalFlexSize) return /*#__PURE__*/ jsx("col", {}, col.id);
-            const pixelWidth = col.getSize() / totalFlexSize * availableForFlex;
-            return /*#__PURE__*/ jsx("col", {
-                style: {
-                    width: pixelWidth
-                }
-            }, col.id);
-        })
+    return /*#__PURE__*/ jsxs("colgroup", {
+        children: [
+            columns.map((col)=>{
+                if (isFixed(col) || !stretch) return /*#__PURE__*/ jsx("col", {
+                    style: {
+                        width: col.getSize()
+                    }
+                }, col.id);
+                if (0 === totalFlexSize) return /*#__PURE__*/ jsx("col", {}, col.id);
+                const pixelWidth = col.getSize() / totalFlexSize * availableForFlex;
+                return /*#__PURE__*/ jsx("col", {
+                    style: {
+                        width: pixelWidth
+                    }
+                }, col.id);
+            }),
+            !stretch && /*#__PURE__*/ jsx("col", {}, "_filler")
+        ]
     });
 };
 TableColGroup.displayName = 'TableColGroup';

package/dist/components/Table/TableContext/TableProvider.js

@@ -15,7 +15,7 @@ const toTanStackPinning = (p, pinnedLeft)=>({
         end: p?.right ?? []
     });
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, isLoadingPrevious = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, enableSelectAllRows = true, onSelectAllRows, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, columnGroups, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onRowReorder, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
+    const { data, columns, isLoading = false, isLoadingPrevious = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, enableSelectAllRows = true, onSelectAllRows, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, columnGroups, virtualized, stretch = true, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onRowReorder, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -203,6 +203,7 @@ const TableProvider = (props)=>{
             visibilityEnabled,
             hasSubRowGrouping: !!getSubRows,
             virtualized,
+            stretch,
             renderExpandedRow: renderExpandedRow,
             estimateRowHeight,
             overscan,
@@ -245,6 +246,7 @@ const TableProvider = (props)=>{
         visibilityEnabled,
         getSubRows,
         virtualized,
+        stretch,
         renderExpandedRow,
         estimateRowHeight,
         overscan,

package/dist/components/Table/TableContext/types.d.ts

@@ -25,6 +25,7 @@ export interface TableContextValue<T extends RowData> {
     visibilityEnabled: boolean;
     hasSubRowGrouping: boolean;
     virtualized: TableVirtualized | undefined;
+    stretch: boolean;
     renderExpandedRow?: (row: Row<DSTableFeatures, T>) => ReactNode;
     estimateRowHeight?: (index: number) => number;
     overscan: number;

package/dist/components/Table/TableHead.js

@@ -1,21 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { THead, Tr } from "./primitives/index.js";
+import { THead, Th, Tr } from "./primitives/index.js";
 import { useTableContext } from "./TableContext/index.js";
 import { TableHeadCell } from "./TableHeadCell.js";
 const TableHead = ()=>{
-    const { table } = useTableContext();
+    const { table, stretch } = useTableContext();
     const testId = useTestId('head');
     const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     return /*#__PURE__*/ jsx(THead, {
         className: cn('sticky top-0 z-30', hasTextDescription ? 'h-48' : 'h-32'),
         "data-testid": testId,
-        children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(Tr, {
-                children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHeadCell, {
-                        header: header,
-                        hasTextDescription: hasTextDescription
-                    }, header.id))
+        children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsxs(Tr, {
+                children: [
+                    headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHeadCell, {
+                            header: header,
+                            hasTextDescription: hasTextDescription
+                        }, header.id)),
+                    !stretch && /*#__PURE__*/ jsx(Th, {
+                        "aria-hidden": true
+                    })
+                ]
             }, headerGroup.id))
     });
 };

package/dist/components/Table/TableLoadingState.js

@@ -1,11 +1,11 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } 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";
 import { useTableContext } from "./TableContext/index.js";
 const TableLoadingState = ({ position = 'end', count })=>{
-    const { table, skeletonCount } = useTableContext();
+    const { table, skeletonCount, stretch } = useTableContext();
     const testId = useTestId('start' === position ? 'loading-start' : 'loading');
     const columns = table.getVisibleLeafColumns();
     const lastRowIdx = (count ?? skeletonCount) - 1;
@@ -14,19 +14,25 @@ const TableLoadingState = ({ position = 'end', count })=>{
             length: count ?? skeletonCount
         }, (_, rowIdx)=>{
             const key = `skeleton-${rowIdx}`;
-            return /*#__PURE__*/ jsx(Tr, {
+            return /*#__PURE__*/ jsxs(Tr, {
                 "data-testid": 0 === rowIdx ? testId : void 0,
                 "data-loading-position": position,
-                children: columns.map((column)=>/*#__PURE__*/ jsx(Td, {
-                        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()
-                        },
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            width: "100%",
-                            height: "20px"
-                        })
-                    }, column.id))
+                children: [
+                    columns.map((column)=>/*#__PURE__*/ jsx(Td, {
+                            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()
+                            },
+                            children: /*#__PURE__*/ jsx(Skeleton, {
+                                width: "100%",
+                                height: "20px"
+                            })
+                        }, column.id)),
+                    !stretch && /*#__PURE__*/ jsx(Td, {
+                        pinned: false,
+                        "aria-hidden": true
+                    })
+                ]
             }, key);
         })
     });

package/dist/components/Table/TableMasterCellActions.js

@@ -1,11 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 const TableMasterCellActions = ({ children })=>/*#__PURE__*/ jsx("div", {
-        className: cn('shrink-0 grid grid-cols-[0fr] opacity-0 pr-4', 'group-hover/row:grid-cols-[1fr] group-hover/row:opacity-100 group-hover/row:pl-4', 'group-data-[selected]/row:grid-cols-[1fr] group-data-[selected]/row:opacity-100 group-data-[selected]/row:pl-4', 'group-data-[preview-active]/row:grid-cols-[1fr] group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pl-4'),
-        children: /*#__PURE__*/ jsx("div", {
-            className: "overflow-hidden flex items-center gap-2",
-            children: children
-        })
+        className: cn('shrink-0 pl-4 pr-4 flex items-center gap-2', 'opacity-0 pointer-events-none', 'group-hover/row:opacity-100 group-hover/row:pointer-events-auto', 'group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto', 'group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto'),
+        children: children
     });
 TableMasterCellActions.displayName = 'TableMasterCellActions';
 export { TableMasterCellActions };

package/dist/components/Table/TableRow.js

@@ -5,6 +5,7 @@ import { useTestId } from "../../utils/testId.js";
 import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, useRowDnd } from "./lib/index.js";
 import { Td, Tr } from "./primitives/index.js";
 import { TableBodyCell } from "./TableBody/TableBodyCell.js";
+import { useRowDndIndicator } from "./TableBody/TableBodyRowDndContext.js";
 import { useTableContext } from "./TableContext/index.js";
 import { TableRowExpanded } from "./TableRowExpanded.js";
 const SYSTEM_COLUMN_IDS = new Set([
@@ -13,9 +14,10 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_DRAG_HANDLE_COLUMN_ID
 ]);
 const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
-    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow } = useTableContext();
+    const { table, expandingEnabled, activeRowId, isLoading, renderExpandedRow, stretch, hasSubRowGrouping, allLeafColumns } = useTableContext();
     const testId = useTestId('row');
     const { canDnd, isDragging, setNodeRef, style: dndStyle, attributes, listeners } = useRowDnd(row);
+    const { activeId, overId } = useRowDndIndicator();
     const isGroupParent = row.subRows.length > 0;
     const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
     const isPreviewActive = activeRowId === row.id;
@@ -38,6 +40,11 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
         const systemCells = cells.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));
         const dataCells = cells.filter((c)=>!SYSTEM_COLUMN_IDS.has(c.column.id));
         const firstDataCell = dataCells[0];
+        const stickyStyle = hasSubRowGrouping && row.getIsExpanded() ? {
+            position: 'sticky',
+            top: allLeafColumns.some((c)=>c.columnDef.meta?.description?.type === 'text') ? 48 : 32,
+            zIndex: 20
+        } : void 0;
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsxs(Tr, {
@@ -49,6 +56,7 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                     "data-selected": isSelected || void 0,
                     "data-preview-active": isPreviewActive || void 0,
                     "aria-selected": isSelected || void 0,
+                    style: stickyStyle,
                     children: [
                         systemCells.map((cell)=>/*#__PURE__*/ jsx(TableBodyCell, {
                                 cell: cell,
@@ -67,7 +75,11 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                                     width: cell.column.getSize()
                                 },
                                 "aria-hidden": "true"
-                            }, cell.id))
+                            }, cell.id)),
+                        !stretch && /*#__PURE__*/ jsx(Td, {
+                            pinned: false,
+                            "aria-hidden": true
+                        })
                     ]
                 }),
                 expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
@@ -77,9 +89,15 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
             ]
         });
     }
+    let dropIndicator;
+    if (overId === row.id && null != activeId && activeId !== row.id) {
+        const activeIndex = flatRows.findIndex((r)=>r.id === activeId);
+        const overIndex = flatRows.findIndex((r)=>r.id === row.id);
+        if (-1 !== activeIndex && -1 !== overIndex) dropIndicator = activeIndex < overIndex ? 'below' : 'above';
+    }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Tr, {
+            /*#__PURE__*/ jsxs(Tr, {
                 ref: composedRef,
                 "data-index": dataIndex,
                 "data-row-id": row.id,
@@ -91,15 +109,22 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                 "aria-selected": isSelected || void 0,
                 "data-depth": row.depth > 0 ? row.depth : void 0,
                 style: dndStyle,
-                children: row.getVisibleCells().map((cell)=>{
-                    const isDragHandle = cell.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
-                    return /*#__PURE__*/ jsx(TableBodyCell, {
-                        cell: cell,
-                        dragListeners: isDragHandle ? listeners : void 0,
-                        dragAttributes: isDragHandle ? attributes : void 0,
-                        lastRow: isLastRow
-                    }, cell.id);
-                })
+                children: [
+                    row.getVisibleCells().map((cell)=>{
+                        const isDragHandle = cell.column.id === TABLE_DRAG_HANDLE_COLUMN_ID;
+                        return /*#__PURE__*/ jsx(TableBodyCell, {
+                            cell: cell,
+                            dragListeners: isDragHandle ? listeners : void 0,
+                            dragAttributes: isDragHandle ? attributes : void 0,
+                            lastRow: isLastRow,
+                            dropIndicator: dropIndicator
+                        }, cell.id);
+                    }),
+                    !stretch && /*#__PURE__*/ jsx(Td, {
+                        pinned: false,
+                        "aria-hidden": true
+                    })
+                ]
             }),
             expandingEnabled && /*#__PURE__*/ jsx(TableRowExpanded, {
                 row: row,

package/dist/components/Table/TableRowExpanded.js

@@ -5,12 +5,13 @@ 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, lastRow })=>{
-    const { table, renderExpandedRow } = useTableContext();
+    const { table, stretch, renderExpandedRow } = useTableContext();
     const testId = useTestId('row-expanded');
     if (!row.getIsExpanded() || !renderExpandedRow) return null;
     const visibleColumns = table.getVisibleLeafColumns();
     const hasExpandColumn = visibleColumns.some((col)=>col.id === TABLE_EXPAND_COLUMN_ID);
-    const contentColSpan = hasExpandColumn ? visibleColumns.length - 1 : visibleColumns.length;
+    const fillerOffset = stretch ? 0 : 1;
+    const contentColSpan = (hasExpandColumn ? visibleColumns.length - 1 : visibleColumns.length) + fillerOffset;
     return /*#__PURE__*/ jsxs(Tr, {
         "data-testid": testId,
         style: dndStyle,

package/dist/components/Table/hooks/useStickyGroupParent.js

@@ -55,6 +55,7 @@ const useStickyGroupParent = (options)=>{
     const [pushUpOffset, setPushUpOffset] = useState(0);
     const rafRef = useRef(0);
     const prevStickyRowIdRef = useRef(null);
+    const prevOffsetRef = useRef(0);
     const compute = useCallback(()=>{
         if (!enabled) {
             if (null !== prevStickyRowIdRef.current) {
@@ -98,8 +99,9 @@ const useStickyGroupParent = (options)=>{
             }
         }
         const newId = foundRow?.id ?? null;
-        if (newId !== prevStickyRowIdRef.current || 0 !== offset) {
+        if (newId !== prevStickyRowIdRef.current || offset !== prevOffsetRef.current) {
             prevStickyRowIdRef.current = newId;
+            prevOffsetRef.current = offset;
             setStickyRow(foundRow);
             setPushUpOffset(offset);
         }

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

@@ -8,7 +8,7 @@ export declare const TABLE_SELECT_COLUMN_WIDTH = 33;
 export declare const TABLE_EXPAND_COLUMN_ID = "_expand";
 export declare const TABLE_EXPAND_COLUMN_WIDTH = 33;
 export declare const TABLE_DRAG_HANDLE_COLUMN_ID = "_dragHandle";
-export declare const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 33;
+export declare const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 24;
 export declare const TABLE_END_REACHED_THRESHOLD = 200;
 export declare const TABLE_START_REACHED_THRESHOLD = 200;
 /** Minimum time (ms) between successive edge-reached callbacks. */

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

@@ -7,7 +7,7 @@ const TABLE_SELECT_COLUMN_WIDTH = 33;
 const TABLE_EXPAND_COLUMN_ID = '_expand';
 const TABLE_EXPAND_COLUMN_WIDTH = 33;
 const TABLE_DRAG_HANDLE_COLUMN_ID = '_dragHandle';
-const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 33;
+const TABLE_DRAG_HANDLE_COLUMN_WIDTH = 24;
 const TABLE_END_REACHED_THRESHOLD = 200;
 const TABLE_START_REACHED_THRESHOLD = 200;
 const SCROLL_EDGE_COOLDOWN_MS = 200;

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

@@ -11,13 +11,13 @@ const createDragHandleColumn = ()=>({
         enableHiding: false,
         enablePinning: false,
         meta: {
-            headerClassName: 'px-8 py-4',
-            cellClassName: 'px-8 py-8'
+            headerClassName: 'px-4 py-4',
+            cellClassName: 'px-4 py-8'
         },
         header: ()=>null,
         cell: ()=>/*#__PURE__*/ jsx(GripVertical, {
                 size: "sm",
-                className: "text-text-tertiary"
+                className: "text-text-secondary"
             })
     });
 export { createDragHandleColumn };

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

@@ -1,24 +1,14 @@
 import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { useTableContext } from "../TableContext/useTableContext.js";
 const useRowDnd = (row)=>{
     const { rowDndEnabled } = useTableContext();
     const canDnd = rowDndEnabled && 0 === row.subRows.length;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    const { attributes, listeners, setNodeRef, isDragging } = useSortable({
         id: row.id,
         disabled: !canDnd
     });
-    const style = canDnd ? {
-        transform: CSS.Translate.toString(transform ? {
-            ...transform,
-            x: 0
-        } : null),
-        transition,
-        ...isDragging && {
-            opacity: 0.5,
-            position: 'relative',
-            zIndex: 100
-        }
+    const style = canDnd && isDragging ? {
+        opacity: 0.4
     } : {};
     return {
         canDnd,

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

@@ -247,6 +247,14 @@ export interface TableProps<T> extends TestableProps {
     onSettingsOpenChange?: (open: boolean) => void;
     /** Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window. */
     virtualized?: TableVirtualized;
+    /**
+     * Whether columns stretch proportionally to fill the container width.
+     * When `false`, columns use their defined sizes and the table may be
+     * narrower than its container.
+     *
+     * Default: `true`.
+     */
+    stretch?: boolean;
     estimateRowHeight?: (index: number) => number;
     overscan?: number;
     /** Callback fired when the user scrolls near the end (bottom) of the table */

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.20.3",
-  "generatedAt": "2026-09-16T12:28:29.151Z",
+  "version": "1.20.4",
+  "generatedAt": "2026-09-16T18:12:26.773Z",
   "components": [
     {
       "name": "Accordion",
@@ -79360,6 +79360,12 @@
           "required": false,
           "description": "Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window."
         },
+        {
+          "name": "stretch",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether columns stretch proportionally to fill the container width.\nWhen `false`, columns use their defined sizes and the table may be\nnarrower than its container.\n\nDefault: `true`."
+        },
         {
           "name": "estimateRowHeight",
           "type": "((index: number) => number) | undefined",
@@ -80672,7 +80678,7 @@
               "name": "placeholder",
               "type": "ReactNode",
               "required": false,
-              "description": "Shown when nothing is selected. Defaults to `'Select…'`."
+              "description": "Shown when nothing is selected. Defaults to `'Select'`."
             },
             {
               "name": "color",
@@ -85364,6 +85370,11 @@
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'firstDetected', desc: true }]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}",
           "description": "The minimum — `data`, `columns`, `getRowId` and a column to open sorted on. The header stays\nput as the body scrolls."
         },
+        {
+          "name": "NoStretch",
+          "code": "() => {\n  const narrowColumns: TableColumnDef<SecurityEvent>[] = [\n    securityColumnHelper.accessor('objectName', {\n      header: 'Object name',\n      size: 200,\n    }),\n    securityColumnHelper.accessor('status', {\n      header: 'Status',\n      size: 120,\n    }),\n    securityColumnHelper.accessor('requests', {\n      header: 'Requests',\n      size: 100,\n    }),\n  ];\n\n  return (\n    <Table data={securityEvents} columns={narrowColumns} getRowId={row => row.id} stretch={false} />\n  );\n}",
+          "description": "`stretch={false}` — columns keep their defined widths and do not expand to fill the container.\nEmpty space appears on the right when the total column width is less than the container width."
+        },
         {
           "name": "WithPagination",
           "code": "() => {\n  const allData = useMemo(() => createLargeSecurityEvents(47), []);\n  const { pageData, ...pagination } = useClientPagination(allData, 10);\n\n  return (\n    <VStack gap={12}>\n      <Table data={pageData} columns={securityColumns} getRowId={row => row.id} />\n      <Pagination {...pagination} align='right' aria-label='Security events'>\n        <PaginationPageSize options={[10, 25, 50]} />\n        <PaginationPrevious />\n        <PaginationList />\n        <PaginationNext />\n      </Pagination>\n    </VStack>\n  );\n}",
@@ -85551,7 +85562,7 @@
         },
         {
           "name": "InlineCellEditing",
-          "code": "() => {\n  const [data, setData] = useState<SecurityEvent[]>(() => securityEvents.slice(0, 6));\n  // Category starts unselected for every row, so the select shows its placeholder.\n  const [categories, setCategories] = useState<Record<string, string>>({});\n\n  const updateCell = useCallback(\n    <K extends keyof SecurityEvent>(rowId: string, key: K, value: SecurityEvent[K]) => {\n      setData(prev => prev.map(row => (row.id === rowId ? { ...row, [key]: value } : row)));\n    },\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      // The first column is the Table's pinned \"master\" column — keep it\n      // read-only; editable cells live in the plain columns after it.\n      securityColumnHelper.accessor('sourceIp', {\n        header: 'Source',\n        size: 200,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,\n      }),\n      securityColumnHelper.accessor('objectName', {\n        header: 'Object name',\n        size: 400,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableTextCell\n            value={getValue()}\n            aria-label='Edit object name'\n            onCommit={value => updateCell(row.id, 'objectName', value)}\n          />\n        ),\n      }),\n      securityColumnHelper.accessor('status', {\n        header: 'Status',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableSelectCell\n            value={getValue()}\n            items={statusItems}\n            onCommit={value => updateCell(row.id, 'status', value as SecurityEvent['status'])}\n          >\n            <StatusBadge value={getValue()} />\n          </EditableSelectCell>\n        ),\n      }),\n      // Empty-by-default select: consumer supplies the `placeholder` text.\n      securityColumnHelper.display({\n        id: 'category',\n        header: 'Category',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row }) => {\n          const value = categories[row.id] ?? '';\n          return (\n            <EditableSelectCell\n              value={value}\n              items={categoryItems}\n              placeholder='Select…'\n              aria-label='Edit category'\n              onCommit={next => setCategories(prev => ({ ...prev, [row.id]: next }))}\n            >\n              {categoryItems.find(item => item.value === value)?.label}\n            </EditableSelectCell>\n          );\n        },\n      }),\n      securityColumnHelper.accessor('parameter', {\n        header: 'Parameters',\n        size: 240,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,\n      }),\n    ],\n    [updateCell, categories],\n  );\n\n  return (\n    <VStack gap={12} align='stretch'>\n      <span className='sb-annotation'>click a cell to edit it</span>\n      <Table data={data} columns={columns} getRowId={row => row.id} />\n    </VStack>\n  );\n}"
+          "code": "() => {\n  const [data, setData] = useState<SecurityEvent[]>(() => securityEvents.slice(0, 6));\n  // Category starts unselected for every row, so the select shows its placeholder.\n  const [categories, setCategories] = useState<Record<string, string>>({});\n\n  const updateCell = useCallback(\n    <K extends keyof SecurityEvent>(rowId: string, key: K, value: SecurityEvent[K]) => {\n      setData(prev => prev.map(row => (row.id === rowId ? { ...row, [key]: value } : row)));\n    },\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () => [\n      // The first column is the Table's pinned \"master\" column — keep it\n      // read-only; editable cells live in the plain columns after it.\n      securityColumnHelper.accessor('sourceIp', {\n        header: 'Source',\n        size: 200,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,\n      }),\n      securityColumnHelper.accessor('objectName', {\n        header: 'Object name',\n        size: 400,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableTextCell\n            value={getValue()}\n            aria-label='Edit object name'\n            onCommit={value => updateCell(row.id, 'objectName', value)}\n          />\n        ),\n      }),\n      securityColumnHelper.accessor('status', {\n        header: 'Status',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row, getValue }) => (\n          <EditableSelectCell\n            value={getValue()}\n            items={statusItems}\n            onCommit={value => updateCell(row.id, 'status', value as SecurityEvent['status'])}\n          >\n            <StatusBadge value={getValue()} />\n          </EditableSelectCell>\n        ),\n      }),\n      // Empty-by-default select: consumer supplies the `placeholder` text.\n      securityColumnHelper.display({\n        id: 'category',\n        header: 'Category',\n        size: 200,\n        meta: EDITABLE_CELL_COLUMN_META,\n        cell: ({ row }) => {\n          const value = categories[row.id] ?? '';\n          return (\n            <EditableSelectCell\n              value={value}\n              items={categoryItems}\n              placeholder='Select'\n              aria-label='Edit category'\n              onCommit={next => setCategories(prev => ({ ...prev, [row.id]: next }))}\n            >\n              {categoryItems.find(item => item.value === value)?.label}\n            </EditableSelectCell>\n          );\n        },\n      }),\n      securityColumnHelper.accessor('parameter', {\n        header: 'Parameters',\n        size: 240,\n        meta: { resizeType: 'cut' as const },\n        cell: ({ getValue }) => <InlineCodeSnippet code={getValue()} size='sm' copyable={false} />,\n      }),\n    ],\n    [updateCell, categories],\n  );\n\n  return (\n    <VStack gap={12} align='stretch'>\n      <span className='sb-annotation'>click a cell to edit it</span>\n      <Table data={data} columns={columns} getRowId={row => row.id} />\n    </VStack>\n  );\n}"
         },
         {
           "name": "StickyGroupParentStory",

package/package.json

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