@neasg/design-system 0.4.25 → 0.4.27

package/dist/table.d.ts

@@ -123,13 +123,12 @@ export interface TableRowExpansionProps<Row> {
     /** Accessible label for a row's expansion toggle. */
     getToggleLabel?: (row: Row, rowIndex: number, expanded: boolean) => string;
 }
-interface SortableTableHeadProps<T extends string> {
-    ref?: React.Ref<HTMLTableCellElement>;
-    field: T;
+interface SortableTableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "children" | "style"> {
+    field: string;
     children: React.ReactNode;
-    currentSortField: T | null;
+    currentSortField: string | null;
     currentSortDirection: SortDirection;
-    onSort: (field: T) => void;
+    onSort: (field: string) => void;
     className?: string;
     style?: React.CSSProperties;
     allowWrap?: boolean;
@@ -142,9 +141,8 @@ interface SortableTableHeadProps<T extends string> {
     treatWidthAsMinWidth?: boolean;
     containOverflow?: boolean;
     gripIcon?: React.ReactNode;
-    [key: string]: unknown;
 }
-declare function SortableTableHead<T extends string>({ ref, field, children, currentSortField, currentSortDirection, onSort, className, style, allowWrap, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, gripIcon, ...rest }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const SortableTableHead: React.ForwardRefExoticComponent<SortableTableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
 export interface TableColumnResizeHandleRenderProps<Row> {
     column: TableColumn<Row>;
     nextColumn: TableColumn<Row>;

package/dist/table.js

@@ -265,7 +265,7 @@ export const TABLE_SKELETON_PRESETS = {
         })),
     }),
 };
