@wallarm-org/design-system 1.20.4 → 1.22.0

package/dist/components/SettingsHeader/SettingsHeaderDescription.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderDescription = ({ ref, children, className, ...props })=>{
+    const testId = useTestId("description");
+    return /*#__PURE__*/ jsx("p", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-description",
+        className: cn('text-sm text-text-secondary', className),
+        children: children
+    });
+};
+SettingsHeaderDescription.displayName = "SettingsHeaderDescription";
+export { SettingsHeaderDescription };

package/dist/components/SettingsHeader/SettingsHeaderFilters.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SettingsHeaderFiltersProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeaderFilters: FC<SettingsHeaderFiltersProps>;

package/dist/components/SettingsHeader/SettingsHeaderFilters.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderFilters = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('filters');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-filters",
+        className: cn('flex gap-12 items-center', className),
+        children: children
+    });
+};
+SettingsHeaderFilters.displayName = 'SettingsHeaderFilters';
+export { SettingsHeaderFilters };

package/dist/components/SettingsHeader/SettingsHeaderHeading.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SettingsHeaderHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeaderHeading: FC<SettingsHeaderHeadingProps>;

package/dist/components/SettingsHeader/SettingsHeaderHeading.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderHeading = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('heading');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-heading",
+        className: cn('flex items-start justify-between gap-16 w-full', className),
+        children: children
+    });
+};
+SettingsHeaderHeading.displayName = 'SettingsHeaderHeading';
+export { SettingsHeaderHeading };

package/dist/components/SettingsHeader/SettingsHeaderTitle.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface SettingsHeaderTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    ref?: Ref<HTMLHeadingElement>;
+}
+export declare const SettingsHeaderTitle: FC<SettingsHeaderTitleProps>;

package/dist/components/SettingsHeader/SettingsHeaderTitle.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderTitle = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('title');
+    return /*#__PURE__*/ jsx("h1", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-title",
+        className: cn('font-sans-display text-xl font-medium leading-28 text-text-primary truncate', className),
+        children: children
+    });
+};
+SettingsHeaderTitle.displayName = 'SettingsHeaderTitle';
+export { SettingsHeaderTitle };

package/dist/components/SettingsHeader/index.d.ts

@@ -0,0 +1,7 @@
+export { SettingsHeader, type SettingsHeaderProps } from './SettingsHeader';
+export { SettingsHeaderActions, type SettingsHeaderActionsProps, } from './SettingsHeaderActions';
+export { SettingsHeaderBreadcrumbs, type SettingsHeaderBreadcrumbsProps, } from './SettingsHeaderBreadcrumbs';
+export { SettingsHeaderDescription, type SettingsHeaderDescriptionProps, } from './SettingsHeaderDescription';
+export { SettingsHeaderFilters, type SettingsHeaderFiltersProps, } from './SettingsHeaderFilters';
+export { SettingsHeaderHeading, type SettingsHeaderHeadingProps, } from './SettingsHeaderHeading';
+export { SettingsHeaderTitle, type SettingsHeaderTitleProps, } from './SettingsHeaderTitle';

package/dist/components/SettingsHeader/index.js

@@ -0,0 +1,7 @@
+export { SettingsHeader } from "./SettingsHeader.js";
+export { SettingsHeaderActions } from "./SettingsHeaderActions.js";
+export { SettingsHeaderBreadcrumbs } from "./SettingsHeaderBreadcrumbs.js";
+export { SettingsHeaderDescription } from "./SettingsHeaderDescription.js";
+export { SettingsHeaderFilters } from "./SettingsHeaderFilters.js";
+export { SettingsHeaderHeading } from "./SettingsHeaderHeading.js";
+export { SettingsHeaderTitle } from "./SettingsHeaderTitle.js";

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,13 @@ const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'S
             value
         ] : [],
         "data-testid": testId,
+        positioning: {
+            placement: 'bottom-start',
+            sameWidth: true,
+            offset: {
+                crossAxis: -8
+            }
+        },
         onValueChange: (details)=>{
             const next = details.value[0];
             if (next && next !== value) onCommit(next);
@@ -53,6 +60,10 @@ const EditableSelectCell = ({ value, onCommit, items, children, placeholder = 'S
                 })
             }),
             /*#__PURE__*/ jsx(SelectPositioner, {
+                className: "min-w-full max-w-full",
+                style: {
+                    width: 'calc(var(--reference-width) + 16px)'
+                },
                 children: /*#__PURE__*/ jsx(SelectContent, {
                     children: items.map((item)=>/*#__PURE__*/ jsxs(SelectOption, {
                             item: item,

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

@@ -3,12 +3,13 @@ import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { DROP_INDICATOR_BASE } from "../classes.js";
 import { useMasterCell } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, getAlignClass, getExpandBorderClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "../lib/index.js";
 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 TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow, dragListeners, dragAttributes, dropIndicator })=>{
     const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
     const column = cell.column;
@@ -61,7 +62,7 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow,
     };
     return /*#__PURE__*/ jsx(Td, {
         "data-testid": testId,
-        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),
+        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth, lastRow), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', dragListeners && 'cursor-grab active:cursor-grabbing', dropIndicator && DROP_INDICATOR_BASE, 'above' === dropIndicator && 'after:top-0', 'below' === dropIndicator && 'after:-bottom-px', meta?.cellClassName, className),
         pinned: 'start' === isPinned,
         lastPinnedLeft: disablePinnedShadow ? false : lastLeft,
         expanded: isExpandedToggle,
@@ -74,6 +75,9 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow, lastRow,
             ...dndStyle,
             ...isCut && {
                 overflow: 'hidden'
+            },
+            ...dropIndicator && {
+                overflow: 'visible'
             }
         },
         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 };