@jinaan/uikit 0.1.21 → 0.1.23

package/dist/utils.d.ts

@@ -1,4 +1,6 @@
 import { type ClassValue } from "clsx";
 /** Merge conditional class names with Tailwind conflict resolution. */
 export declare function cn(...inputs: ClassValue[]): string;
+/** Move the id at `from` so it sits at `to`; no-op when indexes match. */
+export declare function reorderIds(ids: string[], from: number, to: number): string[];
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,uEAAuE;AACvE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,uEAAuE;AACvE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAED,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,CAQ5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -3,8 +3,10 @@ import {
   CaretUp,
   CaretUpDown,
   Columns as ColumnsIcon,
+  DotsSixVertical,
   FunnelSimple,
   Lock,
+  LockOpen,
   MagnifyingGlass,
   WarningCircle,
   X,
@@ -19,6 +21,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuChevron,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -38,7 +41,7 @@ import {
   type TableSurfaceAction,
   type TableSurfaceTone,
 } from "./table-surface";
-import { cn } from "./utils";
+import { cn, reorderIds } from "./utils";
 
 export interface Column<T> {
   id: string;
@@ -210,6 +213,10 @@ export function DataTable<T>({
       columns.filter((c) => c.defaultHidden && !c.required).map((c) => [c.id, true]),
     ),
   );
+  // Column order and runtime pins are per-mount, like `hidden`.
+  const [order, setOrder] = useState<string[] | null>(null);
+  const [locked, setLocked] = useState<string[]>([]);
+  const [dragId, setDragId] = useState<string | null>(null);
   const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
     defaultSort ?? null,
   );
@@ -218,8 +225,36 @@ export function DataTable<T>({
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
 
-  const visibleColumns = columns.filter((c) => !hidden[c.id]);
-  const hiddenColumns = columns.filter((c) => hidden[c.id] && !c.required);
+  const propOrder = columns.map((c) => c.id);
+  const byId = new Map(columns.map((c) => [c.id, c] as const));
+  const orderedColumns = order
+    ? order.map((id) => byId.get(id)).filter((c): c is Column<T> => Boolean(c))
+    : columns;
+  const visibleColumns = orderedColumns.filter((c) => !hidden[c.id]);
+  const hiddenColumns = orderedColumns.filter((c) => hidden[c.id] && !c.required);
+  // ponytail: mouse-only drag reorder; add keyboard move (Alt+Arrow) if asked.
+  const isPinned = (c: Column<T>) => c.required || locked.includes(c.id);
+  const columnAt = (id: string) => byId.get(id);
+
+  const moveBefore = (draggedId: string, targetId: string) => {
+    const target = targetId ? columnAt(targetId) : undefined;
+    if (!target || isPinned(target) || draggedId === targetId) return;
+    setOrder((prev) => {
+      const ids = prev ?? propOrder;
+      return reorderIds(ids, ids.indexOf(draggedId), ids.indexOf(targetId));
+    });
+  };
+
+  const showColumn = (id: string) => {
+    setHidden((prev) => ({ ...prev, [id]: false }));
+    // Re-showing appends at the end of the current order.
+    setOrder((prev) => (prev && prev.includes(id) ? prev : [...(prev ?? propOrder), id]));
+  };
+
+  const togglePin = (id: string) =>
+    setLocked((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
   const activeFilters = (filters ?? []).filter((f) => activeFilterIds.includes(f.id));
   const filterSignature = (filters ?? [])
     .map((f) => `${f.id}:${f.value.join(",")}`)
@@ -371,26 +406,79 @@ export function DataTable<T>({
                 variant="secondary"
                 size="md"
                 leadingIcon={<ColumnsIcon />}
-                trailingIcon={<CaretDown />}
+                trailingIcon={<DropdownMenuChevron />}
               >
                 Columns
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-54">
               <DropdownMenuLabel className="text-[13px]">Active columns</DropdownMenuLabel>
-              {visibleColumns.map((c) => (
-                <DropdownMenuCheckboxItem
-                  key={c.id}
-                  checked
-                  disabled={c.required}
-                  onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: true }))}
-                  onSelect={(e) => e.preventDefault()}
-                  className="justify-between"
-                >
-                  <span>{c.header}</span>
-                  {c.required ? <Lock className="size-3.5 text-subtle" aria-hidden /> : null}
-                </DropdownMenuCheckboxItem>
-              ))}
+              {visibleColumns.map((c) => {
+                const pinned = isPinned(c);
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={c.id}
+                    checked
+                    draggable={!pinned}
+                    onDragStart={(e) => {
+                      e.dataTransfer.effectAllowed = "move";
+                      e.dataTransfer.setData("text/plain", c.id);
+                      setDragId(c.id);
+                    }}
+                    onDragOver={(e) => {
+                      if (dragId) {
+                        e.preventDefault();
+                        moveBefore(dragId, c.id);
+                      }
+                    }}
+                    onDrop={(e) => e.preventDefault()}
+                    onDragEnd={() => setDragId(null)}
+                    onCheckedChange={(next) => {
+                      if (!next && !pinned) {
+                        setHidden((prev) => ({ ...prev, [c.id]: true }));
+                      }
+                    }}
+                    onSelect={(e) => e.preventDefault()}
+                    className="justify-between"
+                  >
+                    <span className="flex min-w-0 items-center gap-2">
+                      <DotsSixVertical
+                        aria-hidden
+                        className={cn(
+                          "size-3.5 shrink-0",
+                          pinned
+                            ? "text-subtle/60"
+                            : dragId === c.id
+                              ? "text-primary"
+                              : "text-subtle",
+                        )}
+                      />
+                      <span className="truncate">{c.header}</span>
+                    </span>
+                    {c.required ? (
+                      <Lock className="size-3.5 shrink-0 text-subtle" aria-hidden />
+                    ) : (
+                      <button
+                        type="button"
+                        aria-label={pinned ? `Unlock ${c.header}` : `Lock ${c.header}`}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          togglePin(c.id);
+                        }}
+                        onPointerDown={(e) => e.stopPropagation()}
+                        className="-m-1 rounded p-1 text-subtle transition-colors hover:bg-(--menu-highlight) hover:text-fg"
+                      >
+                        {pinned ? (
+                          <LockOpen className="size-3.5" aria-hidden />
+                        ) : (
+                          <Lock className="size-3.5" aria-hidden />
+                        )}
+                      </button>
+                    )}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
               {hiddenColumns.length > 0 ? (
                 <>
                   <DropdownMenuSeparator />
@@ -399,7 +487,7 @@ export function DataTable<T>({
                     <DropdownMenuCheckboxItem
                       key={c.id}
                       checked={false}
-                      onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: false }))}
+                      onCheckedChange={() => showColumn(c.id)}
                       onSelect={(e) => e.preventDefault()}
                     >
                       {c.header}

package/src/dropdown-menu.tsx

@@ -35,12 +35,15 @@ export function DropdownMenu({
 export const DropdownMenuTrigger = forwardRef<
   ElementRef<typeof DropdownMenuPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->(({ disabled, ...props }, ref) => {
+>(({ className, disabled, ...props }, ref) => {
   const empty = useContext(DropdownMenuEmptyContext);
 
   return (
     <DropdownMenuPrimitive.Trigger
       ref={ref}
+      // `group` lets DropdownMenuChevron rotate with the open state, even
+      // when the trigger renders through asChild onto a custom button.
+      className={cn("group", className)}
       disabled={disabled || empty}
       {...props}
     />

package/src/select.tsx

@@ -54,7 +54,7 @@ export const SelectTrigger = forwardRef<
   >
     <span className="min-w-0 flex-1 truncate text-left">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <CaretDown className="ml-auto size-3.5 shrink-0 text-subtle transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+      <CaretDown className="ml-auto size-3.5 shrink-0 text-muted transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

package/src/utils.ts

@@ -5,3 +5,14 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
+
+/** Move the id at `from` so it sits at `to`; no-op when indexes match. */
+export function reorderIds(ids: string[], from: number, to: number): string[] {
+  if (from === to || from < 0 || to < 0 || from >= ids.length || to >= ids.length) {
+    return ids;
+  }
+  const next = [...ids];
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}