@neasg/design-system 0.4.24 → 0.4.26

package/dist/index.d.ts

@@ -133,7 +133,7 @@ export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
-export type { TableColumnFilter, TableColumnFilterOption, TableDateColumnFilter, TableOptionsColumnFilter, TableTextColumnFilter, } from "./table-column-filter";
+export type { TableColumnFilter, TableColumnFilterOption, TableDateColumnFilter, TableDateRangeColumnFilter, TableOptionsColumnFilter, TableTextColumnFilter, } from "./table-column-filter";
 export { Tabs, SubTabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, type SubTabsItem, type SubTabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/multi-select.js

@@ -136,6 +136,13 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
             closeAndFocusTrigger();
             return;
         }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (currentIndex >= 0) {
+                enabledOptions[currentIndex].click();
+            }
+            return;
+        }
         if (event.key === "Home" || event.key === "End") {
             event.preventDefault();
             focusBoundaryOption(event.key === "Home" ? "first" : "last");

package/dist/table-column-filter.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type DateRangeInputValue } from "./date-input";
 interface TableColumnFilterBase {
     /** Overrides the column header text in accessible filter labels. */
     label?: string;
@@ -33,7 +34,14 @@ export interface TableDateColumnFilter extends TableColumnFilterBase {
     minDate?: Date;
     maxDate?: Date;
 }
-export type TableColumnFilter = TableTextColumnFilter | TableOptionsColumnFilter | TableDateColumnFilter;
+export interface TableDateRangeColumnFilter extends TableColumnFilterBase {
+    type: "dateRange";
+    value: DateRangeInputValue;
+    onValueChange: (value: DateRangeInputValue) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export type TableColumnFilter = TableTextColumnFilter | TableOptionsColumnFilter | TableDateColumnFilter | TableDateRangeColumnFilter;
 interface TableColumnFilterControlProps {
     filter: TableColumnFilter;
     label: string;

package/dist/table-column-filter.js

@@ -9,9 +9,15 @@ import { cn } from "./lib/utils";
 import { Popover } from "./popover";
 import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuSearch, } from "./popover-menu";
 function isTableColumnFilterActive(filter) {
-    return filter.type === "options"
-        ? filter.values.length > 0
-        : filter.value.trim().length > 0;
+    switch (filter.type) {
+        case "options":
+            return filter.values.length > 0;
+        case "dateRange":
+            return Boolean(filter.value.from || filter.value.to);
+        case "text":
+        case "date":
+            return filter.value.trim().length > 0;
+    }
 }
 function getOptionsFilterSummary(filter) {
     var _a, _b, _c;
@@ -68,6 +74,13 @@ function DateColumnFilter({ filter, label, }) {
     return (_jsx(DateInput, { label: `Filter by ${accessibleLabel}${active ? ", active" : ""}`, hideLabel: true, value: filter.value, onValueChange: filter.onValueChange, placeholder: (_b = filter.placeholder) !== null && _b !== void 0 ? _b : "Pick a date", disabled: filter.disabled, minDate: filter.minDate, maxDate: filter.maxDate, clearable: true, clearLabel: `Clear ${accessibleLabel} filter`, className: "gap-0", triggerClassName: cn(filterToggleVariants({ selected: active }), "h-9 w-full min-w-0 justify-start text-sm font-normal shadow-none", active ? "pl-2 pr-16" : "pl-2 pr-9", !active &&
             "border-0 bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground") }));
 }
+function DateRangeColumnFilter({ filter, label, }) {
+    var _a, _b;
+    const active = isTableColumnFilterActive(filter);
+    const accessibleLabel = (_a = filter.label) !== null && _a !== void 0 ? _a : label;
+    return (_jsx(DateInput, { mode: "range", label: `Filter by ${accessibleLabel}${active ? ", active" : ""}`, hideLabel: true, value: filter.value, onValueChange: filter.onValueChange, placeholder: (_b = filter.placeholder) !== null && _b !== void 0 ? _b : "Pick date range", disabled: filter.disabled, minDate: filter.minDate, maxDate: filter.maxDate, clearable: true, clearLabel: `Clear ${accessibleLabel} filter`, className: "gap-0", triggerClassName: cn(filterToggleVariants({ selected: active }), "h-9 w-full min-w-0 justify-start text-sm font-normal shadow-none", active ? "pl-2 pr-16" : "pl-2 pr-9", !active &&
+            "border-0 bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground") }));
+}
 function TableColumnFilterControl({ filter, label, }) {
     if (filter.type === "text") {
         return _jsx(TextColumnFilter, { filter: filter, label: label });
@@ -75,6 +88,9 @@ function TableColumnFilterControl({ filter, label, }) {
     if (filter.type === "options") {
         return _jsx(OptionsColumnFilter, { filter: filter, label: label });
     }
+    if (filter.type === "dateRange") {
+        return _jsx(DateRangeColumnFilter, { filter: filter, label: label });
+    }
     return _jsx(DateColumnFilter, { filter: filter, label: label });
 }
 export { TableColumnFilterControl };

package/dist/table.d.ts

@@ -124,12 +124,14 @@ export interface TableRowExpansionProps<Row> {
     getToggleLabel?: (row: Row, rowIndex: number, expanded: boolean) => string;
 }
 interface SortableTableHeadProps<T extends string> {
+    ref?: React.Ref<HTMLTableCellElement>;
     field: T;
     children: React.ReactNode;
     currentSortField: T | null;
     currentSortDirection: SortDirection;
     onSort: (field: T) => void;
     className?: string;
+    style?: React.CSSProperties;
     allowWrap?: boolean;
     width?: string;
     minWidth?: string;
@@ -139,8 +141,10 @@ interface SortableTableHeadProps<T extends string> {
     resizeHandle?: React.ReactNode;
     treatWidthAsMinWidth?: boolean;
     containOverflow?: boolean;
+    gripIcon?: React.ReactNode;
+    [key: string]: unknown;
 }
-declare function SortableTableHead<T extends string>({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+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;
 export interface TableColumnResizeHandleRenderProps<Row> {
     column: TableColumn<Row>;
     nextColumn: TableColumn<Row>;
@@ -194,6 +198,10 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     striped?: boolean;
     /** Adds a disclosure column and full-width expandable content for nested tables or row details. */
     rowExpansion?: TableRowExpansionProps<Row>;
+    /** When true, non-sticky header cells become draggable for column reordering. */
+    reorderableColumns?: boolean;
+    /** Called with the new ordered column key array after a drag-and-drop reorder. */
+    onColumnOrderChange?: (columnKeys: string[]) => void;
 }
-declare function Table<Row>({ accessibleLabel, columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingLabel, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function Table<Row>({ accessibleLabel, columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingLabel, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, reorderableColumns, onColumnOrderChange, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { ArrowUpDown, ChevronRight } from "lucide-react";
 import { ArrowDownIcon } from "./animated-icons/arrow-down";
 import { ArrowUpIcon } from "./animated-icons/arrow-up";
@@ -148,7 +151,7 @@ function getColumnHeaderAriaLabel(column) {
     }
     return undefined;
 }
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>tr]:bg-inherit", className), ...props })));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 overflow-visible bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
 TableBody.displayName = "TableBody";
@@ -262,19 +265,42 @@ export const TABLE_SKELETON_PRESETS = {
         })),
     }),
 };
-function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }) {
+function SortableTableHead({ ref, field, children, currentSortField, currentSortDirection, onSort, className, style, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, gripIcon, ...rest }) {
     const isSorted = currentSortField === field;
     const resolvedSortLabel = sortLabel !== null && sortLabel !== void 0 ? sortLabel : (typeof children === "string" || typeof children === "number"
         ? String(children)
         : field);
-    return (_jsxs(TableHead, { "data-slot": "table-column-head", scope: "col", "aria-sort": isSorted
+    return (_jsxs(TableHead, { ref: ref, "data-slot": "table-column-head", scope: "col", "aria-sort": isSorted
             ? currentSortDirection === "asc"
                 ? "ascending"
                 : "descending"
-            : undefined, className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_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
+            : 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] }));
 }
+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, hasResizeHandle, prevHasResizeHandle, isFirst, isLast, children, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: columnKey, disabled });
+    return children({
+        ref: setNodeRef,
+        style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            zIndex: isDragging ? 30 : undefined,
+        },
+        className: cn(!disabled &&
+            "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 },
+    });
+}
 const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandle({ column, nextColumn, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
     const label = getColumnResizeLabel(column);
     return (_jsx("div", { ...props, ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuetext": currentWidth === undefined ? undefined : `${currentWidth} pixels`, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
@@ -365,7 +391,7 @@ function getColumnPairResizeRange(column, nextColumn, columnWidths) {
         maxWidth: Math.round(currentWidth + maxDelta),
     };
 }
-function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onScroll, style, ...props }) {
+function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, reorderableColumns = false, onColumnOrderChange, onScroll, style, ...props }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const hasExpansionColumn = Boolean(rowExpansion);
     const hasColumnFilters = visibleColumns.some((column) => column.filter);
@@ -433,6 +459,24 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(E
         var _a;
         (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
     }, []);
+    const columnReorderSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleColumnDragEnd = React.useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id || !onColumnOrderChange) {
+            return;
+        }
+        const currentKeys = visibleColumns.map((col) => col.key);
+        const oldIndex = currentKeys.indexOf(String(active.id));
+        const newIndex = currentKeys.indexOf(String(over.id));
+        if (oldIndex >= 0 && newIndex >= 0) {
+            onColumnOrderChange(arrayMove(currentKeys, oldIndex, newIndex));
+        }
+    }, [visibleColumns, onColumnOrderChange]);
+    const reorderableColumnIds = React.useMemo(() => reorderableColumns
+        ? visibleColumns.filter((col) => !col.sticky).map((col) => col.key)
+        : [], [reorderableColumns, visibleColumns]);
     const commitColumnWidths = React.useCallback((updater) => {
         const nextColumnWidths = updater(columnWidthsRef.current);
         columnWidthsRef.current = nextColumnWidths;
@@ -584,6 +628,34 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(E
         }
         (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, Array.from(nextExpandedRowKeys));
     }, [controlledExpandedRowKeys, rowExpansion, uncontrolledExpandedRowKeys]);
+    function renderColumnHead(column, columnIndex, dragProps) {
+        var _a;
+        const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
+        const isSortable = column.sortable && sorting;
+        const columnWidth = getRenderedColumnWidth({
+            column,
+            columnWidths: resolvedColumnWidths,
+            resizing: isColumnResizingEnabled,
+        });
+        const resizeHandle = renderResizeHandle(column, columnIndex);
+        if (isSortable) {
+            return (_jsx(SortableTableHead, { ref: dragProps === null || dragProps === void 0 ? void 0 : dragProps.ref, field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName, dragProps === null || dragProps === void 0 ? void 0 : dragProps.className), style: dragProps === null || dragProps === void 0 ? void 0 : dragProps.style, allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, gripIcon: dragProps === null || dragProps === void 0 ? void 0 : dragProps.gripIcon, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, ...dragProps === null || dragProps === void 0 ? void 0 : dragProps.dragHandleProps, children: column.header }, column.key));
+        }
+        return (_jsxs(TableHead, { ref: dragProps === null || dragProps === void 0 ? void 0 : dragProps.ref, "data-slot": "table-column-head", "aria-label": getColumnHeaderAriaLabel(column), scope: "col", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName, dragProps === null || dragProps === void 0 ? void 0 : dragProps.className), style: dragProps === null || dragProps === void 0 ? void 0 : dragProps.style, ...dragProps === null || dragProps === void 0 ? void 0 : dragProps.dragHandleProps, children: [dragProps === null || dragProps === void 0 ? void 0 : dragProps.gripIcon, column.header, resizeHandle] }, column.key));
+    }
+    function renderColumnHeaders(cols) {
+        const headers = cols.map((column, columnIndex) => {
+            if (!reorderableColumns) {
+                return renderColumnHead(column, columnIndex);
+            }
+            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 }) }));
+    }
     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
             ? `${accessibleLabel} scroll area`
@@ -610,18 +682,7 @@ function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(E
                                     minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
                                     maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
                                     treatWidthAsMinWidth: !isColumnResizingEnabled,
-                                }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", scope: "col", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
-                                        var _a;
-                                        const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
-                                        const isSortable = column.sortable && sorting;
-                                        const columnWidth = getRenderedColumnWidth({
-                                            column,
-                                            columnWidths: resolvedColumnWidths,
-                                            resizing: isColumnResizingEnabled,
-                                        });
-                                        const resizeHandle = renderResizeHandle(column, columnIndex);
-                                        return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", "aria-label": getColumnHeaderAriaLabel(column), scope: "col", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
-                                    })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableCell, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
+                                }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", scope: "col", className: "w-12 px-2" })) : null, renderColumnHeaders(visibleColumns)] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableCell, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
                                         const columnWidth = getRenderedColumnWidth({
                                             column,
                                             columnWidths: resolvedColumnWidths,

package/package.json

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