-function SortableTableHead({ ref, field, children, currentSortField, currentSortDirection, onSort, className, style, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, gripIcon, ...rest }) {
+const SortableTableHead = React.forwardRef(function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, style, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, gripIcon, ...rest }, ref) {
     const isSorted = currentSortField === field;
     const resolvedSortLabel = sortLabel !== null && sortLabel !== void 0 ? sortLabel : (typeof children === "string" || typeof children === "number"
         ? String(children)
@@ -276,10 +276,13 @@ function SortableTableHead({ ref, field, children, currentSortField, currentSort
                 : "descending"
             : undefined, className: cn(resizeHandle && "relative", alignClassName(align), className), style: style, wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, ...rest, children: [gripIcon, _jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
                     ? "max-w-full whitespace-normal text-left"
-                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${resolvedSortLabel}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { "aria-hidden": "true", className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
-}
+                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${resolvedSortLabel}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow &&
+                            allowWrap &&
+                            "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { "aria-hidden": "true", className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
+});
+SortableTableHead.displayName = "SortableTableHead";
 const DragGripIcon = (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute bottom-0 left-1/2 z-20 -translate-x-1/2 translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 text-muted-foreground opacity-0 shadow-sm transition-opacity group-hover/drag-col:opacity-100", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { transform: "rotate(90deg)" }, children: [_jsx("circle", { cx: "9", cy: "5", r: "1" }), _jsx("circle", { cx: "15", cy: "5", r: "1" }), _jsx("circle", { cx: "9", cy: "12", r: "1" }), _jsx("circle", { cx: "15", cy: "12", r: "1" }), _jsx("circle", { cx: "9", cy: "19", r: "1" }), _jsx("circle", { cx: "15", cy: "19", r: "1" })] }) }));
-function DraggableColumnHead({ columnKey, disabled, children, }) {
+function DraggableColumnHead({ columnKey, disabled, hasResizeHandle, prevHasResizeHandle, isFirst, isLast, children, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: columnKey, disabled });
     return children({
         ref: setNodeRef,
@@ -289,7 +292,14 @@ function DraggableColumnHead({ columnKey, disabled, children, }) {
             zIndex: isDragging ? 30 : undefined,
         },
         className: cn(!disabled &&
-            "group/drag-col relative !overflow-visible cursor-grab active:cursor-grabbing before:pointer-events-none before:absolute before:left-0 before:top-1/2 before:z-[1] before:h-6 before:-translate-y-1/2 before:w-px before:rounded-full before:bg-transparent before:transition-colors hover:before:bg-[hsl(var(--table-border))] after:pointer-events-none after:absolute after:right-0 after:top-1/2 after:z-[1] after:h-6 after:-translate-y-1/2 after:w-px after:rounded-full after:bg-transparent after:transition-colors hover:after:bg-[hsl(var(--table-border))]", isDragging && "z-10 opacity-90 shadow-lg"),
+            "group/drag-col relative !overflow-visible cursor-grab active:cursor-grabbing", !disabled &&
+            !hasResizeHandle &&
+            !isLast &&
+            "after:pointer-events-none after:absolute after:right-0 after:top-1/2 after:z-[1] after:h-6 after:-translate-y-1/2 after:w-px after:rounded-full after:bg-transparent after:transition-colors hover:after:bg-[hsl(var(--table-border))]", !disabled &&
+            !hasResizeHandle &&
+            !prevHasResizeHandle &&
+            !isFirst &&
+            "before:pointer-events-none before:absolute before:left-0 before:top-1/2 before:z-[1] before:h-6 before:-translate-y-1/2 before:w-px before:rounded-full before:bg-transparent before:transition-colors hover:before:bg-[hsl(var(--table-border))]", isDragging && "z-10 opacity-90 shadow-lg"),
         gripIcon: disabled ? null : DragGripIcon,
         dragHandleProps: disabled ? {} : { ...attributes, ...listeners },
     });
@@ -641,12 +651,10 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(E
             if (!reorderableColumns) {
                 return renderColumnHead(column, columnIndex);
             }
-            return (_jsx(DraggableColumnHead, { columnKey: column.key, disabled: Boolean(column.sticky), children: (dragProps) => renderColumnHead(column, columnIndex, dragProps) }, column.key));
+            const prevColumn = columnIndex > 0 ? cols[columnIndex - 1] : undefined;
+            return (_jsx(DraggableColumnHead, { columnKey: column.key, disabled: Boolean(column.sticky), hasResizeHandle: Boolean(renderResizeHandle(column, columnIndex)), prevHasResizeHandle: Boolean(prevColumn && renderResizeHandle(prevColumn, columnIndex - 1)), isFirst: columnIndex === 0, isLast: columnIndex === cols.length - 1, children: (dragProps) => renderColumnHead(column, columnIndex, dragProps) }, column.key));
         });
-        if (!reorderableColumns) {
-            return headers;
-        }
-        return (_jsx(DndContext, { sensors: columnReorderSensors, collisionDetection: closestCenter, onDragEnd: handleColumnDragEnd, children: _jsx(SortableContext, { items: reorderableColumnIds, strategy: horizontalListSortingStrategy, children: headers }) }));
+        return headers;
     }
     const resolvedEmptyState = centerEmptyState ? (_jsx("div", { "data-slot": "table-empty-state", className: "flex w-full min-w-0 items-center justify-center whitespace-normal text-center [&>*]:mx-auto", style: { minHeight: emptyStateMinHeight }, children: emptyState })) : (emptyState);
     const container = (_jsxs(TableContainer, { ref: tableContainerRef, role: stickyScrollState.scrollable ? "region" : undefined, "aria-label": stickyScrollState.scrollable
@@ -723,9 +731,10 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(E
                                             })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
                                                 (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
                         })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length + (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }), _jsx("div", { role: "status", className: "sr-only", children: loading ? loadingLabel : null })] }));
+    const reorderableContainer = reorderableColumns ? (_jsx(DndContext, { sensors: columnReorderSensors, collisionDetection: closestCenter, onDragEnd: handleColumnDragEnd, children: _jsx(SortableContext, { items: reorderableColumnIds, strategy: horizontalListSortingStrategy, children: container }) })) : (container);
     if (!pagination) {
-        return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
+        return (_jsxs("div", { className: "space-y-4", children: [toolbar, reorderableContainer] }));
     }
-    return (_jsxs("div", { className: "space-y-4", children: [toolbar, container, _jsx(Pagination, { ...pagination })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [toolbar, reorderableContainer, _jsx(Pagination, { ...pagination })] }));
 }
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",