@neasg/design-system 0.4.10 → 0.4.11

package/README.md

@@ -1,8 +1,8 @@
 # NEA Design System
 
-Shared NEA UI primitives, theme tokens, and Storybook documentation.
+[![npm version](https://img.shields.io/npm/v/%40neasg%2Fdesign-system?style=flat-square&label=npm)](https://www.npmjs.com/package/@neasg/design-system)
 
-Package: [@neasg/design-system on npm](https://www.npmjs.com/package/@neasg/design-system)
+Shared NEA UI primitives, theme tokens, and Storybook documentation.
 
 ## Local Development
 

package/dist/date-input.d.ts

@@ -12,6 +12,8 @@ interface DateInputSharedProps {
     hideLabel?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    clearable?: boolean;
+    clearLabel?: string;
     minDate?: Date;
     maxDate?: Date;
     className?: string;

package/dist/date-input.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, parse } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { XIcon } from "./animated-icons/x";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
@@ -92,8 +93,9 @@ function formatDisplayRange(range) {
 }
 const DateInput = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
+    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, clearable = false, clearLabel, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
     const [open, setOpen] = React.useState(false);
+    const [isSelectingRangeEnd, setIsSelectingRangeEnd] = React.useState(false);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
     const errorId = error ? `${inputId}-error` : undefined;
@@ -109,6 +111,24 @@ const DateInput = React.forwardRef((props, ref) => {
             ? formatDisplayDate(selectedDate)
             : undefined;
     const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : (isRange ? "Pick range" : "Pick a date");
+    const showClearButton = clearable && Boolean(displayValue) && !disabled;
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (isRange ? "Clear date range" : "Clear date");
+    const handleOpenChange = (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setIsSelectingRangeEnd(false);
+        }
+    };
+    const handleClear = () => {
+        if (props.mode === "range") {
+            props.onValueChange({});
+        }
+        else {
+            props.onValueChange("");
+        }
+        setIsSelectingRangeEnd(false);
+        setOpen(false);
+    };
     const handleSelect = (date) => {
         if (props.mode === "range")
             return;
@@ -118,17 +138,37 @@ const DateInput = React.forwardRef((props, ref) => {
     const handleRangeSelect = (range) => {
         if (props.mode !== "range")
             return;
+        if (!(range === null || range === void 0 ? void 0 : range.from)) {
+            props.onValueChange({});
+            setIsSelectingRangeEnd(false);
+            return;
+        }
+        const rangeFrom = range.from;
+        const rangeTo = range.to;
+        const isCompletingRange = isSelectingRangeEnd || Boolean((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !selectedRange.to);
+        const isSingleDayRange = rangeTo
+            ? getDateTime(rangeFrom) === getDateTime(rangeTo)
+            : false;
+        if (!isCompletingRange && isSingleDayRange) {
+            props.onValueChange({ from: formatISODate(rangeFrom) });
+            setIsSelectingRangeEnd(true);
+            return;
+        }
         props.onValueChange(formatDateRangeValue(range));
-        if ((range === null || range === void 0 ? void 0 : range.from) && range.to) {
+        if (rangeTo) {
+            setIsSelectingRangeEnd(false);
             setOpen(false);
         }
+        else {
+            setIsSelectingRangeEnd(true);
+        }
     };
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
     const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: [_jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }), _jsx(CalendarIcon, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", strokeWidth: 2 })] }) }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { className: "relative", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }) }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/filter-popover.d.ts

@@ -30,8 +30,9 @@ export interface FilterPopoverProps extends Pick<PopoverProps, "align" | "defaul
     emptyLabel?: React.ReactNode;
     onReset?: () => void;
     contentClassName?: string;
+    viewClassName?: string;
     maxHeight?: string;
 }
 declare function getFilterSelectionLabel(count: number): string;
-declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterPopover({ align, contentClassName, defaultOpen, emptyLabel, groupListLabel, groups, maxHeight, modal, onOpenChange, onReset, open, resetLabel, selectedCount, side, trigger, triggerLabel, viewClassName, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;
 export { FilterPopover, getFilterSelectionLabel };

package/dist/filter-popover.js

@@ -32,7 +32,7 @@ function getFilterSelectionLabel(count) {
     }
     return count === 1 ? "1 selected" : `${count} selected`;
 }
-function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", }) {
+function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLabel = "No options found.", groupListLabel = "Filter by", groups, maxHeight = "max-h-80", modal, onOpenChange, onReset, open, resetLabel = "Reset filters", selectedCount, side, trigger, triggerLabel = "Filters", viewClassName, }) {
     var _a, _b, _c, _d, _e;
     const [activeGroupId, setActiveGroupId] = React.useState(null);
     const [transitionDirection, setTransitionDirection] = React.useState("forward");
@@ -63,7 +63,7 @@ function FilterPopover({ align = "start", contentClassName, defaultOpen, emptyLa
         setActiveGroupId(null);
     };
     const defaultTrigger = (_jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), triggerLabel, resolvedSelectedCount > 0 ? (_jsx(CountBadge, { count: resolvedSelectedCount, size: "sm" })) : null] }));
-    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: "-mx-1 -mt-1 px-1 pt-1", direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) }), activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_c = activeGroup.searchPlaceholder) !== null && _c !== void 0 ? _c : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_d = activeGroup.searchPlaceholder) !== null && _d !== void 0 ? _d : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_e = activeGroup.emptyLabel) !== null && _e !== void 0 ? _e : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [_jsx(PopoverMenuGroupLabel, { children: groupListLabel }), _jsx(PopoverMenuSection, { children: groups.map((group) => {
                                     var _a;
                                     const groupSelectedCount = getGroupSelectedCount(group);
                                     const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);

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

@@ -4,6 +4,7 @@ import type { TableColumn } from "./table";
 type PopoverPlacementProps = Pick<PopoverProps, "align" | "side" | "sideOffset">;
 export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementProps {
     columns: TableColumn<Row>[];
+    /** Ordered visible column keys. Reordering in the menu emits the next order through `onVisibleColumnKeysChange`. */
     visibleColumnKeys: readonly string[];
     onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
     defaultVisibleColumnKeys?: readonly string[];

package/dist/table-column-visibility.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Columns3 } from "lucide-react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Columns3, GripVertical } from "lucide-react";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
 import { InputControl } from "./input-control";
@@ -19,11 +22,18 @@ function getColumnVisibilityLabel(column) {
     }
     return column.key;
 }
-function orderVisibleColumnKeys(columns, visibleColumnKeys) {
-    const visibleColumnKeySet = new Set(visibleColumnKeys);
-    return columns
-        .map((column) => column.key)
-        .filter((columnKey) => visibleColumnKeySet.has(columnKey));
+function orderColumnKeys(columns, columnKeys) {
+    const columnKeySet = new Set(columns.map((column) => column.key));
+    const seenColumnKeys = new Set();
+    const orderedColumnKeys = [];
+    Array.from(columnKeys).forEach((columnKey) => {
+        if (!columnKeySet.has(columnKey) || seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        orderedColumnKeys.push(columnKey);
+        seenColumnKeys.add(columnKey);
+    });
+    return orderedColumnKeys;
 }
 function arraysMatch(left, right) {
     if (left.length !== right.length) {
@@ -31,44 +41,80 @@ function arraysMatch(left, right) {
     }
     return left.every((value, index) => value === right[index]);
 }
+function SortableColumnOption({ columnKey, label, checked, disabled, onToggle, }) {
+    const checkboxId = React.useId();
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: columnKey, disabled: !checked });
+    return (_jsxs("div", { ref: setNodeRef, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: isDragging ? 50 : undefined,
+        }, className: cn("flex h-9 items-center gap-2 rounded-sm px-1.5 pr-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", isDragging && "opacity-50 shadow-sm"), children: [_jsx("button", { type: "button", "aria-label": `Reorder ${label}`, disabled: !checked, className: cn("inline-flex size-6 shrink-0 touch-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground", checked
+                    ? "cursor-grab active:cursor-grabbing"
+                    : "cursor-not-allowed opacity-40"), ...(checked ? { ...attributes, ...listeners } : {}), children: _jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Checkbox, { id: checkboxId, checked: checked, disabled: disabled, onChange: onToggle, "aria-label": label }), _jsx("label", { htmlFor: checkboxId, className: cn("min-w-0 flex-1 cursor-pointer truncate", disabled && "cursor-not-allowed text-muted-foreground"), children: label })] }));
+}
 function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, contentClassName, className, searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
     const [query, setQuery] = React.useState("");
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     const searchInputId = React.useId();
     const requiredVisibleColumns = Math.max(0, minVisibleColumns);
-    const visibleColumnKeySet = React.useMemo(() => new Set(visibleColumnKeys), [visibleColumnKeys]);
-    const visibleColumnCount = columns.filter((column) => visibleColumnKeySet.has(column.key)).length;
     const selectableColumns = React.useMemo(() => columns.filter((column) => column.hideable !== false), [columns]);
-    const defaultKeys = React.useMemo(() => orderVisibleColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
+    const defaultKeys = React.useMemo(() => orderColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
         .filter((column) => column.defaultVisible !== false)
         .map((column) => column.key)), [columns, defaultVisibleColumnKeys]);
-    const currentKeys = React.useMemo(() => orderVisibleColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const currentKeys = React.useMemo(() => orderColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const visibleColumnKeySet = React.useMemo(() => new Set(currentKeys), [currentKeys]);
+    const visibleColumnCount = currentKeys.length;
+    const orderedSelectableColumns = React.useMemo(() => {
+        const selectableColumnsByKey = new Map(selectableColumns.map((column) => [column.key, column]));
+        const orderedVisibleColumns = currentKeys
+            .map((columnKey) => selectableColumnsByKey.get(columnKey))
+            .filter((column) => Boolean(column));
+        const orderedVisibleColumnKeySet = new Set(orderedVisibleColumns.map((column) => column.key));
+        const hiddenColumns = selectableColumns.filter((column) => !orderedVisibleColumnKeySet.has(column.key));
+        return [...orderedVisibleColumns, ...hiddenColumns];
+    }, [currentKeys, selectableColumns]);
     const canRestoreDefaults = defaultKeys.length >= requiredVisibleColumns &&
         !arraysMatch(currentKeys, defaultKeys);
     const normalizedQuery = query.trim().toLowerCase();
-    const filteredColumns = selectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
+    const filteredColumns = orderedSelectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
     const commitVisibleColumnKeys = React.useCallback((nextVisibleColumnKeys) => {
-        const orderedKeys = orderVisibleColumnKeys(columns, nextVisibleColumnKeys);
+        const orderedKeys = orderColumnKeys(columns, nextVisibleColumnKeys);
         if (orderedKeys.length < requiredVisibleColumns) {
             return;
         }
         onVisibleColumnKeysChange(orderedKeys);
     }, [columns, onVisibleColumnKeysChange, requiredVisibleColumns]);
     const toggleColumn = React.useCallback((columnKey) => {
-        const nextVisibleColumnKeys = new Set(visibleColumnKeys);
-        if (nextVisibleColumnKeys.has(columnKey)) {
-            nextVisibleColumnKeys.delete(columnKey);
-        }
-        else {
-            nextVisibleColumnKeys.add(columnKey);
+        const nextVisibleColumnKeys = currentKeys.filter((currentColumnKey) => currentColumnKey !== columnKey);
+        if (!visibleColumnKeySet.has(columnKey)) {
+            nextVisibleColumnKeys.push(columnKey);
         }
         commitVisibleColumnKeys(nextVisibleColumnKeys);
-    }, [commitVisibleColumnKeys, visibleColumnKeys]);
+    }, [commitVisibleColumnKeys, currentKeys, visibleColumnKeySet]);
+    const handleDragEnd = React.useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id) {
+            return;
+        }
+        const oldIndex = currentKeys.indexOf(String(active.id));
+        const newIndex = currentKeys.indexOf(String(over.id));
+        if (oldIndex < 0 || newIndex < 0) {
+            return;
+        }
+        commitVisibleColumnKeys(arrayMove(currentKeys, oldIndex, newIndex));
+    }, [commitVisibleColumnKeys, currentKeys]);
     const defaultTrigger = (_jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": triggerLabel, className: triggerClassName, children: _jsx(Columns3, { "aria-hidden": "true" }) }));
-    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filteredColumns.length ? (filteredColumns.map((column) => {
-                        const label = getColumnVisibilityLabel(column);
-                        const checked = visibleColumnKeySet.has(column.key);
-                        const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
-                        return (_jsxs("label", { className: cn("flex h-9 cursor-pointer items-center gap-2 rounded-sm px-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit"), children: [_jsx(Checkbox, { checked: checked, disabled: disabled, onChange: () => toggleColumn(column.key), "aria-label": label }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label })] }, column.key));
-                    })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
+    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
+                                const label = getColumnVisibilityLabel(column);
+                                const checked = visibleColumnKeySet.has(column.key);
+                                const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
+                                return (_jsx(SortableColumnOption, { columnKey: column.key, label: label, checked: checked, disabled: disabled, onToggle: () => toggleColumn(column.key) }, column.key));
+                            }) }) })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
 }
 export { TableColumnVisibilityMenu };

package/dist/table.d.ts

@@ -115,7 +115,7 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
     loadingRows?: number;
-    /** Optional controlled set of visible column keys. Omit to render every column. */
+    /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
     /** When true, applies alternating row backgrounds for easier scanning. */
     striped?: boolean;

package/dist/table.js

@@ -130,16 +130,30 @@ function tableRowToneClassName(tone) {
             return undefined;
     }
 }
+function getVisibleColumns(columns, visibleColumnKeys) {
+    if (!visibleColumnKeys) {
+        return columns;
+    }
+    const columnsByKey = new Map(columns.map((column) => [column.key, column]));
+    const seenColumnKeys = new Set();
+    const visibleColumns = [];
+    visibleColumnKeys.forEach((columnKey) => {
+        if (seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        const column = columnsByKey.get(columnKey);
+        if (column) {
+            visibleColumns.push(column);
+            seenColumnKeys.add(columnKey);
+        }
+    });
+    return visibleColumns;
+}
 function Table({ 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, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, striped = false, onRowClick, style, ...props }) {
     // Use auto layout so the browser can grow a column to contain its (nowrap)
     // header. Caller can opt back into fixed layout via `tableClassName="table-fixed"`.
     const shouldUseFixedLayout = false;
-    const visibleColumnSet = visibleColumnKeys
-        ? new Set(visibleColumnKeys)
-        : undefined;
-    const visibleColumns = visibleColumnSet
-        ? columns.filter((column) => visibleColumnSet.has(column.key))
-        : columns;
+    const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(maxHeight !== undefined ? { maxHeight } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,7 +23,7 @@
     "build-storybook": "storybook build -c .storybook",
     "test": "vitest run",
     "prepublishOnly": "npm test && npm run build",
-    "chromatic": "chromatic --storybook-build-dir storybook-static --exit-once-uploaded"
+    "chromatic": "chromatic --build-script-name build-storybook"
   },
   "publishConfig": {
     "access": "public",